Dieser Artikel beschreibt den Quellcode des Schachschaches in JS Mini Games und wird für Ihre Referenz mit Ihnen geteilt. Die Details sind wie folgt:
Nachdem das Spiel ausgeführt wurde, ist die folgende Abbildung dargestellt:
JavaScript -Abschnitt:
/ ** Chinesischer Schach * Autor: ['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 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 chess_obj = new chessClass (); window.onload = function () {$ ('init_btn'). onclick = function () {chess_obj.init (); } var callback = function () {chess_obj.init (); } img_preload (GAMEIMG, Callback); } // Schachklassenfunktion chessClass () {this.chess = []; this.boardrows = 4; this.boardcols = 8; this.area = 82; this.player = 1; // 1: rot 2: grün this.selected = null; // wählte Schach this.chestype = ['', 'a', 'b']; this.isover = 0; } // init chessClass.prototype.init = function () {this.reset_grad (); this.create_board (); this.create_chess (); this.create_event (); this.player = 1; this.selected = null; this.isover = 0; disp ('init_div', 'hide'); } // Board chessclass.prototype.create_board = function () {var board = ''; für (var i = 0; i <this.boardRows; i ++) {für (var j = 0; j <this.boardcols; j ++) {board = board + '<div id = "' + i + '_' + j + '"> <img src = "bilder/thessbg.gif"/> </div>; }} $ ('board'). Innerhtml = Board; $ ('board'). style.width = this.boardcols * (this.area + 2) + 'px'; $ ('board'). style.height = this.boardRows * (this.Area + 2) + 'px'; } // Erstellen Sie zufällige Schachschachklasse. ['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 ()*chesses.length); var tmpChess = chesses.splice (rnd, 1) .toString (); this.chess.push ({'schach': tmpchess, 'type': tmpchess.substr (0, 1), 'val': tmpchess.substr (1,1), 'Status': 0}); }} // Ereignis chessClass.prototype.create_event = function () {var self = this; var chess_area = $ _tag ('div', 'board'); für (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 ändern Index chessClass.prototype.getIndex = Funktion (id) {var tid = id.split ('_'); return parseInt (TID [0])*this.boardcols + parseInt (TID [1]); } // Indexänderung ID chessclass.prototype.getId = Funktion (index) {return parseInt (index/this.boardcols) + '_' + parseInt (Index%this.boardcols); } // Aktion chessClass.Prototype.Action = function (o) {if (this.isover == 1) {// Game Over Return Falsch; } var index = this.getIndex (o.id); if (this.selected == null) {// Schachstück nicht ausgewählt if (this.chess [index] ['Status'] == 0) {// nicht geöffnet. } else if (this.chess [index] ['status'] == 1) {// öffnet if (this.chess [index] ['Typ'] == this.chestype [this.player]) {this.Select (Index); }}} else {// Ausgewähltes Schachstück if (index! } else if (this.chess [index] ['status'] == -1) {// leere Position this.move (index); } else {// Andere Schachstücke if (this.chess [index] ['type'] == this.chestype [this.player]) {this.Select (Index); } else {this.kill (index); }}}}}} // Schachschachklasse anzeigen this.chess [index] ['Status'] = 1; // eröffnet if (this.selected! this.selected = null; } this.change_player (); this.gameover (); } // wählen Sie Schachschachklasse. } this.selected = {'Index': Index, 'Schach': this.chess [index]}; $ (this.getId (Index)). className = 'Onsel'; } // Schachschachschicht verschieben. 'Status': this.selected ['schach'] ['Status']}; this.remove (this.selected ['Index']); this.show (Index); }} // Schachschachschessclass.Prototype.kill = Funktion (index) {if (this.beside (index) == true && this.can_kill (index) == true) {this.chess [index] = {'schach': this.selected ['schuss'] ['schotte'], 'type': type ': type': this.Selected ': type': type ': this.Selected': type ': type': this.Selected ': type': type ': this.Selected': type ': this.Thus': this.Selected ': 'val': this.Selected ['schach'] ['val'], 'Status': this.selected ['schach'] ['Status']}; this.remove (this.selected ['Index']); var getötet = this.player == 1? 2: 1; $ ('grade_num' + getötet) .innerhtml = parseInt ($ ('grade_num' + getötet) .innerhtml) -1; this.show (Index); }} // Schachschachschicht entfernen // leer $ (this.getId (Index)). Innerhtml = ''; $ (this.getId (Index)). className = ''; } / * Überprüfung befindet sich neben * @param Index Schach -Stück -Index * @param selindex Der ausgeführte Schach -Stück -Index kann leer sein. Wenn es leer ist, wird das ausgewählte Schachstück gelesen */ chessClass.prototype.beside = function (index, selIndex) {if (typeof (selindex) == 'undefined') {if (this.sselected! = 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 oder colunm ist gleich und inval = 1 return true; } else {return false; }} / * check kann töten * @param Index Der Schach -Stück -Index, der zerstört wurde. if (this.selected! } else {return false; }} if (this.chess [index] ['type']! } else if (parseInt (this.chess [selindex] ['val']) == 1 && parseInt (this.chess [index] ['val']) == 7) {// 1 kann nicht töten } else if (parseInt (this.chess [selindex] ['val']) <= parseInt (this.chess [index] ['val'])) {// Small Kill Big Return True; }} return false; } // Player chessclass.Prototype.change_player = function () {if (this.player == 1) {this.player = 2; // bis grün $ ('grade_img2'). className = 'img_on'; $ ('grade_img1'). className = 'img'; } else {this.player = 1; // bis Red $ ('grade_img1'). className = 'img_on'; $ ('grade_img2'). className = 'img'; }} // grade chessclass.prototype.reset_grad = function () {$ ('grade_img1'). className = 'img_on'; $ ('grade_img2'). className = 'img'; $ ('grade_num1'). Innerhtml = $ ('grade_num2'). Innerhtml = 16; $ ('grade_res1'). className = $ ('grade_res2'). className = 'keine'; $ ('grade_res1'). InnerHtml = $ ('grade_res2'). Innerhtml = ''; } // Spiel über chessclass.prototype.gameover = function () {if ($ ('grade_num1'). InnerHtml == 0 || $ ('grade_num2'). InnerHtml == 0) {// An jedem Schussstück 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'); }}} // grade chessclass.prototype.show_grad = function () {var num1 = parseInt ($ ('grade_num1'). InnerHtml); var num2 = parseInt ($ ('grade_num2'). Innerhtml); if (num1> num2) {// Red Square Win $ ('grade_res2'). Innerhtml = 'Verlust'; $ ('grade_res2'). className = 'Verlust'; $ ('grade_res1'). Innerhtml = 'Win'; $ ('grade_res1'). className = 'Win'; } else if (num1 <num2) {// Black Square Win $ ('grade_res1'). InnerHtml = 'Verlust'; $ ('grade_res1'). className = 'Verlust'; $ ('grade_res2'). Innerhtml = 'Win'; $ ('grade_res2'). className = 'Win'; } else {// zeichnen $ ('grade_res1'). InnerHtml = $ ('grade_res2'). InnerHtml = 'Draw'; $ ('grade_res1'). className = $ ('grade_res2'). className = 'draw'; }} // Schachkante action chessClass.prototype.can_action = function () {var schess = this.chess; für (var i = 0, max = chess.length; i <max; i ++) {if (schach [i] .Status == 0) {// Es gibt ein ungeöffnetes Schachstück zurück. } else {if (schach [i] .Status == 1 && schach [i] .type == this.chestype [this.player]) {// das Schachstück, das du geöffnet hast, wenn (this.beside (i-this.boardcols, i) && (schach [i-this.boardcols]. this.can_kill (i-this.boardcols, i))) {// return true; } if (this.beside (i+this.boardcols, i) && (schach [i+this.boardcols] .status ==-1 || this.can_kill (i+this.boardcols, i))) {// return true; } if (this.beside (i+this.boardcols, i) && (schach [i+this.boardcols] .status ==-1 || this.can_kill (i+this.boardcols, i))) {// return true; } if (this.beside (i-1, i) && (schach [i-1] .Status ==-1 || this.can_kill (i-1, i)) {// links return true; } if (this.beside (i+1, i) && (schach [i+1] .Status ==-1 || this.can_kill (i+1, i)) {// Right Return True; }}}} return false; } / ** Gemeinsame Funktion* / // document.getElementBy (id) Funktion $ (id) {this.id = id; return document.getElementById (id); } // document.getElementsByTagName -Funktion $ _tag (Name, id) {if (typeof (id)! } else {return document.getElementsByTagName (Name); }} / * div show und hide * @param id dom id * @param handle show oder ausblenden } else {$ (id) .style.display = 'none'; }} /* IMG Preload* @param img Das zu geladene Bildarray* @param Callback -Methode, nachdem das Bild erfolgreich geladen wurde var tmp_img = []; für (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, rufen Sie Callback ClearInterval (et); callback ();}}, 200); }Klicken Sie hier, um den vollständigen Beispielcode herunterzuladen.
Ich glaube, dass die Beschreibung in diesem Artikel einen gewissen Referenzwert für das Erlernen aller JavaScript -Spieledesigns haben wird.