Penjelasan terperinci tentang kod sumber kemahiran permainan mini JS Speed ​​Run_javascript

Contoh dalam artikel ini menerangkan kod sumber permainan mini JS berjalan pantas dan dikongsi dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:

Selepas permainan berjalan, ia adalah seperti yang ditunjukkan di bawah:

Bahagian Javascript kod adalah seperti berikut:

/** 极速快跑
* 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 = "恭喜你,你支持的选手获得胜利\n\n";
 }else{
 msg = "很遗憾,你支持的选手没有获得胜利,获胜的是" + id + "号选
\n";
 }
 if(confirm(msg + '是否重新开始&#63;')==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);
}

Klik di sini untuk kod contoh lengkapMuat turun dari tapak ini.

Saya percaya bahawa perkara yang diterangkan dalam artikel ini mempunyai nilai rujukan tertentu untuk reka bentuk permainan JavaScript semua orang.