Este artigo descreve o código -fonte rápido de JS Mini Games e é compartilhado com você para sua referência. Os detalhes são os seguintes:
Depois que o jogo é executado, a figura a seguir é mostrada:
Parte do código JavaScript é o seguinte:
/** Speed Run* Author: fdipzone* Date: 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/run_start2.gif', 'imagens/run_start3.gif']; var speed_obj = new speedClass (); window.onload = function () {var den -retorno = function () {speed_obj.init (); } img_preload (gameImg, retorno de chamada);} // classfunction speedclassClassClass () {this.levelset = [8,5,8,12]; // parâmetro de dificuldade this.playerlist = null; // Lista de players this.player = 0; // jogador selecionado this.level = 2; // dificuldade this.lock = 0; // bloqueie this.isstart = 0; // se deve iniciar isso.isover = 0; // se deve end} // initspeedClass.prototype.init = function () {this.reset (); this.create_player (); this.Create_Event ();} // RESESTPEEDCLASS.Prototype.Reset = function () {this.Player = 0; this.level = $ ('nível'). // nive 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; // desbloquear this.isstart = 0; // Deset this.ISover = 0; // unever} // crie playerspeedclass.prototype.create_player = function () {var runway = []; var playerlist = []; para (var i = 1; i <= 8; i ++) {pista [i] = '<li> <div id = "player' + (9-i) + '"> </div> </li>'; playerlist [i] = '<li>' + i + '</li>'; } $ ('pista'). innerhtml = runway.join (''); $ ('playerlist'). innerhtml = playerlist.join (''); pista = nulo; playerlist = null;} // crie 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) {// não é igual a 0 e não é igual a si mesmo 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 ('Selecione o jogador que deseja suportar'); } else {self.lock = 1; // 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 (); }} // Inicie o gamespeedClass.prototype.start = function (c) {var o = $ ('player' + c); var stage = 1; var self = this; var manipem = 0; o.style.marginleft = '62px'; // init var et = setInterval (function () {if (etapa <4) {// etapa 1-3 está pronto o.className = 'run_status' + step;} else {// run if (o.className! alcançou a linha de chegada se (self.isover == 1) {ClearInterval (et); Math.Floor (Math.Random ()*8) +4 +Exerção +'PX'; function () {if (this.isstart == 1 && this.isover == 0) {var o = $ ('player' + this.Player); var manife = 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 = "Parabéns, os jogadores que você apóia won/n/n"; } else {msg = "Infelizmente, os jogadores que você apoia não venceu, aquele que ganhou foi" + id + "select/n/n"; } if (confirm (msg + 'ele começa novamente?') == true) {setTimeout (function () {self.init ();}, 1000); } else {return false; }}/** função comum*/// get document.getElementby (id) função $ (id) {this.id = id; retornar document.getElementById (id);} // get document.getElementsByTagNameFunction $ _TAG (nome, id) {if (typeof (id)! } else {return document.getElementsByTagName (nome); }}/* div show e ocultar* @param ID DOM id* @param Handle Show ou ocultar* @param className*/function disp (id, handle, className) {if (handle == 'show') {$ (id) .style.display = 'block'; } else {$ (id) .style.display = 'nenhum'; } if (typeof (className)! = 'indefinido') {$ (id) .className = ClassName; }}/* IMG Preload* @param img a matriz de imagem a ser carregada* @param Método de retorno de retorno após a imagem ser carregada com sucesso*/função img_preload (img, retorno de chamada) {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, ligue para o retorno de chamada clearInterval (et); retorno de chamada ();}}, 200);}Clique aqui para baixar o código de exemplo completo.
Acredito que este artigo tenha um certo valor de referência para o design de jogos JavaScript de todos.