Este artículo describe el código fuente de FAST Running of JS Mini Games, y se comparte con usted para su referencia. Los detalles son los siguientes:
Después de que se ejecuta el juego, se muestra la siguiente figura:
Parte del código JavaScript es la siguiente:
/** Run Speed Run* Autor: Fdipzone* Fecha: 2012-07-15* ver: 1.0*/var gameImg = ['Images/start.png', 'Images/start_over.png', 'Images/go_over.png', 'Images/go_over.png', 'Images/running.gif', 'Images/run_start1.gif', 'Images/sun '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]; // Parámetro de dificultad this.playerList = null; // Lista de jugadores this.player = 0; // jugador seleccionado this.level = 2; // dificultad this.lock = 0; // bloquear this.isstart = 0; // si comenzar esto.islover = 0; // si finaliza} // initspeedclass.prototype.init = function () {this.reset (); this.create_player (); this.create_event ();} // reetspeedclass.prototype.reset = function () {this.player = 0; this.level = $ ('nivel'). valor; // nivelan this.playerList = $ _tag ('li', 'jugadorlist'); for (var i = 0; i <this.playerList.length; i ++) {this.playerList [i] .classname = ''; } disp ('start_btn', 'show', 'start_btn'); disp ('go_btn', 'escondite', 'go_btn'); this.lock = 0; // desbloquear this.isstart = 0; // Untar esto.isrover = 0; // unver} // crea jugadorespeedclass.prototype.create_player = function () {var runway = []; var PlayerList = []; for (var i = 1; i <= 8; i ++) {pista [i] = '<li> <div id = "jugador' + (9-i) + '"> </div> </li>'; PlayerList [i] = '<li>' + i + '</li>'; } $ ('Runway'). InnerHtml = Runway.Join (''); $ ('PlayerList'). Innerhtml = PlayerList.Join (''); pista = nulo; PlayerList = null;} // crea 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) {// no es igual a 0 y no es igual a usted 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 ('Seleccione el reproductor que desea admitir'); } else {self.lock = 1; // bloqueado disp ('start_btn', 'escondite'); disp ('go_btn', 'show'); para (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 (); }} // Inicie juegosPeedClass.prototype.start = function (c) {var o = $ ('jugador' + c); paso var = 1; var self = this; var ejercer = 0; o.style.marginleft = '62px'; // init var et = setInterval (function () {if (step <4) {// step 1-3 está listo o.classname = 'run_status' + step;} else {// run if (o.classname! = 'ejecutar') {o.classnname ha alcanzado la línea de meta if (self.isever == 1) {clearInterval (et); Math.floor (Math.random ()*8) +4 +Ejecutar +'Px'; function () {if (this.isstart == 1 && this.islover == 0) {var o = $ ('jugador' + this.player); var ejercer = math.floor (math.random ()*3) +2; // 2-5 o.style.Marginleft = parseint (o.style.marginleft) + ejercer + 'px'; } return false;} // gameoverspeedclass.prototype.gameover = function (id) {id = id.replace ('Player', ''); var self = this; var msg = ''; if (id == this.player) {msg = "Felicitaciones, los jugadores que apoyas ganó/n/n"; } else {msg = "lamentablemente, los jugadores que apoyas no ganaron, el que ganó fue" + id + "seleccionar/n/n"; } if (confirmar (msg + '¿comienza de nuevo?') == true) {setTimeOut (function () {self.init ();}, 1000); } else {return false; }}/** función común*/// get document.getElementBy (id) función $ (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 (nombre); }}/* Div Show and Hide* @param id DOM id* @param show u ocultar* @param classname*/function disp (id, manejo, classname) {if (manejo == 'show') {$ (id) .style.display = 'block'; } else {$ (id) .style.display = 'none'; } if (typeof (classname)! = 'Undefined') {$ (id) .className = classname; }}/* img preload* @param img la matriz de imágenes que se cargará* @param Método de devolución de llamada después de que la imagen se cargue correctamente*/function img_preload (img, llamado) {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) {// timer, callback ClearInterval (et); callback ();}}, 200);}Haga clic aquí para descargar el código de ejemplo completo.
Creo que este artículo tiene cierto valor de referencia para el diseño del juego JavaScript de todos.