JS Small Game Extreme Speed Run code detailed _javascript tips

This example describes the JS small game speed running the source code, to share for everyone reference. Specifically as follows:

After the game is running, the following figure shows:

The JavaScript section code is as follows:

/** Speed Run * 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];//difficulty parameter this.playerlist = NULL;//Player list This.playe  R = 0;  The selected contestant This.level = 2;  Difficulty This.lock = 0;  Lock This.isstart = 0;  Whether to start This.isover = 0;
 Whether end}//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 "&GT;&LT;/DIV&GT;&L
 T;/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) {//Not equal to 0 and not equal to its own 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 (' Please select the contestant to Support ');
  }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 be 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;
  //A contestant has reached the endpoint if (self.isover==1) {clearinterval (ET);
  }else{if (self.player!=c) {//other contestant exert = Math.floor (Math.random () * self.levelset[self.level]) +3;
  O.style.marginleft = parseint (o.style.marginleft) + Math.floor (Math.random () *8) +4 + exert + ' px ';
   Reach Endpoint if (parseint (o.style.marginleft) >=745) {clearinterval (ET);
   Self.isover = 1;
  Self.gameover (o.id);
 }} step + +;  }, All)}//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 = "Congratulations, you support the contestant to win the Victory \ n";
 }else{msg = "Unfortunately, you support the player did not win, the winner is" + ID + "SELECT \ n"; If confirm (msg + ' start again? ')
 ==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). GETELEMENTSB
 Ytagname (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 to load an array of images * @param callback picture loaded intoAfter-Work callback method * * Function Img_preload (IMG, callback) {var onload_img = 0;
 var tmp_img = [];
 for (var i=0,imgnum=img.length i 

Full instance code click here to download the site.

It is believed that this article has certain reference value to everybody's JavaScript game design.