本文實例講述了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 Classfunction 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; // 是否結束}// initSpeedClass.prototype.init = function(){ this.reset(); this.create_player(); this.create_event();}// resetSpeedClass.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 playerSpeedClass.prototype.create_player = function(){ var runway = []; var playerlist = []; for(var i=1; i<=8; i++){ runway[i] = '<li><div id="player' + (9-i) + '"></div></li>'; playerlist[i] = '<li>' + i + '</li>'; } $('runway').innerHTML = runway.join(''); $('playerlist').innerHTML = playerlist.join(''); runway = null; playerlist = null;}// create eventSpeedClass.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 gameSpeedClass.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)}// goSpeedClass.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;}// gameoverSpeedClass.prototype.gameover = function(id){ id = id.replace('player',''); var self = this; var msg = ''; if(id==this.player){ msg = "恭喜你,你支持的選手獲得勝利/n/n"; }else{ msg = "很遺憾,你支持的選手沒有獲得勝利,獲勝的是" + id + "號選/n/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.getElementsByTagNamefunction $_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遊戲設計有一定的借鑒價值。