تصف هذه المقالة رمز المصدر السريع للألعاب المصدر JS ، ويتم مشاركته معك للرجوع إليه. التفاصيل كما يلي:
بعد تشغيل اللعبة ، يتم عرض الشكل التالي:
جزء من رمز JavaScript هو كما يلي:
/** تشغيل السرعة* المؤلف: fdipzone* التاريخ: 2012-07-15* ver: 1.0*/var gameimg = ['Images/start.png' ، 'picture/start_over.png' ، 'images/go_over.png' ، 'images/go_over.png' ، 'images/running. "الصور/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] ؛ // معلمة صعوبة this.playerList = null ؛ // player list this.player = 0 ؛ // تم اختيار لاعب this.level = 2 ؛ // صعوبة this.lock = 0 ؛ // lock 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 = $ ('المستوى'). القيمة ؛ // Level this.playerList = $ _tag ('li' ، 'playerlist') ؛ لـ (var i = 0 ؛ i <this.playerList.length ؛ i ++) {this.playerList [i] .className = '' ؛ } disp ('start_btn' ، 'show' ، 'start_btn') ؛ DIP ('go_btn' ، 'Hide' ، 'Go_btn') ؛ this.lock = 0 ؛ // فتح this.isStart = 0 ؛ // un start this.isover = 0 ؛ // inover} // إنشاء playerspeedclass.prototype.create_player = function () {var runway = [] ؛ var playerlist = [] ؛ لـ (var i = 1 ؛ i <= 8 ؛ i ++) {runway [i] = '<li> <div id = "player' + (9-i) + '"> </viv> </li>' ؛ PlayerList [i] = '<li>' + i + '</li>' ؛ } $ ('runway'). innerhtml = runway.join ('') ؛ $ ('playerlist'). innerhtml = playerlist.join ('') ؛ مدرج = فارغ ؛ 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 () {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) {// لا يساوي 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 () {if (self.player == 0) {return Alert ('يرجى تحديد المشغل الذي تريد دعمه ") ؛ } آخر {self.lock = 1 ؛ // locked disp ('start_btn' ، 'Hide') ؛ DIP ('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 () ؛ }} // START 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 ؛} else {// run (o.ClassName! = 'running') {o.classname = 'running' ؛ لقد وصلت إلى خط النهاية إذا (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 ؛} // gameoverpeedclass.prototype.gameover = function (id) {id = id.replace ('player' ، '') ؛ var self = this ؛ var msg = '' ؛ if (id == this.player) {msg = "تهانينا ، اللاعبين الذين تدعمهم Won/n/n" ؛ } آخر {msg = "للأسف ، لم يفز اللاعبون الذين تدعمهم ، وكان الشخص الذي فاز هو" + ID + "SELECT/N/N" ؛ } if (تأكيد (msg + 'هل يبدأ مرة أخرى؟') == true) {setTimeOut (function () {self.init () ؛} ، 1000) ؛ } آخر {return false ؛ }}/** وظيفة شائعة*/// get document.getElementBy (id) function $ (id) {this.id = id ؛ return document.getElementById (id) ؛} // get document.getElementsByTagNameFunction $ _tag (name ، id) {if (typeof (id)! = 'undefined') {return $ (id) .getElementSbyTagName (name) ؛ } آخر {return document.getElementSbyTagName (name) ؛ }}/* div show and hide* @param id dom id* param handle show or hide* param className*/function dip (id ، handle ، className) {if (handle == 'show') {$ (id) .style.display = 'block' ؛ } آخر {$ (id) .style.display = 'none' ؛ } 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] = new Image () ؛ tmp_img [i] .src = img [i] ؛ if (tmp_img [i] .complete) {onload_img ++ ؛ } آخر {tmp_img [i] .onload = function () {onload_img ++ ؛ }}}} var et = setInterval (function () {if (onload_img == img.length) {// timer ، call callback clearinterval (et) ؛ callback () ؛}} ، 200) ؛}انقر هنا لتنزيل رمز المثال الكامل.
أعتقد أن هذه المقالة لها قيمة مرجعية معينة لتصميم لعبة JavaScript للجميع.