欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

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

程序员文章站 2022-04-25 18:34:11
...
本文实例讲述了JS小游戏的极速快跑源码,分享给大家供大家参考。具体如下:

游戏运行后如下图所示:

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

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';
 playerlist[i] = '
  • ' + i + '
  • '; } $('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=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 = "恭喜你,你支持的选手获得胜利\n\n"; }else{ msg = "很遗憾,你支持的选手没有获得胜利,获胜的是" + id + "号选 \n"; } 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

    完整实例代码点击此处本站下载

    相信本文所述对大家的javascript游戏设计有一定的借鉴价值。