บทความนี้อธิบายถึงซอร์สโค้ดที่ทำงานอย่างรวดเร็วของ JS Mini Games และแบ่งปันกับคุณสำหรับการอ้างอิงของคุณ รายละเอียดมีดังนี้:
หลังจากเกมทำงานแล้วตัวเลขดังต่อไปนี้จะปรากฏขึ้น:
ส่วนหนึ่งของรหัส JavaScript มีดังนี้:
/** ความเร็วรัน* ผู้แต่ง: fdipzone* วันที่: 2012-07-15* ver: 1.0*/var gameimg = ['images/start.png', 'images/start_over.png', 'images/go_over.png', 'ภาพ', ภาพ ' '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]; // พารามิเตอร์ความยากนี้ playerList = null; // รายการผู้เล่น this.player = 0; // ผู้เล่นที่เลือก this.level = 2; // ความยากลำบาก this.lock = 0; // ล็อค this.isstart = 0; // ว่าจะเริ่มสิ่งนี้. isover = 0; // ว่าจะสิ้นสุด} // initspeedclass.prototype.init = function () {this.reset (); this.create_player (); this.create_event ();} // resetSpeedclass.prototype.reset = function () {this.player = 0; this.level = $ ('ระดับ') ค่า; // ระดับ this.playerList = $ _tag ('li', 'playerList'); สำหรับ (var i = 0; i <this.playerlist.length; i ++) {this.playerlist [i] .className = ''; } disp ('start_btn', 'show', 'start_btn'); disp ('go_btn', 'ซ่อน', 'go_btn'); this.lock = 0; // ปลดล็อก this.isstart = 0; // unstart this.isover = 0; // unover} // สร้าง playerpeedclass.prototype.create_player = function () {var runway = []; var playerList = []; สำหรับ (var i = 1; i <= 8; i ++) {รันเวย์ [i] = '<li> <div id = "ผู้เล่น' + (9-i) + '"> </div> </li>'; PlayerList [i] = '<li>' + i + '</li>'; } $ ('รันเวย์'). innerhtml = runway.join (''); $ ('PlayerList'). innerhtml = playerlist.oin (''); รันเวย์ = null; playerList = null;} // สร้าง eventsPeedClass.prototype.create_event = function () {var self = this; this.playerList = $ _tag ('li', 'playerList'); สำหรับ (var i = 0; i <this.playerlist.length; i ++) {this.playerlist [i] .onmouseover = function () {ถ้า (this.className! = 'on') {this.className = 'over'; }} this.playerList [i] .onMouseOut = function () {ถ้า (this.className! = 'on') {this.className = ''; }} this.playerList [i] .onclick = ฟังก์ชั่น (o, c) {return function () {ถ้า (self.lock == 0) {o.playerList [c] .className = 'on'; if (o.player! = 0 && o.player! = c+1) {// ไม่เท่ากับ 0 และไม่เท่ากับตัวคุณเอง o.playerlist [o.player-1] .className = ''; } o.player = c + 1; }}}} (ตัวเอง, i); } $ ('start_btn'). onMouseOver = function () {this.className = 'start_over_btn'; } $ ('start_btn'). onMouseOut = function () {this.className = 'start_btn'; } $ ('start_btn'). onclick = function () {ถ้า (self.player == 0) {return alert ('โปรดเลือกผู้เล่นที่คุณต้องการสนับสนุน'); } else {self.lock = 1; // ล็อค disp ('start_btn', 'ซ่อน'); disp ('go_btn', 'show'); สำหรับ (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 = 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 (ขั้นตอน <4) {// ขั้นตอนที่ 1-3 พร้อม o.className = 'run_status' + step;} อื่น {// run ถ้า (o.className! = 'running') ได้มาถึงเส้นชัยถ้า (self.isover == 1) {clearinterval (et);} else {ถ้า (self.player! = c) {// ผู้เล่นคนอื่น ๆ ออกแรง = math.floor (math.random () Math.floor (Math.random ()*8) +4 +exert +'px'; gospeedclass.prototype.go = function () {ถ้า (this.isstart == 1 && this.isover == 0) {var o = $ ('ผู้เล่น' + 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 ('ผู้เล่น', ''); var self = this; var msg = ''; if (id == this.player) {msg = "ขอแสดงความยินดีผู้เล่นที่คุณสนับสนุน won/n/n"; } else {msg = "น่าเศร้าผู้เล่นที่คุณสนับสนุนไม่ชนะผู้ที่ชนะคือ" + id + "เลือก/n/n"; } if (ยืนยัน (msg + 'มันเริ่มต้นอีกครั้งหรือไม่') == true) {settimeout (function () {self.init ();}, 1000); } else {return false; }}/** ฟังก์ชั่นทั่วไป*/// รับ document.getElementBy (id) ฟังก์ชั่น $ (id) {this.id = id; ส่งคืน document.getElementById (id);} // get document.getElementByTagnameFunction $ _tag (ชื่อ, id) {ถ้า (typeof (id)! = 'undefined') {return $ (id) .getElementSByTagname (ชื่อ); } else {return document.getElementByTagname (ชื่อ); }}/* div show และซ่อน* @param id dom id* @param handle handle แสดงหรือซ่อน* @param classname*/function disp (id, handle, classname) {if (handle == 'show') {$ (id) .style.display = 'block'; } else {$ (id) .style.display = 'ไม่มี'; } if (typeof (className)! = 'undefined') {$ (id) .className = className; }}/* img preload* @param img อาร์เรย์รูปภาพที่จะโหลด* @param วิธีการโทรกลับหลังจากที่ภาพถูกโหลดสำเร็จ*/ฟังก์ชั่น img_preload (img, callback) {var onload_img = 0; var tmp_img = []; สำหรับ (var i = 0, imgnum = img.length; i <imgnum; i ++) {tmp_img [i] = ภาพใหม่ (); 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 () {ถ้า (onload_img == img.length) {// ตัวจับเวลา, โทรกลับ clearinterval (et); callback ();}}, 200);};คลิกที่นี่เพื่อดาวน์โหลดรหัสตัวอย่างที่สมบูรณ์
ฉันเชื่อว่าบทความนี้มีค่าอ้างอิงที่แน่นอนสำหรับการออกแบบเกม JavaScript ของทุกคน