Artikel ini menjelaskan kode sumber catur gelap catur di game mini JS, dan dibagikan kepada Anda untuk referensi Anda. Dengan rincian sebagai berikut:
Setelah pertandingan dijalankan, angka berikut ditampilkan:
Bagian JavaScript:
/ ** Catur Cina * Penulis: FDIPZONE * Tanggal: 2012-06-24 * Ver: 1.0 */ var gameimg = ['gambar/a1.gif', 'gambar/a2.gif', 'gambar/a3.gif', 'gambar/a4.gif', 'gambar/a5.gif', 'gambar/a6.gif', 'gambar/a7.gif', 'gambar/b1.gif', 'gambar/b2.g jika ',' gambar/b3.gif ',' gambar/b4.gif ',' gambar/b5.gif ',' gambar/b6.gif ',' gambar/b7.gif ',' gambar/bg.gif ',' gambar/bg_over.gif ',' gambar/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); } // Fungsi kelas catur CHESSClass () {this.chess = []; this.boardrows = 4; this.boardcols = 8; this.area = 82; this.player = 1; // 1: merah 2: hijau ini. Dipilih = null; // catur yang dipilih 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; ini. Dipilih = null; this.isover = 0; disp ('init_div', 'hide'); } // Buat papan ChessClass.prototype.create_board = function () {var board = ''; untuk (var i = 0; i <this.boardrows; i ++) {for (var j = 0; j <this.boardcols; j ++) {board = board + '<div id = "' + i + '_' + j + '"> <img src = "gambar/chessbg.gif"/> </div>'; }} $ ('board'). innerHtml = board; $ ('board'). style.width = this.boardcols * (this.area + 2) + 'px'; $ ('board'). style.height = this.boardrows * (this.area + 2) + 'px'; } // Buat catur acak CHESSClass.prototype.create_chess = function () {// 32 catur var catur = ['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 = []; while (chesses.length> 0) {var rnd = math.floor (math.random ()*catur.length); var tmpchess = catur.splice (rnd, 1) .toString (); this.chess.push ({'catur': tmpchess, 'type': tmpchess.substr (0, 1), 'val': tmpchess.substr (1,1), 'status': 0}); }} // Buat Event ChessClass.prototype.create_event = function () {var self = this; var chess_area = $ _tag ('div', 'board'); untuk (var i = 0; i <chess_area.length; i ++) {chess_area [i] .onmouseOver = function () {// mouseover if (this.className! = 'ontsel') {this.classname = 'on'; }} chess_area [i] .onmouseout = function () {// mouseout if (this.className! = 'ontsel') {this.classname = ''; }} chess_area [i] .Onclick = function () {// Onclick self.action (ini); }}} // ID Ubah Indeks CHESSClass.Prototype.getIndex = function (id) {var tid = id.split ('_'); return parseInt (tid [0])*this.boardcols + parseInt (tid [1]); } // Indeks Perubahan ID ID ChessClass.Prototype.getId = function (index) {return parseInt (index/this.boardcols) + '_' + parseInt (index%this.boardcols); } // action chessclass.prototype.action = function (o) {if (this.isover == 1) {// game over return false; } var index = this.getIndex (o.id); if (ini. } lain if (this.chess [index] ['status'] == 1) {// dibuka if (this.chess [index] ['type'] == this.chestype [this.player]) {this.select (index); }}} else {// Piece catur yang dipilih jika (index! = this.seleksi ['index']) {// dipilih tidak pada posisi yang sama jika (this.chess [index] ['status'] == 0) {// potongan catur yang belum dibuka this.show (index); } lain jika (this.chess [index] ['status'] == -1) {// position blank this.move (index); } else {// potongan catur lain jika (this.chess [index] ['type'] == this.chestype [this.player]) {this.select (index); } else {this.kill (index); }}}}}} // Tampilkan catur catur cHessclass.prototype.show = function (index) {$ (this.getId (index)). innerHtml = '<img src = "gambar /' + this.chess [index] ['chess'] + '.gif" />'; this.chess [index] ['status'] = 1; // dibuka if (this.pelected! = null) {// hapus $ (this.getId (this.selected.index)). className = ''; ini. Dipilih = null; } this.change_player (); this.gameover (); } // Pilih catur chessclass.prototype.select = function (index) {if (this. } this.selected = {'index': index, 'chess': this.chess [index]}; $ (this.getId (index)). className = 'onSel'; } // Pindahkan catur catur chirsclass.prototype.move = function (index) {if (this.beside (index)) {this.chess [index] = {'catur': this.pelected ['catur'] ['catur'], 'type': ini dipilih ['catur'] ['type'], 'catur'], 'type': ini. 'Status': ini. Dipilih ['catur'] ['status']}; this.remove (this.pelected ['index']); this.show (index); }} // Bunuh catur catur cHessclass.prototype.kill = function (index) {if (this.beside (index) == true && this.can_kill (index) == true) {this.Chess [index] = {'catur': ini dipilih ['catur'] ['catur'], 'catur': ini. 'Val': this.pelected ['catur'] ['val'], 'status': this.pelected ['catur'] ['status']}; this.remove (this.pelected ['index']); var killed = this.player == 1? 2: 1; $ ('grade_num' + dibunuh) .innerhtml = parseInt ($ ('grade_num' + dibunuh) .innerhtml) -1; this.show (index); }} // Hapus catur catur chiSsclass.prototype.remove = function (index) {this.chess [index] ['status'] = -1; // kosong $ (this.getId (index)). innerHtml = ''; $ (this.getId (index)). className = ''; } / * Periksa ada di samping * @param index catur index piece * @param selindex Indeks catur yang dieksekusi dapat kosong. Jika kosong, bagian catur yang dipilih adalah baca */ cheSsclass.prototype.beside = function (index, selIndex) {if (typeof (selIndex) == 'tidak terdefinisi') {if (ini. Dipilih! = Null) {selIndex = this.pelected ['index']; } else {return false; }} if (typeof (this.chess [index]) == 'tidak terdefinisi') {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) {// baris atau colunm sama dan interval = 1 return true; } else {return false; }} / * Pemeriksaan dapat membunuh * @param indeks indeks catur yang dihancurkan * @param selindex indeks potongan catur yang dieksekusi dapat kosong, dan jika kosong, bagian catur yang dipilih dibaca * / chiSsclass.prototype. if (this.pelected! = null) {// Ada potongan catur yang dipilih selindex = this.pelected ['index']; } else {return false; }} if (this.chess [index] ['type']! = this.chestype [this.player]) {if (parseInt (this.chess [selIndex] ['val']) == 7 && parseInt (this.chess [index] ['val']) == 1) {// 7 dapat membunuh 1 return true; } else if (parseInt (this.chess [selIndex] ['val']) == 1 && parseInt (this.chess [index] ['val']) == 7) {// 1 Can't Kill 7 Return False; } lain if (parseInt (this.chess [selIndex] ['val']) <= parseInt (this.chess [index] ['val'])) {// Small Bill Big Return true true; }} return false; } // ubah pemain chessclass.prototype.change_player = function () {if (this.player == 1) {this.player = 2; // to green $ ('grade_img2'). className = 'img_on'; $ ('grade_img1'). className = 'img'; } else {this.player = 1; // to red $ ('grade_img1'). className = 'img_on'; $ ('grade_img2'). className = 'img'; }} // Reset grade chiSsclass.prototype.reset_grade = function () {$ ('grade_img1'). className = 'img_on'; $ ('grade_img2'). className = 'img'; $ ('grade_num1'). innerHtml = $ ('grade_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) {// Potongan catur apa pun adalah 0 this.isover = 1; this.show_grade (); disp ('init_div', 'show'); } else {if (this.can_action () == false) {this.isover = 1; this.show_grade (); disp ('init_div', 'show'); }}} // Tampilkan grade chessclass.prototype.show_grade = function () {var num1 = parseInt ($ ('grade_num1'). innerHtml); var num2 = parseInt ($ ('grade_num2'). innerHtml); if (num1> num2) {// red square win $ ('grade_res2'). innerHtml = 'loss'; $ ('grade_res2'). className = 'loss'; $ ('grade_res1'). innerHtml = 'win'; $ ('grade_res1'). className = 'win'; } else if (num1 <num2) {// black square win $ ('grade_res1'). innerHtml = 'loss'; $ ('grade_res1'). className = 'loss'; $ ('grade_res2'). innerHtml = 'win'; $ ('grade_res2'). className = 'win'; } else {// gambar $ ('grade_res1'). innerHtml = $ ('grade_res2'). innerHtml = 'draw'; $ ('grade_res1'). className = $ ('grade_res2'). className = 'draw'; }} // Periksa catur dapat bertindak chiSsclass.prototype.can_action = function () {var chess = this.chess; untuk (var i = 0, max = catur.length; i <max; i ++) {if (catur [i] .status == 0) {// Ada potongan catur yang belum dibuka kembali true; } else {if (catur [i] .status == 1 && catur [i] .type == this.chestype [this.player]) {// potongan catur yang telah Anda buka if (this.beside (i-this.boardcols, i) && (catur [i-this.boardcols]. this.can_kill (i-this.boardcols, i))) {// return true; } if (this.beside (i+this.boardcols, i) && (catur [i+this.boardcols] .status ==-1 || this.can_kill (i+this.boardcols, i))) {// return true; } if (this.beside (i+this.boardcols, i) && (catur [i+this.boardcols] .status ==-1 || this.can_kill (i+this.boardcols, i))) {// return true; } if (this.beside (i-1, i) && (catur [i-1] .status ==-1 || this.can_kill (i-1, i))) {// kiri kembali true; } if (this.beside (i+1, i) && (catur [i+1] .status ==-1 || this.can_kill (i+1, i)) {// benar kembali true; }}}} return false; } / ** Fungsi Umum* / // Dapatkan Fungsi Document.GetElementBy (ID) $ (id) {this.id = id; return document.getElementById (id); } // dapatkan fungsi document.geteLementsByTagname $ _tag (name, id) {if (typeof (id)! = 'tidak terdefinisi') {return $ (id) .geteLementsByTagname (name); } else {return document.getElementsbyTagname (name); }} / * Div show dan sembunyikan * @param id dom id * @param handle show atau hide * / function disp (id, handle) {if (handle == 'show') {$ (id) .style.display = 'block'; } else {$ (id) .style.display = 'none'; }} /* img preload* @param img array gambar yang akan dimuat* @param callback metode setelah gambar dimuat dengan sukses* / fungsi img_preload (img, callback) {var onload_img = 0; var tmp_img = []; untuk (var i = 0, imgnum = img.length; i <imgnum; i ++) {tmp_img [i] = gambar baru (); 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, panggilan balik callback clearInterval (ET); callback ();}}, 200); }Klik di sini untuk mengunduh kode contoh lengkap.
Saya percaya bahwa deskripsi dalam artikel ini akan memiliki nilai referensi tertentu untuk pembelajaran semua orang tentang desain game JavaScript.