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

前端技术 2023/08/08 JavaScript

本文实例讲述了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 = \"恭喜你,你支持的选手获得胜利\\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.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游戏设计有一定的借鉴价值。

本文地址:https://www.stayed.cn/item/500

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见,何事秋风悲画扇。