تصف هذه المقالة الكود المصدري للشطرنج الداكن في ألعاب JS Mini ، ويتم مشاركتها معك للرجوع إليها. التفاصيل كما يلي:
بعد تشغيل اللعبة ، يتم عرض الشكل التالي:
قسم JavaScript:
/ ** الشطرنج الصيني * المؤلف: fdipzone * التاريخ: 2012-06-24 * ver: 1.0 */ var gameimg = ['Images/a1.gif' ، 'Images/a2.gif' ، 'Images/a3.gif' ، 'Images/a4.gif' ، 'Images/a5.gif' ، 'Images/a6.gif' ، 'Images/a7.gif' ، 'Images/b1.gif' ، 'Images/b2.g إذا كانت "،" الصور/b3.gif "،" الصور/b4.gif "،" الصور/b5.gif "،" الصور/b6.gif "،" الصور/b7.gif "،" الصور/bg.gif "،" الصور/bg_over.gif "،" الصور/bg_sel.gif "] ؛ var chess_obj = new Chessclass () ؛ window.onload = function () {$ ('init_btn'). onClick = function () {chess_obj.init () ؛ } var callback = function () {chess_obj.init () ؛ } img_preload (gameimg ، callback) ؛ } // شطرنج فئة الشطرنج chessclass () {this.chess = [] ؛ this.boardrows = 4 ؛ this.boardcols = 8 ؛ this.area = 82 ؛ this.player = 1 ؛ // 1: Red 2: Green this.selected = null ؛ // شطرنج محدد this.chestype = ['' ، 'a' ، 'b'] ؛ this.isover = 0 ؛ } // init chessclass.prototype.init = function () {this.reset_grade () ؛ this.create_board () ؛ this.create_chess () ؛ this.create_event () ؛ this.player = 1 ؛ this.selected = null ؛ this.isover = 0 ؛ DIP ('init_div' ، 'Hide') ؛ } // إنشاء لوحة الشطرنج. لـ (var i = 0 ؛ i <this.boardrows ؛ i ++) {for (var j = 0 ؛ j <this.boardcols ؛ j ++) {board = board + '<div id = "' + i + '_' + j + '"> <img src = "images/chessbg.gif"/> </div> ؛ }} $ ('board'). innerhtml = board ؛ $ ('board'). style.width = this.boardcols * (this.area + 2) + 'px' ؛ $ ('board'). style.height = this.boardrows * (this.area + 2) + 'px' ؛ } // إنشاء chessclass.prototype.create.create_chess = function ['a1' ، 'b7' ، 'a2' ، 'b7' ، 'a2' ، 'b7' ، 'a3' ، 'b7' ، 'a3' ، 'b7' ، 'a4' ، 'b6' ، 'a4' ، b6 '،' A5 ، "A5" ، "B5" ، "A6" ، "B4" ، "A6" ، "B4" ، "A7" ، "B3" ، "A7" ، "B3" ، "A7" ، "B2" ، "A7" ، B2 "،" A7 "،" B1 "] ؛ this.chess = [] ؛ بينما (الشطرنج. var tmpChess = Chesses.Splice (rnd ، 1) .ToString () ؛ this.chess.push ({'Chess': tmpChess ، 'type': tmpChess.Substr (0 ، 1) ، 'val': tmpchess.substr (1،1) ، 'status': 0}) ؛ }} // إنشاء حدث chessclass.prototype.create_event = function () {var self = this ؛ var chess_area = $ _tag ('div' ، 'board') ؛ لـ (var i = 0 ؛ i <chess_area.length ؛ i ++) {chess_area [i] .onmouseover = function () {// mouseover if (this.className! = 'onsel') {this.className = 'on' ؛ }} chess_area [i] .onmouseout = function () {// mouseout if (this.className! = 'onsel') {this.className = '' ؛ }} chess_area [i] .onclick = function () {// onclick self.action (this) ؛ }}} // معرف تغيير الفهرس chessclass.prototype.getIndex = function (id) {var tid = id.split ('_') ؛ إرجاع parseint (tid [0])*this.boardcols + parseint (tid [1]) ؛ } // index Change id chessclass.prototype.getId = function (index) {return parseint (index/this.boardcols) + '_' + parseint (index ٪ this.boardcols) ؛ } // الإجراء chessclass.prototype.action = function (o) {if (this.isover == 1) {// game over return false ؛ } var index = this.getIndex (o.id) ؛ if (this.selected == null) {// piece chess غير محددة إذا (this.chess [index] ['status'] == 0) {// لم تفتح this.show (index) ؛ } آخر إذا (this.chess [index] ['status'] == 1) {// فتح if (this.chess [index] ['type'] == this.chestype [this.player]) {this.select (index) ؛ }}} else {// قطعة شطرنج محددة إذا (index! = this.selected ['index']) {// تم تحديدها في نفس الموضع إذا (this.chess [index] ['status'] == 0) {// unopened chess piece this.show (index) ؛ } آخر إذا (this.chess [index] ['status'] == -1) {// plank position this.move (index) ؛ } آخر {// قطع الشطرنج الأخرى إذا (this.chess [index] ['type'] == this.chestype [this.player]) {this.select (index) ؛ } آخر {this.kill (index) ؛ }}}}}} // show chessclass.prototype هذا. // فتح if (this.selected! = null) {// clear $ (this.getId (this.selected.index)). className = '' ؛ this.selected = null ؛ } this.change_player () ؛ this.gameover () ؛ } // SELECT chess chessclass.prototype.select = function (index) {if (this.selected! = null) {$ (this.getID (this.selected ['index'])). className = '' ؛ } this.selected = {'index': index ، 'chess': this.chess [index]} ؛ $ (this.getId (index)). className = 'onsel' ؛ }. "الحالة": this.exted ['chess'] ['status']} ؛ this.remove (this.selected ['index']) ؛ this.show (index) ؛ }} // Kill chessclass.prototype 'val': this.sexted ['chess'] ['val'] ، 'status': this.sexted ['chess'] ['status']} ؛ this.remove (this.selected ['index']) ؛ var arched = this.player == 1؟ 2: 1 ؛ $ ('dene_num' + arched) .innerhtml = parseint ($ ('day_num' + arched) .innerhtml) -1 ؛ this.show (index) ؛ }} // إزالة الشطرنج الشطرنج // فارغ $ (this.getId (index)). innerhtml = '' '؛ $ (this.getID (index)). className = '' ؛ } / * تحقق بجانب * param index index index * @param selindex يمكن أن يكون فهرس قطعة الشطرنج غير فارغ. إذا كانت فارغة ، تتم قراءة قطعة الشطرنج المحددة */ chessclass.prototype.beside = function (index ، selindex) {if (typeof (selindex) == 'undefined') {if (this.selected! = null) {selindex = this.selected ['index'] ؛ } آخر {return false ؛ }} if (typeof (this.chess [index]) == 'undefined') {return false ؛ } var from_info = this.getId (selindex) .split ('_') ؛ var to_info = this.getId (index) .split ('_') ؛ var fw = parseint (from_info [0]) ؛ var fc = parseint (from_info [1]) ؛ var tw = parseint (to_info [0]) ؛ var tc = parseint (to_info [1]) ؛ if (fw == tw && math.abs (fc-tc) == 1 || fc == tc && math.abs (fw-tw) == 1) {// row أو colunm هو نفسه والفاصل الزمني = 1 return true ؛ } آخر {return false ؛ }} / * تحقق من القتل * @param فهرس فهرس قطعة الشطرنج التي تم تدميرها * param selindex. if (this.selected! = null) {// هناك قطعة شطرنج محددة selindex = this.selected ['index'] ؛ } آخر {return false ؛ }} if (this.chess [index] ['type']! = this.chestype [this.player]) {if (parseint (this.chess [selindex] ['val']) == 7 && parseint (this.chess [index] ['val']) == 1) } آخر إذا (parseint (this.chess [selindex] ['val']) == 1 && parseint (this.chess [index] ['val']) == 7) {// 1 لا يمكن قتل 7 إرجاع خطأ ؛ } آخر إذا (parseint (this.Chess [selindex] ['val']) <= parseint (this.chess [index] ['val'])) {// kill small rever return true ؛ }} إرجاع خطأ ؛ } // تغيير player chessclass.prototype.change_player = function () {if (this.player == 1) {this.player = 2 ؛ // إلى green $ ('dene_img2'). className = 'img_on' ؛ $ ('dene_img1'). className = 'img' ؛ } آخر {this.player = 1 ؛ // إلى $ $ ('day_img1'). className = 'img_on' ؛ $ ('dene_img2'). className = 'img' ؛ }} // إعادة تعيين درجة الشطرنج $ ('dene_img2'). className = 'img' ؛ $ ('dene_num1'). innerhtml = $ ('dene_num2'). innerhtml = 16 ؛ $ ('dene_res1'). className = $ ('dene_res2'). className = 'none' ؛ $ ('dene_res1'). innerhtml = $ ('resident_res2'). innerhtml = '' ؛ } // game over chessclass.prototype.gameover = function () {if ($ ('dene_num1'). innerhtml == 0 || $ ('dene_num2'). innerhtml == 0) {// أي قطعة شطرنج هي 0 this.isover = 1 ؛ this.show_grade () ؛ DIP ('init_div' ، 'show') ؛ } آخر {if (this.can_action () == false) {this.isover = 1 ؛ this.show_grade () ؛ DIP ('init_div' ، 'show') ؛ }}} // show chessclass.prototype var num2 = parseint ($ ('dene_num2'). innerhtml) ؛ if (num1> num2) {// Red Square win $ ('dene_res2'). innerhtml = 'loss' ؛ $ ('dene_res2'). className = 'Loss' ؛ $ ('dene_res1'). innerhtml = 'win' ؛ $ ('dene_res1'). className = 'win' ؛ } آخر إذا (num1 <num2) {// black square win $ ('dene_res1'). innerhtml = 'loss' ؛ $ ('dene_res1'). className = 'Loss' ؛ $ ('dene_res2'). innerhtml = 'win' ؛ $ ('dene_res2'). className = 'win' ؛ } else {// draw $ ('dene_res1'). innerhtml = $ ('dene_res2'). innerhtml = 'draw' ؛ $ ('dene_res1'). className = $ ('dene_res2'). className = 'draw' ؛ }} // تحقق من الشطرنج يمكن عمل الشطرنج. لـ (var i = 0 ، max = chess.length ؛ i <max ؛ i ++) {if (chess [i] .status == 0) {// هناك قطعة شطرنج غير مفتوحة ؛ } else {if (chess [i] .status == 1 && chess [i] .type == this.chestype [this.player]) {// chess piece التي فتحتها إذا (this.beside (i-this.boardcols ، i) && (chess [i-this.boardcols] this.can_kill (i-this.boardcols ، i))) {// return true ؛ } if (this.beside (i+this.boardcols ، i) && (chess [i+this.boardcols] .status ==-1 || this.can_kill (i+this.boardcols ، i))) {// return true ؛ } if (this.beside (i+this.boardcols ، i) && (chess [i+this.boardcols] .status ==-1 || this.can_kill (i+this.boardcols ، i))) {// return true ؛ } if (this.beside (i-1 ، i) && (chess [i-1] .status ==-1 || this.can_kill (i-1 ، i))) {// return true ؛ } if (this.beside (i+1 ، i) && (chess [i+1] .status ==-1 || this.can_kill (i+1 ، i))) {// right return ؛ }}}} إرجاع false ؛ } / ** وظيفة شائعة* / / / get document.getElementBy (id) وظيفة $ (id) {this.id = id ؛ return document.getElementById (id) ؛ } // get document.getElementsByTagName function $ _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 أو hide * / function dip (id ، handle) {if (handle == 'show') {$ (id) .style.display = 'block' ؛ } آخر {$ (id) .style.display = 'none' ؛ }} /* 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.