Cet article décrit le code source des échecs d'échecs dans les jeux d'échecs dans les mini-jeux JS et est partagé avec vous pour votre référence. Les détails sont les suivants:
Une fois le jeu exécuté, le chiffre suivant est illustré:
Section JavaScript:
/ ** Échecs chinois * Auteur: fdipzone * Date: 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 si ',' 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 = new ChessClass (); window.onload = function () {$ ('init_btn'). onClick = function () {Chess_Obj.init (); } var callback = function () {chess_obj.init (); } img_preload (gameImg, rappel); } // Fonction de classe d'échecs ChessClass () {this.chess = []; this.boardrows = 4; this.boardCols = 8; this.aria = 82; this.player = 1; // 1: rouge 2: vert this.selected = null; // Échecs sélectionné 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', 'cache'); } // Créer une carte ChessClass.prototype.create_board = function () {var board = ''; for (var i = 0; i <this.boardrows; i ++) {for (var j = 0; j <this.boardCols; j ++) {barf-= bark + '<div id = "' + i + '_' + j + '"> <img src = "images / chessbg.gif" /> </ div>'; }} $ ('planche'). innerHtml = bandon; $ ('planche'). style.width = this.boardCols * (this.area + 2) + 'px'; $ ('planche'). style.height = this.boardrows * (this.area + 2) + 'px'; } // Créer des échecs aléatoires 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 = []; while (Chesses.Length> 0) {var rnd = math.floor (math.random () * Chess.Length); var tmpchess = échelles.splice (rnd, 1) .toString (); this.chess.push ({'Chess': tmpchess, 'type': tmpchess.substr (0, 1), 'val': tmpchess.substr (1,1), 'status': 0}); }} // Créer un événement ChessClass.prototype.create_event = function () {var self = this; var Chess_Area = $ _tag ('div', 'Board'); pour (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 () {// muouseout if (this.classname! = 'onsel') {this.classname = ''; }} Chess_Area [i] .OnClick = function () {// onclick self.action (this); }}} // ID Change Index ChessClass.prototype.getIndex = fonction (id) {var tid = id.split ('_'); RETOUR 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); } // action chessclass.prototype.action = function (o) {if (this.isover == 1) {// jeu sur return false; } var index = this.getIndex (o.id); if (this.selected == null) {// échette pièce non sélectionnée if (this.chess [index] ['status'] == 0) {// non ouvert this.show (index); } else if (this.chess [index] ['status'] == 1) {// ouvert if (this.chess [index] ['type'] == this.chestype [this.player]) {this.select (index); }}} else {// sélection sélectionné if (index! = this.selected ['index']) {// Sélectionné non dans la même position if (this.chess [index] ['status'] == 0) {// non ouvert la pièce de l'échecs this.show (index); } else if (this.chess [index] ['status'] == -1) {// position vide this.move (index); } else {// Autres pièces d'échecs if (this.chess [index] ['type'] == this.chestype [this.player]) {this.select (index); } else {this.kill (index); }}}}}} // affiche Chess ChessClass.prototype.show = function (index) {$ (this.getId (index)). innerhtml = '<img src = "images /' + this.chess [index] ['Chess'] + '.gif" />'; this.chess [index] ['statut'] = 1; // ouvert if (this.selected! = null) {// clear $ (this.getId (this.selected.index)). className = ''; this.selected = null; } this.change_player (); this.gameOver (); } // sélectionnez Chess ChessClass.prototype.Select = fonction (index) {if (this.selected! = null) {$ (this.getId (this.selected ['index'])). className = ''; } this.selected = {'index': index, 'Chess': this.chess [index]}; $ (this.getId (index)). className = 'onsel'; } // Move Chess ChessClass.prototype.move = function (index) {if (this.beside (index)) {this.chess [index] = {'Chess': this.selected ['Chess'] ['Chess'], 'type': this.selected ['Chess'] ['type'], 'val': this.selected ['Chess'] [Val '] 'Status': this.selected ['Chess'] ['Status']}; this.reMove (this.selected ['index']); this.show (index); }} // 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 '] 'Val': this.selected ['Chess'] ['Val'], 'Status': this.selected ['Chess'] ['Status']}; this.reMove (this.selected ['index']); var tué = this.player == 1? 2: 1; $ ('grade_num' + tué) .InnerHtml = paSeInt ($ ('grade_num' + tué) .innerHtml) -1; this.show (index); }} // Supprime les échecs chessclass.prototype.remove = function (index) {this.chess [index] ['status'] = -1; // vide $ (this.getId (index)). innerHtml = ''; $ (this.getId (index)). className = ''; } / * La vérification est à côté * @param index index de la pièce d'échecs * @param seLindex L'index de pièce d'échecs exécuté peut être vide. S'il est vide, la pièce d'échecs sélectionnée est lue * / 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) {// row ou colunm est le même et interval = 1 return true; } else {return false; }} / * vérifier peut tuer * @param index l'indice de pièce d'échecs qui a été détruit * @param selindex L'indice de pièce d'échecs qui a été exécuté peut être vide, et s'il est vide, la pièce d'échecs sélectionnée est lue * / Chessclass.prototype.can_kill = fonction (index, selindex) {if (typeof (Selindex) == '' Undefined ') {// if (this.selected! = null) {// Il y a une pièce d'échecs sélectionnée 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 Can Kill 1 Return True; } else if (parseInt (this.chess [selindex] ['val']) == 1 && parseInt (this.chess [index] ['val']) == 7) {// 1 ne peut pas tuer 7 return false; } else if (parseInt (this.chess [Selindex] ['val']) <= parseInt (this.chess [index] ['val'])) {// small kill big return true; }} return false; } // Changer Player ChessClass.prototype.change_player = function () {if (this.player == 1) {this.player = 2; // à green $ ('grade_img2'). className = 'img_on'; $ ('grade_img1'). className = 'img'; } else {this.player = 1; // à rouge $ ('grade_img1'). className = 'img_on'; $ ('grade_img2'). className = 'img'; }} // Réinitialiser Grade ChessClass.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 = 'Aucun'; $ ('grade_res1'). innerhtml = $ ('grade_res2'). innerhtml = ''; } // jeu sur chessclass.prototype.gameover = function () {if ($ ('grade_num1'). innerhtml == 0 || $ ('grade_num2'). innerhtml == 0) {// toute pièce d'échecs est 0 ce.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'); }}} // Show Grade ChessClass.prototype.show_grade = function () {var num1 = paSeInt ($ ('grade_num1'). innerHtml); var num2 = parseInt ($ ('grade_num2'). innerHtml); if (num1> num2) {// Red Square Win $ ('grade_res2'). innerhtml = 'perte'; $ ('grade_res2'). className = 'perte'; $ ('grade_res1'). innerhtml = 'win'; $ ('grade_res1'). className = 'win'; } else if (num1 <num2) {// Black Square win $ ('grade_res1'). innerHtml = 'perte'; $ ('grade_res1'). className = 'perte'; $ ('grade_res2'). innerhtml = 'win'; $ ('grade_res2'). className = 'win'; } else {// draw $ ('grade_res1'). innerhtml = $ ('grade_res2'). innerhtml = 'draw'; $ ('grade_res1'). className = $ ('grade_res2'). classname = 'draw'; }} // Vérifier l'échec peut action ChessClass.prototype.can_action = function () {var Chess = this.chess; pour (var i = 0, max = échec.length; i <max; i ++) {if (échec [i] .status == 0) {// il y a une pièce d'échecs non ouverte return true; } else {if (échec [i] .status == 1 && échetion [i] .type == this.chestype [this.player]) {// la pièce d'échecs que vous avez ouverte if (this.beside (i-this.boardCols, i) && (échec [i-this.boardcols] .status == - 1 || this.can_kill (i-this.boardCols, i))) {// return true; } if (this.beside (i + this.boardCols, i) && (échec [i + this.boardCols] .status == - 1 || this.can_kill (i + this.boardCols, i))) {// return true; } if (this.beside (i + this.boardCols, i) && (échec [i + this.boardCols] .status == - 1 || this.can_kill (i + this.boardCols, i))) {// return true; } if (this.beside (i-1, i) && (échec [i-1] .status == - 1 || this.can_kill (i-1, i))) {// gauche return true; } if (this.beside (i + 1, i) && (échec [i + 1] .status == - 1 || this.can_kill (i + 1, i))) {// droit return true; }}}} return false; } / ** Fonction commune * / // get document.getElement (id) Fonction $ (id) {this.id = id; return document.getElementById (id); } // get document.getElementsByTagName Fonction $ _tag (name, id) {if (typeof (id)! = 'undefined') {return $ (id) .getElementsByTagName (name); } else {return document.getElementsByTagName (name); }} / * div show and masquer * @param id dom id * @param manche afficher ou masquer * / fonction disp (id, manche) {if (handle == 'show') {$ (id) .style.display = 'block'; } else {$ (id) .style.display = 'Aucun'; }} / * img Preload * @param img Le tableau d'image à charger * @param de la méthode de rappel après le chargement de l'image * / fonction img_preload (img, callback) {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, callback clearInterval (et); callback ();}}, 200); }Cliquez ici pour télécharger l'exemple complet du code.
Je crois que la description de cet article aura une certaine valeur de référence pour l'apprentissage de chacun de la conception de jeux JavaScript.