Cet article décrit le code source en cours d'exécution rapide de JS Mini Games et est partagé avec vous pour votre référence. Les détails sont les suivants:
Une fois le jeu exécuté, le chiffre suivant est illustré:
Une partie du code JavaScript est la suivante:
/ ** Speed Run * Auteur: 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., images / run_start1.gif 'images / run_start3.gif']; var speed_obj = new SpeedClass (); window.onload = function () {var callback = function () {Speed_Obj.init (); } img_preload (gameImg, rappel);} // Speed classFunction SpeedClass () {this.levelset = [8,5,8,12]; // Paramètre de difficulté this.playerList = null; // Liste des joueurs this.player = 0; // le joueur sélectionné this.level = 2; // difficulté this.lock = 0; // verrouiller this.isstart = 0; // s'il faut démarrer ce.isover = 0; // si fin} // initspeedclass.prototype.init = function () {this.reset (); this.create_player (); this.create_event ();} // resetpeedclass.prototype.reset = function () {this.player = 0; this.level = $ ('niveau'). valeur; // Nivet 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; // déverrouiller ce.isstart = 0; // Débranchez ce.isover = 0; // Unover} // Créer des lecteursPeedClass.prototype.create_player = function () {var runway = []; var playerList = []; pour (var i = 1; i <= 8; i ++) {Runway [i] = '<li> <div id = "lecteur' + (9-i) + '"> </div> </li>'; PlayerList [i] = '<li>' + i + '</li>'; } $ ('Runway'). innerHtml = runway.join (''); $ ('playerlist'). innerhtml = playerlist.join (''); Piste = null; playerList = null;} // créer 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) {// Pas égal à 0 et pas égal à vous-même 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 ('Veuillez sélectionner le lecteur que vous souhaitez soutenir'); } else {self.lock = 1; // Disp («start_btn», «masquer»); disp ('go_btn', 'show'); pour (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 (); }} // Démarrer GamespeedClass.prototype.start = fonction (c) {var o = $ ('player' + c); var étape = 1; var self = this; var exert = 0; o.style.marginleft = '62px'; // init var et = setInterval (function () {if (Step <4) {// Step 1-3 est prêt o.classname = 'run_status' + étape;} else {// run if (o.classname! = 'running') {o.classname = 'running';} // start Can if (self.isstart == 0) {self.isstart = 1; a atteint la ligne d'arrivée if (self.isover == 1) {ClearInterval (et);} else {if (self.player! = c) {// autres joueurs exert = math.floor (math.random () * self.levelset [self.level]) + 3; Math.Floor (Math.Random () * 8) +4 + Exert + 'PX'; = 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;} // gameoverspeedclass.prototype.gameOver = function (id) {id = id.replace ('player', ''); var self = this; var msg = ''; if (id == this.player) {msg = "Félicitations, les joueurs que vous soutenez ont gagné / n / n"; } else {msg = "Malheureusement, les joueurs que vous soutenez n'ont pas gagné, celui qui a gagné était" + id + "select / n / n"; } if (confirm (msg + 'fait-il recommence? } else {return false; }} / ** Fonction commune * /// get document.getElementBy (id) Fonction $ (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 (name); }} / * div show and masquer * @param id dom id * @param manche afficher ou masquer * @param classname * / function disp (id, handle, className) {if (handle == 'show') {$ (id) .style.display = 'block'; } else {$ (id) .style.display = 'Aucun'; } if (typeof (className)! = 'undefined') {$ (id) .classname = className; }} / * img Preload * @param img Le tableau d'image à charger * @param de la méthode de rappel après le chargement de l'image * / fonction 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) {// Timer, appel d'appel clearInterval (et); callback ();}}, 200);}Cliquez ici pour télécharger l'exemple complet du code.
Je crois que cet article a une certaine valeur de référence pour la conception de jeux JavaScript de chacun.