Dieser Artikel beschreibt den schnell laufenden Quellcode von JS Mini Games und wird für Ihre Referenz mit Ihnen geteilt. Die Details sind wie folgt:
Nachdem das Spiel ausgeführt wurde, ist die folgende Abbildung dargestellt:
Ein Teil des JavaScript -Codes ist wie folgt:
/** 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', 'Images/run_start3.gif']; var speced_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]; // Schwierigkeitsgrad Parameter this.playerList = null; // Playerliste this.player = 0; // Ausgewählter Spieler this.level = 2; // Schwierigkeitsgrad this.lock = 0; // lock this.isstart = 0; //, ob dies starten soll.isover = 0; //, ob} // InitSpeedClass.Prototype.init = function () {this.reset (); this.create_player (); this.create_event ();} // resetSpeedClass.Prototype.reset = function () {this.player = 0; this.level = $ ('Level'). Wert; // Level this.playerList = $ _tag ('li', 'PlayerList'); für (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; // this.isstart = 0 entsperren; // this.isover = 0; // unover} // PlayerSpeedClass.Prototype.Create_player = function () {var runway = []; var PlayerList = []; für (var i = 1; i <= 8; i ++) {Runway [i] = '<li> <div id = "Player' + (9-i) + '"> </div> </li>'; PlayerList [i] = '<li>' + i + '</li>'; } $ ('Runway'). Innerhtml = runway.join (''); $ ('PlayerList'). Innerhtml = PlayerList.join (''); Landebahn = NULL; PlayerList = null;} // EreignisspeedClass.Prototype.create_event = function () {var self = this; this.playerList = $ _tag ('li', 'PlayerList'); für (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! } 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 alarm ('Bitte wählen Sie den Spieler aus, den Sie unterstützen möchten.'); } else {self.lock = 1; // gesperrte disp ('start_btn', 'hide'); disp ('go_btn', 'show'); für (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 (); }} // GameSpeedClass.Prototype.start = Funktion (c) {var o = $ ('Player' + c); var Schritt = 1; var self = this; var exert = 0; O.Style.Marginleft = '62px'; // init var et = setInterval (function () {if (Schritt <4) {// Schritt 1-3 ist bereit o.classname = 'run_status' + step;} else {// run if (o.classname! = 'running') {o.classname = 'running'; hat die Ziellinie erreicht, wenn (self.isover == 1) {ClearInterval (et); Math.floor (math.random ()*8) +4 +'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 = "Herzlichen Glückwunsch, die Spieler, die Sie unterstützen, Won/n/n"; } else {msg = "Leider haben die Spieler, die Sie unterstützen, nicht gewonnen, derjenige, der gewonnen hat, war" + id + "select/n/n"; } if (bestätigen (msg + 'startet es erneut?') == true) {setTimeout (function () {self.init ();}, 1000); } else {return false; }}/** Gemeinsame Funktion*/// document.getElementBy (id) Funktion $ (id) {this.id = id; return document.getElementById (id);} // document.getElementsByTagNameFunction $ _tag (Name, id) {if (typeof (id)! } else {return document.getElementsByTagName (Name); }}/* div Show und Hide* @param id dom id* @param handle show oder 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 Das zu geladene Bildarray* @param Callback -Methode, nachdem das Bild erfolgreich geladen wurde var tmp_img = []; für (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, rufen Sie Callback ClearInterval (et); callback ();}}, 200);};};} auf.Klicken Sie hier, um den vollständigen Beispielcode herunterzuladen.
Ich glaube, dieser Artikel hat einen gewissen Referenzwert für das JavaScript -Spieledesign aller.