JS小游戏之极速快跑源码详解

本文实例讲述了JS小游戏的极速快跑源码，分享给大家供大家参考。具体如下：
游戏运行后如下图所示：

Javascript部分代码如下：


/** 极速快跑
* Author: fdipzone
* Date: 2012-07-15
* Ver: 1.0
*/

var gameimg = ['images/start.png', 'images/start_over.png', 'images/go.png', 'images/go_over.png', 'images/running.gif', 'images/run_start1.gif', 'images/run_start2.gif', 'images/run_start3.gif'];
var speed_obj = new SpeedClass();

window.onload = function(){
var callback = function(){
speed_obj.init();
}
img_preload(gameimg, callback);
}

// Speed Class
function SpeedClass(){
this.levelset = [8,5,8,12]; // 难度参数
this.playerlist = null; // 选手列表
this.player = 0; // 选中的选手
this.level = 2; // 难度
this.lock = 0; // 锁定
this.isstart = 0; // 是否开始
this.isover = 0; // 是否结束
}

// init
SpeedClass.prototype.init = function(){
this.reset();
this.create_player();
this.create_event();
}

// reset
SpeedClass.prototype.reset = function(){
this.player = 0;
this.level = $('level').value; // level
this.playerlist = $_tag('li', 'playerlist');
for(var i=0; i<this.playerlist.length; i++){
this.playerlist[i].className = '';
}
disp('start_btn', 'show', 'start_btn');
disp('go_btn', 'hide', 'go_btn');
this.lock = 0; // unlock
this.isstart = 0; // unstart
this.isover = 0; // unover
}

// create player
SpeedClass.prototype.create_player = function(){
var runway = [];
var playerlist = [];
for(var i=1; i<=8; i++){
runway[i] = '<li><div id="player' + (9-i) + '" class="run_status1"></div></li>';
playerlist[i] = '<li>' + i + '</li>';
}
$('runway').innerHTML = runway.join('');
$('playerlist').innerHTML = playerlist.join('');
runway = null;
playerlist = null;
}

// create event
SpeedClass.prototype.create_event = function(){
var self = this;
this.playerlist = $_tag('li', 'playerlist');
for(var i=0; i<this.playerlist.length; i++){
this.playerlist[i].onmouseover = function(){
if(this.className!='on'){
this.className = 'over';
}
}
this.playerlist[i].onmouseout = function(){
if(this.className!='on'){
this.className = '';
}
}
this.playerlist[i].onclick = function(o,c){
return function(){
if(self.lock==0){
o.playerlist[c].className = 'on';
if(o.player!=0 && o.player!=c+1){ // 不等於0且不等於自己
o.playerlist[o.player-1].className = '';
}
o.player = c + 1;
}
}
}(self, i);
}

$('start_btn').onmouseover = function(){
this.className = 'start_over_btn';
}
$('start_btn').onmouseout = function(){
this.className = 'start_btn';
}
$('start_btn').onclick = function(){
if(self.player==0){
return alert('请选择要支持的选手');
}else{
self.lock = 1; // locked
disp('start_btn','hide');
disp('go_btn','show');
for(var i=1; i<=8; i++){
self.start(i);
}
}
}

$('go_btn').onmouseover = function(){
this.className = 'go_over_btn';
}
$('go_btn').onmouseout = function(){
this.className = 'go_btn';
}
$('go_btn').onclick = function(){
self.go();
}
}

// start game
SpeedClass.prototype.start = function(c){
var o = $('player' + c);
var step = 1;
var self = this;
var exert = 0;

o.style.marginLeft = '62px'; // init

var et = setInterval(function(){
if(step<4){ // step 1-3 is ready
o.className = 'run_status' + step;
}else{
// run
if(o.className!='running'){
o.className = 'running';
}
// start can go
if(self.isstart==0){
self.isstart = 1;
}
// 已有一名选手到达终点
if(self.isover==1){
clearInterval(et);
}else{
if(self.player!=c){ // 其他选手
exert = Math.floor(Math.random()* self.levelset[self.level])+3; // 根据level调整
}
o.style.marginLeft = parseInt(o.style.marginLeft) + Math.floor(Math.random()*8)+4 + exert + 'px';
// 到达终点
if(parseInt(o.style.marginLeft)>=745){
clearInterval(et);
self.isover = 1;
self.gameover(o.id);
}
}
}
step ++;
}, 350)
}

// go
SpeedClass.prototype.go = function(){
if(this.isstart==1 && this.isover==0){
var o = $('player' + this.player);
var exert = Math.floor(Math.random()*3)+2; // 2-5
o.style.marginLeft = parseInt(o.style.marginLeft) + exert + 'px';
}
return false;
}

// gameover
SpeedClass.prototype.gameover = function(id){
id = id.replace('player','');
var self = this;
var msg = '';
if(id==this.player){
msg = "恭喜你,你支持的选手获得胜利

";
}else{
msg = "很遗憾,你支持的选手没有获得胜利,获胜的是" + id + "号选

";
}
if(confirm(msg + '是否重新开始?')==true){
setTimeout(function(){
self.init();
},1000);
}else{
return false;
}
}

/** common function */

// get document.getElementBy(id)
function $(id){
this.id = id;
return document.getElementById(id);
}

// get document.getElementsByTagName
function $_tag(name, id){
if(typeof(id)!='undefined'){
return $(id).getElementsByTagName(name);
}else{
return document.getElementsByTagName(name);
}
}

/* div show and hide
* @param id dom id
* @param handle show or hide
* @param classname
*/
function disp(id, handle, classname){
if(handle=='show'){
$(id).style.display = 'block';
}else{
$(id).style.display = 'none';
}
if(typeof(classname)!='undefined'){
$(id).className = classname;
}
}

/* img preload
* @param img 要加载的图片数组
* @param callback 图片加载成功后回调方法
*/
function img_preload(img, callback){
var onload_img = 0;
var tmp_img = [];
for(var i=0,imgnum=img.length; i<imgnum; i++){
tmp_img[i] = new Image();
tmp_img[i].src = img[i];
if(tmp_img[i].complete){
onload_img ++;
}else{
tmp_img[i].onload = function(){
onload_img ++;
}
}
}
var et = setInterval(
function(){
if(onload_img==img.length){ // 定时器,判断图片完全加载后调用callback
clearInterval(et);
callback();
}
},200);
}



完整实例代码点击此处本站下载。
相信本文所述对大家的javascript游戏设计有一定的借鉴价值。


有用  |  无用 取消

猜你喜欢