本文实例讲述了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 ';
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
