Este artículo describe el código fuente del ajedrez de ajedrez oscuro en JS Mini Games, y se comparte con usted para su referencia. Los detalles son los siguientes:
Después de que se ejecuta el juego, se muestra la siguiente figura:
Sección JavaScript:
/ ** Ajedrez chino * Autor: Fdipzone * Fecha: 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.gi if ',' 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 shess_obj = new ChessClass (); Window.Onload = function () {$ ('init_btn'). onClick = function () {Chess_obj.init (); } var callback = function () {Chess_obj.init (); } img_preload (GameImg, devolución de llamada); } // Función de clase de ajedrez ChessClass () {this.chess = []; this.boardrows = 4; this.boardcols = 8; this.area = 82; this.player = 1; // 1: rojo 2: verde this.selected = null; // ajedrez seleccionado this.chestype = ['', 'a', 'b']; this.islover = 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.islover = 0; disp ('init_div', 'ocultar'); } // Crear tablero chessclass.prototype.create_board = function () {var board = ''; for (var i = 0; i <this.boardrows; i ++) {for (var j = 0; j <this.boardcols; j ++) {board = board + '<div id = "' + i + '_' + j + '"> <img src = "imágenes/Chessbg.gif"/> </div>'; }} $ ('board'). innerhtml = board; $ ('tablero'). style.width = this.boardcols * (this.area + 2) + 'px'; $ ('tablero'). style.height = this.boardrows * (this.area + 2) + 'px'; } // Crear ajedrez de ajedrez aleatorio ['a1', 'b7', 'a2', 'b7', 'a2', 'b7', 'a3', 'b7', 'a3', 'b7', 'a4', 'b6', 'a4', 'b6', 'a5', 'b5',, b5 ',' 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 ()*theses.length); var tmpChess = Chesses.splice (rnd, 1) .ToString (); this.chess.push ({'Chess': tmpchess, 'type': tmpchess.substr (0, 1), 'val': tmpchess.substr (1,1), 'status': 0}); }} // Crear evento ChessClass.Prototype.Create_Event = function () {var self = this; var Chess_area = $ _tag ('div', 'board'); for (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); }}} // Id Cambiar índice chessclass.prototype.getIndex = function (id) {var tid = id.split ('_'); return parseint (tid [0])*this.boardcols + parseint (tid [1]); } // ID de cambio de índice ID chessclass.prototype.getID = function (index) {return parseInt (index/this.boardcols) + '_' + parseInt (index%this.boardcols); } // Action ChessClass.Prototype.Action = function (o) {if (this.islover == 1) {// juego a través de return false; } Var index = this.getIndex (O.ID); if (this.selected == null) {// pieza de ajedrez no seleccionada if (this.chess [index] ['status'] == 0) {// no se abre this.show (index); } else if (this.chess [index] ['status'] == 1) {// abierto if (this.chess [index] ['type'] == this.chestype [this.player]) {this.select (index); }}} else {// pieza de ajedrez seleccionada if (index! = this.selected ['index']) {// seleccionado no en la misma posición if (this.chess [index] ['status'] == 0) {// pieza de ajedrez sin abrir esto.show (index); } else if (this.chess [index] ['status'] == -1) {// posición en blanco este.move (index); } else {// otras piezas de ajedrez if (this.chess [index] ['type'] == this.chestype [this.player]) {this.select (index); } else {this.kill (index); }}}}}} // show Chess Chessclass.prototype.show = function (index) {$ (this.getId (index)). innerhtml = '<img src = "imágenes /' + this.chess [index] ['Chess'] + '.gif" />'; this.chess [index] ['status'] = 1; // abierto if (this.selected! = null) {// clare $ (this.getid (this.selected.index)). classname = ''; this.selected = null; } this.change_player (); this.gameover (); } // Seleccione Chess ChessClass.Prototype.Select = Function (index) {if (this.selected! = null) {$ (this.getId (this.selected ['index'])). classname = ''; } this.selected = {'index': index, 'ajedrez': this.chess [index]}; $ (this.getId (index)). classname = 'onsel'; } // Mueve el ajedratón de ajedrez.prototype.move = function (index) {if (this.beside (index)) {this.chess [index] = {'ajedrez': this.selected ['ajedrez'] ['ajedrez'], 'type': this.selected ['Chess'] ['type'], 'val': this.selectEnticed [corse '] 'status': this.selected ['ajedrez'] ['status']}; this.remove (this.selected ['index']); this.show (índice); }} // Kill Chess ChessClass.Prototype.Kill = function (index) {if (this.beside (index) == true && this.can_kill (index) == true) {this.chess [index] = {'{' Chess ': this.selected [' Chess '] [' Chess '],' type ': this.selected [' CHess '] [' type '], type'], 'val': this.selected ['ajedrez'] ['val'], 'status': this.selected ['ajedrez'] ['status']}; this.remove (this.selected ['index']); var killed = this.player == 1? 2: 1; $ ('grado_num' + Killed) .innerhtml = parseInt ($ ('grado_num' + matado) .innerhtml) -1; this.show (índice); }} // Eliminar el ajedrez CHESSClass.prototype.remove = function (index) {this.chess [index] ['status'] = -1; // vacía $ (this.getId (index)). innerhtml = ''; $ (this.getId (index)). classname = ''; } / * check está al lado de * @param índice Índice de pieza de ajedrez * @param selindex El índice de pieza de ajedrez ejecutado puede estar vacío. Si está vacía, la pieza de ajedrez seleccionada se lee */ Chessclass.prototype.beside = function (index, selindex) {if (typeOf (selindex) == 'undefined') {if (this.selected! = Null) {selindex = this.selected ['index']; } else {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) {// fila o colunm es el mismo e intervalo = 1 return true; } else {return false; }}} / * check puede matar * @param Índice El índice de pieza de ajedrez que fue destruido * @param selindex El índice de pieza de ajedrez que se ejecutó puede estar vacío, y si está vacía, la pieza de ajedrez seleccionada es lectura * / Chessclass.prototype.can_kill = function (índice, selindex) if (this.selected! = null) {// Hay una pieza de ajedrez seleccionada selindex = this.selected ['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 puede matar 1 retorno verdadero; } else if (parseInt (this.chess [selindex] ['val']) == 1 && parseInt (this.chess [index] ['val']) == 7) {// 1 no puede matar 7 return false; } else if (parseInt (this.chess [selindex] ['val']) <= parseInt (this.chess [index] ['val']) {// pequeño kill big return verdadero; }} return false; } // Cambiar reproductor chessclass.prototype.change_player = function () {if (this.player == 1) {this.player = 2; // a Green $ ('grado_img2'). classname = 'img_on'; $ ('grado_img1'). classname = 'img'; } else {this.player = 1; // a rojo $ ('grado_img1'). classname = 'img_on'; $ ('grado_img2'). classname = 'img'; }} // Restablecer grado Chessclass.prototype.reset_grade = function () {$ ('grado_img1'). classname = 'img_on'; $ ('grado_img2'). classname = 'img'; $ ('grado_num1'). Innerhtml = $ ('grado_num2'). Innerhtml = 16; $ ('grado_res1'). classname = $ ('grado_res2'). className = 'None'; $ ('grado_res1'). Innerhtml = $ ('grado_res2'). InnerHtml = ''; } // juego a través de chessclass.prototype.gameOver = function () {if ($ ('grado_num1'). innerhtml == 0 || $ ('grado_num2'). innerhtml == 0) {// cualquier pieza de ajedrez es 0.Isover = 1; this.show_grade (); disp ('init_div', 'show'); } else {if (this.can_action () == falso) {this.islover = 1; this.show_grade (); disp ('init_div', 'show'); }}} // show grado chessclass.prototype.show_grade = function () {var num1 = parseInt ($ ('grado_num1'). innerhtml); var num2 = parseInt ($ ('grado_num2'). innerhtml); if (num1> num2) {// Red Square Win $ ('grado_res2'). InnerHtml = 'Loss'; $ ('grado_res2'). classname = 'Loss'; $ ('grado_res1'). innerhtml = 'win'; $ ('grado_res1'). classname = 'win'; } else if (num1 <num2) {// Black Square Win $ ('grado_res1'). InnerHtml = 'Loss'; $ ('grado_res1'). classname = 'Loss'; $ ('grado_res2'). innerhtml = 'win'; $ ('grado_res2'). classname = 'win'; } else {// dibujar $ ('grado_res1'). innerhtml = $ ('grado_res2'). innerhtml = 'dibujo'; $ ('grado_res1'). classname = $ ('grado_res2'). classname = 'dibujar'; }} // Compruebe el ajedrez puede acción ChessClass.prototype.can_action = function () {var ajuste = this.chess; for (var i = 0, max = Chess.length; i <max; i ++) {if (Chess [i] .status == 0) {// Hay una pieza de ajedrez sin abrir retorno verdadero; } else {if (Chess [i] .status == 1 && Chess [i] .type == this.chestype [this.player]) {// La pieza de ajedrez que ha abierto 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) && (ajedrez [i+this.boardcols] .status ==-1 || this.can_kill (i+this.boardcols, i))) {// return true; } if (this.beside (i+this.boardcols, i) && (ajedrez [i+this.boardcols] .status ==-1 || this.can_kill (i+this.boardcols, i))) {// return true; } if (this.beside (i-1, i) && (ajedrez [i-1] .status ==-1 || this.can_kill (i-1, i))) {// izquierda return true; } if (this.beside (i+1, i) && (ajedrez [i+1] .status ==-1 || this.can_kill (i+1, i))) {// return right verdadero; }}}} return false; } / ** función común* / // get document.getElementBy (id) función $ (id) {this.id = id; return document.getElementById (id); } // Obtener documento.getElementsBytagName función $ _tag (name, id) {if (typeof (id)! = 'Undefined') {return $ (id) .getElementsByTagName (name); } else {return document.getElementsByTagName (nombre); }} / * Div Show and Hide * @param ID DOM id * @param show u ocultar * / function disp (id, manejo) {if (handle == 'show') {$ (id) .style.display = 'block'; } else {$ (id) .style.display = 'none'; }} /* img preload* @param img la matriz de imágenes que se cargará* @param Método de devolución de llamada después de que la imagen se cargue correctamente* / function img_preload (img, llamado) {var onLoad_img = 0; var tmp_img = []; for (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 ++; } else {tmp_img [i] .onload = function () {onload_img ++; }}} var et = setInterval (function () {if (onload_img == img.length) {// timer, llamada callback ClearInterval (et); callback ();}}, 200); }Haga clic aquí para descargar el código de ejemplo completo.
Creo que la descripción en este artículo tendrá cierto valor de referencia para el aprendizaje de todos en el diseño del juego JavaScript.