บทความนี้อธิบายถึงซอร์สโค้ดของหมากรุกหมากรุกหมากรุกใน JS Mini Games และแบ่งปันกับคุณสำหรับการอ้างอิงของคุณ รายละเอียดมีดังนี้:
หลังจากเกมทำงานแล้วตัวเลขดังต่อไปนี้จะปรากฏขึ้น:
ส่วน 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', 'ภาพ/b2.g ถ้า ',' images/b3.gif ',' images/b4.gif ',' images/b5.gif ',' images/b6.gif ',' images/b7.gif ',' images/bg.gif ',' images/bg_over.gif ',' images/bg_sel.gif ']; var chess_obj = ใหม่ chessclass (); window.onload = function () {$ ('init_btn'). onclick = function () {chess_obj.init (); } var callback = function () {chess_obj.init (); } img_preload (gameimg, โทรกลับ); } // ฟังก์ชั่นคลาสหมากรุก chessclass () {this.chess = []; this.boardrows = 4; this.boardCols = 8; this.are = 82; this.player = 1; // 1: สีแดง 2: สีเขียว 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.elected = null; this.isover = 0; disp ('init_div', 'ซ่อน'); } // สร้างบอร์ด chessclass.prototype.create_board = function () {var board = ''; สำหรับ (var i = 0; i <this.boardRows; i ++) {สำหรับ (var j = 0; j <this.boardcols; j ++) {board = board + '<div id = "' + i + '_' + j + '"> <img src = "images/chessbg.gif"/> }} $ ('บอร์ด'). innerHtml = บอร์ด; $ ('บอร์ด'). style.width = this.boardcols * (this.area + 2) + 'px'; $ ('บอร์ด'). style.height = this.boardrows * (this.are.are + 2) + 'px'; } // สร้างหมากรุก chessclass.prototype.create_chess = function () {// 32 Chesses var chesses = ['A1', 'B7', 'A2', 'B7', 'A2', 'B7', 'A3', 'B7', 'A3', 'B7', 'A4', 'B6', 'A4', 'B6', 'A5', 'B5' 'A5', 'B5', 'A6', 'B4', 'A6', 'B4', 'A7', 'B3', 'A7', 'B3', 'A7', 'B2', 'A7', 'B2', 'A7', 'B1']; this.chess = []; ในขณะที่ (chesses.length> 0) {var rnd = math.floor (math.random ()*chesses.length); var tmpChess = chesses.splice (rnd, 1) .toString (); this.chess.push ({'chess': tmpchess, 'type': tmpchess.substr (0, 1), 'val': tmpchess.substr (1,1), 'สถานะ': 0}); }} // สร้าง Event Chessclass.prototype.create_event = function () {var self = this; var chess_area = $ _tag ('div', 'บอร์ด'); สำหรับ (var i = 0; i <chess_area.length; i ++) {chess_area [i] .onmouseover = function () {// mouseover ถ้า (this.classname! = 'onsel') {this.className = 'on'; }} chess_area [i] .onmouseout = function () {// mouseout ถ้า (this.className! = 'onsel') {this.className = ''; }} chess_area [i] .onclick = function () {// onclick self.action (นี่); }}} // id เปลี่ยนดัชนี chessclass.prototype.getIndex = function (id) {var tid = id.split ('_'); ส่งคืน parseint (tid [0])*this.boardcols + parseint (tid [1]); } // ดัชนีการเปลี่ยนแปลง ID id chessclass.prototype.getId = ฟังก์ชั่น (ดัชนี) {return parseint (index/this.boardcols) + '_' + parseint (ดัชนี%this.boardcols); } // action chessclass.prototype.action = function (o) {ถ้า (this.isover == 1) {// เกมมากกว่าการส่งคืนเท็จ; } var index = this.getIndex (O.ID); if (this.selected == null) {// ชิ้นส่วนหมากรุกไม่ได้เลือกถ้า (this.chess [index] ['status'] == 0) {// ไม่เปิด this.show (ดัชนี); } อื่นถ้า (this.chess [index] ['สถานะ'] == 1) {// เปิดถ้า (this.chess [index] ['type'] == this.chestype [this.player]) {this.select (ดัชนี); }}} else {// ชิ้นหมากรุกที่เลือกถ้า (ดัชนี! = this.selected ['index']) {// เลือกไม่อยู่ในตำแหน่งเดียวกันถ้า (this.chess [index] ['สถานะ'] == 0) {// ชิ้นหมากรุกที่ไม่ได้เปิด this.show (ดัชนี); } อื่นถ้า (this.chess [index] ['status'] == -1) {// ตำแหน่งว่างเปล่าสิ่งนี้ move (ดัชนี); } else {// ชิ้นส่วนหมากรุกอื่น ๆ ถ้า (this.chess [index] ['type'] == this.chestype [this.player]) {this.select (ดัชนี); } else {this.kill (ดัชนี); }}}}}} // แสดง chessclass.prototype.show = ฟังก์ชั่น (ดัชนี) {$ (this.getId (ดัชนี)). innerhtml = '<img src = "images /' + this.chess [ดัชนี] this.chess [ดัชนี] ['สถานะ'] = 1; // เปิด if (this.selected! = null) {// ล้าง $ (this.getId (this.selected.index)). className = ''; this.elected = null; } this.change_player (); this.gameover (); } // เลือก Chess Chessclass.prototype.select = function (index) {ถ้า (this.selected! = null) {$ (this.getId (this.selected ['index'])). className = ''; } this.seleestion = {'index': index, 'chess': this.chess [index]}; $ (this.getId (ดัชนี)). className = 'onsel'; } // ย้าย chessclass.prototype.move = function (index) {ถ้า (this.beside (index)) {this.chess [index] = {'Chess': this.selected ['Chess' 'สถานะ': this.selected ['หมากรุก'] ['สถานะ']}; สิ่งนี้ remove (this.selected ['index']); this.show (ดัชนี); }} // ฆ่าหมากรุก chessclass.prototype.kill = ฟังก์ชั่น (ดัชนี) {ถ้า (this.beside (ดัชนี) == true && this.can_kill (ดัชนี) == true) {this.chess [index] = {'Chess' 'val': this.selected ['chess'] ['val'], 'สถานะ': this.selected ['chess'] ['สถานะ']}; สิ่งนี้ remove (this.selected ['index']); var ฆ่า = this.player == 1? 2: 1; $ ('grade_num' + ฆ่า) .innerhtml = parseint ($ ('grade_num' + ถูกฆ่า) .innerhtml) -1; this.show (ดัชนี); }} // ลบหมากรุก chessclass.prototype.remove = ฟังก์ชั่น (ดัชนี) {this.chess [ดัชนี] ['สถานะ'] = -1; // ว่างเปล่า $ (this.getId (ดัชนี)). innerhtml = ''; $ (this.getId (ดัชนี)). className = ''; } / * ตรวจสอบอยู่ข้าง * @param ดัชนีหมากรุกชิ้นดัชนี * @param selindex ดัชนีชิ้นหมากรุกที่ดำเนินการอาจว่างเปล่า หากว่างเปล่าชิ้นส่วนหมากรุกที่เลือกจะถูกอ่าน */ chessclass.prototype.beside = function (ดัชนี, selindex) {ถ้า (typeof (selindex) == 'undefined') {ถ้า (this.elected! = null) } else {return false; }} if (typeof (this.chess [index]) == 'undefined') {return false; } var from_info = this.getId (selIndex) .split ('_'); var to_info = this.getId (ดัชนี) .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 กลับจริง; } else {return false; }} / * ตรวจสอบสามารถฆ่า * @param ดัชนีดัชนีชิ้นหมากรุกที่ถูกทำลาย * @param selindex ดัชนีชิ้นหมากรุกที่ดำเนินการอาจว่างเปล่าและถ้ามันว่างเปล่าชิ้นหมากรุกที่เลือกจะอ่าน * / chessclass.prototype.can_kill = ฟังก์ชั่น (ดัชนี if (this.selected! = null) {// มีชิ้นหมากรุกที่เลือก selIndex = this.elected ['index']; } else {return false; }} if (this.chess [index] ['type']! = this.chestype [this.player]) {ถ้า (parseint (this.chess [selindex] ['val']) == 7 && parseint } อื่นถ้า (parseInt (this.chess [selindex] ['val']) == 1 && parseint (this.chess [ดัชนี] ['val']) == 7) {// 1 ไม่สามารถฆ่า 7 คืน; } อื่นถ้า (parseint (this.chess [selindex] ['val']) <= parseint (this.chess [ดัชนี] ['val'])) {// small kill big return จริง; }} return false; } // เปลี่ยน player chessclass.prototype.change_player = function () {ถ้า (this.player == 1) {this.player = 2; // ถึงสีเขียว $ ('grade_img2'). classname = 'img_on'; $ ('grade_img1'). classname = 'img'; } else {this.player = 1; // ถึงสีแดง $ ('grade_img1'). classname = 'img_on'; $ ('grade_img2'). classname = 'img'; }} // รีเซ็ต grade chessclass.prototype.reset_grade = function () {$ ('grade_img1'). classname = 'img_on'; $ ('grade_img2'). classname = 'img'; $ ('grade_num1'). innerhtml = $ ('gred_num2'). innerhtml = 16; $ ('grade_res1'). classname = $ ('grade_res2'). classname = 'none'; $ ('grade_res1'). innerhtml = $ ('grade_res2'). innerhtml = ''; } // game over chessclass.prototype.gameover = function () {if ($ ('grade_num1'). innerhtml == 0 || $ ('grade_num2'). innerhtml == 0) {// ชิ้นส่วนของหมากรุก this.show_grade (); disp ('init_div', 'show'); } else {ถ้า (this.can_action () == false) {this.isover = 1; this.show_grade (); disp ('init_div', 'show'); }}} // แสดงเกรด chessclass.prototype.show_grade = function () {var num1 = parseint ($ ('grade_num1'). innerhtml); var num2 = parseInt ($ ('gred_num2'). innerhtml); if (num1> num2) {// red square win $ ('grade_res2'). innerhtml = 'การสูญเสีย'; $ ('grade_res2'). classname = 'การสูญเสีย'; $ ('grade_res1'). innerhtml = 'win'; $ ('grade_res1'). classname = 'win'; } อื่นถ้า (num1 <num2) {// Black Square win $ ('grade_res1'). innerhtml = 'การสูญเสีย'; $ ('grade_res1'). classname = 'การสูญเสีย'; $ ('grade_res2'). innerhtml = 'win'; $ ('grade_res2'). classname = 'win'; } else {// draw $ ('grade_res1'). innerhtml = $ ('grade_res2'). innerhtml = 'draw'; $ ('grade_res1'). classname = $ ('grade_res2'). classname = 'draw'; }} // ตรวจสอบหมากรุกสามารถดำเนินการ chessclass.prototype.can_action = function () {var chess = this.chess; สำหรับ (var i = 0, max = chess.length; i <max; i ++) {ถ้า (หมากรุก [i] .status == 0) {// มีหมากรุกที่ยังไม่ได้เปิดกลับจริง; } else {ถ้า (หมากรุก [i] .status == 1 && หมากรุก [i] .type == this.chestype [this.player]) {// ชิ้นหมากรุกที่คุณเปิดถ้า (this.beside (i-this.boardcols, i) && this.can_kill (i-this.boardcols, i))) {// return true; } if (this.beside (i+this.boardcols, i) && (หมากรุก [i+this.boardcols] .status ==-1 || this.can_kill (i+this.boardcols, i))) {// return true; } if (this.beside (i+this.boardcols, i) && (หมากรุก [i+this.boardcols] .status ==-1 || this.can_kill (i+this.boardcols, i))) {// return true; } if (this.beside (i-1, i) && (หมากรุก [I-1] .status ==-1 || this.can_kill (i-1, i))) {// return return true; } if (this.beside (i+1, i) && (หมากรุก [i+1] .status ==-1 || this.can_kill (i+1, i)) {// กลับถูกต้องจริง; }}}} return false; } / ** ฟังก์ชั่นทั่วไป* / // รับ document.getElementBy (id) ฟังก์ชั่น $ (id) {this.id = id; ส่งคืน document.getElementById (id); } // รับ document.getElementsByTagname function $ _tag (ชื่อ, id) {if (typeof (id)! = 'undefined') {return $ (id) .getElementByTagname (ชื่อ); } else {return document.getElementByTagname (ชื่อ); }} / * div show และซ่อน * @param id dom id * @param handle handle แสดงหรือซ่อน * / function disp (id, handle) {if (handle == 'show') {$ (id) .style.display = 'block'; } else {$ (id) .style.display = 'ไม่มี'; }} /* 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