Este artigo descreve o código -fonte do xadrez Dark Chess em JS Mini Games e é compartilhado com você para sua referência. Os detalhes são os seguintes:
Depois que o jogo é executado, a figura a seguir é mostrada:
Seção JavaScript:
/ ** xadrez chinês * Autor: fdipZone * Data: 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', 'imagens/B2.g se ',' imagens/b3.gif ',' imagens/b4.gif ',' imagens/b5.gif ',' imagens/b6.gif ',' imagens/b7.gif ',' imagens/bg.gif ',' imagens/bg_over.gif ', imagens/bg_sel.gif']; var chess_obj = new ChessClass (); window.onload = function () {$ ('init_btn'). onclick = function () {chess_obj.init (); } var den -retorno = function () {chess_obj.init (); } img_preload (gameImg, retorno de chamada); } // Classe de xadrez função chessClass () {this.chess = []; this.boardRows = 4; this.boardcols = 8; this.area = 82; this.Player = 1; // 1: vermelho 2: verde this.Selected = null; // selecionado xadrez 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; disp ('init_div', 'hide'); } // Crie 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 = "imagens/chessbg.gif"/> </div>; }} $ ('placa'). innerhtml = placa; $ ('placa'). style.width = this.boardcols * (this.area + 2) + 'px'; $ ('Board'). style.Height = this.boardRows * (this.area + 2) + 'px'; } // Crie xadrez aleatório xadrez.prototype.create_chess = function () {// 32 xadrez var xadrez = ['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 (chessses.length> 0) {var rnd = math.floor (math.random ()*xadrez.length); var tmpChess = xndedsos.splice (rnd, 1) .ToString (); this.chess.push ({'xadrez': tmpchess, 'type': tmpchess.substr (0, 1), 'val': tmpchess.substr (1,1), 'status': 0}); }} // crie event chessclass.prototype.create_event = function () {var self = this; var chess_area = $ _tag ('div', 'placa'); para (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 Alteração Índice chessclass.prototype.getIndex = function (id) {var tid = id.split ('_'); Return parseint (tid [0])*this.boardcols + parseint (tid [1]); } // índice alteração 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) {// jogo sobre o retorno false; } var index = this.getIndex (O.id); if (this.Selected == NULL) {// Peça de xadrez não selecionada se (this.chess [index] ['status'] == 0) {// não abriu this.show (index); } else if (this.chess [index] ['status'] == 1) {// aberto if (this.chess [index] ['type'] == this.chestype [this.Player]) {this.select (index); }}} else {// Peça de xadrez selecionada if (index! = this.Selected ['index']) {// Selecionado não na mesma posição se (this.chess [index] ['status'] == 0) {// Peça de xadrez não aberta this.show (index); } else if (this.chess [index] ['status'] == -1) {// Posição em branco this.move (index); } else {// Outras peças de xadrez if (this.chess [index] ['type'] == this.chestype [this.Player]) {this.select (index); } else {this.kill (index); }}}}}} // Mostre xadrez chessclass.prototype.show = function (index) {$ (this.getid (index)). innerhtml = '<img src = "imagens /' + this.chess [index] ['chess'] + '.gif" />'; this.chess [index] ['status'] = 1; // aberto if (this.Selected! = null) {// CLEAR $ (this.getId (this.selected.index)). className = ''; this.Selected = null; } this.change_player (); this.gameover (); } // Selecione xadrez xadclass.prototype.Select = function (index) {if (this.selected! = null) {$ (this.getId (this.Selected ['index'])). ClassName = ''; } this.selected = {'index': index, 'xadrez': this.chess [index]}; $ (this.getId (index)). ClassName = 'OnSel'; } // Mova o xadrez xadrezclass.prototype.move = function (index) {if (this.beside (index)) {this.chess [index] = {'xadrez': this.selected ['xadrez'] ['xadrez'], 'tipo': thisselected ['chess' ['[tipo']], 'Val': '. 'Status': this.selected ['xadrez'] ['status']}; this.Remove (this.Selected ['index']); this.show (índice); }} // Mate o xadrez xadrez.prototype.kill = function (index) {if (this.beside (index) == true && this.can_kill (index) == true) {this.chess [index] = {'xadre 'Val': this.Selected ['xadrez'] ['val'], 'status': this.selected ['xadrez'] ['status']}; this.Remove (this.Selected ['index']); var morto = this.Player == 1? 2: 1; $ ('grau_num' + morto) .innerhtml = parseint ($ ('grau_num' + morto) .innerhtml) -1; this.show (índice); }} // Remova o xadrez de xadrez.prototype.remove = function (index) {this.chess [index] ['status'] = -1; // vazio $ (this.getId (index)). innerhtml = ''; $ (this.getId (index)). ClassName = ''; } / * A verificação está ao lado * @param Índice de peças de xadrez Índice * @param SelIndex O índice de peças de xadrez executado pode estar vazio. Se estiver vazio, a peça de xadrez selecionada será lida */ chessclass.prototype.beside = function (index, Selindex) {if (typeof (Selindex) == 'undefined') {if (thisselected! = Null) {seleindex = this.select ['index']; } else {return false; }} if (typeof (this.chess [index]) == 'indefinido') {return false; } var de_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) {// linha ou colunm é o mesmo e interval = 1 return true; } else {return false; }} / * A verificação pode matar * @param Índice O índice de peças de xadrez que foi destruído * @param SelIndex O índice de peças de xadrez que foi executado pode estar vazio e, se estiver vazio, a peça de xadrez selecionada é lida * / chessclass.prototype.Can_Kill = function (Índice) {if (typeof (SelIndEx) if (this.Selected! = null) {// existe uma peça de xadrez selecionada SelIndex = this.Selected ['index']; } else {return false; }} if (this.chess [index] ['tipo']! } else if (parseInt (this.chess [Selindex] ['val']) == 1 && parseInt (this.chess [index] ['val']) == 7) {// 1 não pode matar 7 retornar false; } else if (parseInt (this.chess [Selindex] ['val']) <= parseint (this.chess [index] ['val'])) {// small mata o grande retorno true; }} retornar false; } // altere o player chessclass.prototype.change_player = function () {if (this.player == 1) {this.Player = 2; // para verde $ ('grave_img2'). ClassName = 'img_on'; $ ('grave_img1'). ClassName = 'img'; } else {this.Player = 1; // para vermelho $ ('grave_img1'). ClassName = 'img_on'; $ ('grave_img2'). ClassName = 'img'; }} // redefinir grau chessclass.prototype.reset_grade = function () {$ ('grave_img1'). className = 'img_on'; $ ('grave_img2'). ClassName = 'img'; $ ('grave_num1'). innerhtml = $ ('grave_num2'). INnerHtml = 16; $ ('grave_res1'). ClassName = $ ('grave_res2'). ClassName = 'None'; $ ('grave_res1'). innerhtml = $ ('grave_res2'). innerhtml = ''; } // jogo em chessclass.prototype.gameover = function () {if ($ ('grau_num1'). innerhtml == 0 || $ ('grave_num2'). inerhtml == 0) {// Alguma peça de xadrez é 0.Issover = 1; this.show_grade (); disp ('init_div', 'show'); } else {if (this.can_action () == false) {this.ISover = 1; this.show_grade (); disp ('init_div', 'show'); }}} // Mostrar grau chessclass.prototype.show_grade = function () {var num1 = parseint ($ ('grau_num1'). innerhtml); var num2 = parseint ($ ('grau_num2'). INnerHTML); if (num1> num2) {// Red Square Win $ ('GRADE_RES2'). INNERHTML = 'LESS'; $ ('grau_res2'). ClassName = 'LESS'; $ ('grau_res1'). innerhtml = 'win'; $ ('grau_res1'). ClassName = 'Win'; } else if (num1 <num2) {// Black Square Win $ ('GRADE_RES1'). INNERHTML = 'LESS'; $ ('grau_res1'). ClassName = 'LESS'; $ ('grave_res2'). INnerHTML = 'Win'; $ ('grau_res2'). ClassName = 'Win'; } else {// desenhe $ ('grau_res1'). innerhtml = $ ('grave_res2'). innerhtml = 'draw'; $ ('grave_res1'). ClassName = $ ('grave_res2'). ClassName = 'Draw'; }} // Verifique o xadrez pode active chessclass.prototype.can_action = function () {var chess = this.chess; for (var i = 0, max = xad.length; i <max; i ++) {if (xadrez [i] .status == 0) {// existe uma peça de xadrez fechada retorna true; } else {if (xadrez [i] .status == 1 && xadrez [i] .type == this.chestype [this.Player]) {// a peça de xadrez que você abriu se (this.beside (i-this.boardcols, i) && (chess [i-this.boardCols]. this.can_kill (i-this.boardcols, i))) {// retorna true; } if (this.beside (i+this.boardcols, i) && (xadrez [i+this.boardcols] .status ==-1 || this.can_kill (i+this.boardcols, i))) {// retorna true; } if (this.beside (i+this.boardcols, i) && (xadrez [i+this.boardcols] .status ==-1 || this.can_kill (i+this.boardcols, i))) {// retorna true; } if (this.beside (i-1, i) && (xadrez [i-1] .status ==-1 || this.can_kill (i-1, i))) {// Return lizer true; } if (this.beside (i+1, i) && (xadrez [i+1] .status ==-1 || this.can_kill (i+1, i))) {// Retorno direito true; }}}} retornar false; } / ** Função comum* / // get document.getElementby (id) função $ (id) {this.id = id; retornar document.getElementById (id); } // Get Document.getElementsByTagName Função $ _TAG (nome, id) {if (typeof (id)! } else {return document.getElementsByTagName (nome); }} / * Div Show e ocultar * @param ID DOM ID * @param Handle Show ou ocultar * / function disp (id, handle) {if (handle == 'show') {$ (id) .style.display = 'block'; } else {$ (id) .style.display = 'nenhum'; }} /* IMG Preload* @param img a matriz de imagem a ser carregada* @param Método de retorno de retorno após a imagem ser carregada com sucesso* / função img_preload (img, retorno de chamada) {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, ligue para o retorno de chamada clearInterval (et); retorno de chamada ();}}, 200); }Clique aqui para baixar o código de exemplo completo.
Acredito que a descrição deste artigo terá um certo valor de referência para o aprendizado de todos o design do jogo JavaScript.