この記事では、JSミニゲームのチェスダークチェスのソースコードについて説明し、参照のためにあなたと共有されています。詳細は次のとおりです。
ゲームが実行された後、次の図が表示されます。
JavaScriptセクション：
/ **中国のチェス *著者：fdipzone *日付：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 '、' 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）; } // chess class function chessclass（）{this.chess = []; this.boardrows = 4; this.boardCols = 8; this.area = 82; this.player = 1; // 1：Red 2：Green this.Selected = null; // selected chess 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'）; } // Board 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 = "images/chessbg.gif"/> </div>'; }} $（ 'board'）。innerhtml = board; $（ 'Board'）。style.width = this.boardCols *（this.area + 2） + 'px'; $（ 'Board'）。style.height = this.boardRows *（this.area + 2） + 'px'; } //ランダムチェス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（）*chesses.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}）; }} // create event 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変更インデックスChessClass.Prototype.getIndex = function（id）{var tid = id.split（ '_'）; return parseint（tid [0]）*this.boardcols + parseint（tid [1]）; } //インデックス変更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（this.selected == null）{// chess feice selected if（this.chess [index] ['status'] == 0）{// this.show（index）; } else if（this.chess [index] ['status'] == 1）{// opened if（this.chess [index] ['type'] == this.chestype [this.player]）{this.select（index）; }}} else {//選択されたチェスピースif（index！= this.selected ['index']）{//同じ位置に選択されていないif（this.chess ['status'] == 0）{// opened chess fiece.show（index）; } else if（this.chess [index] ['status'] == -1）{//空白の位置this.move（index）; } else {//他のチェスピース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））。 this.chess [index] ['status'] = 1; // if（this.selected！= null）{// clear $（this.getid（this.selected.index））。classname = ''; this.selected = null; } this.change_player（）; this.gameover（）; } // select chess chessclass.prototype.select = function（index）{if（this.selected！= null）{$（this.getId（this.selected ['index']））。className = ''; } this.selected = {'index'：index、 'chess'：this.chess [index]}; $（this.getid（index））。classname = 'onsel'; } // chess chessclass.prototype.move = function（index）{if（this.beside（index））{this.chess [index] = {'chess'：this.selected ['chess'] ['chess']、 'type'：thip.selected ['chess'] ['type']、 'bal'] 「ステータス」：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'] 'val'：this.selected ['chess'] ['val']、 'status'：this.selected ['chess'] ['status']}; this.remove（this.selected ['index']）; var killed = this.player == 1？ 2：1; $（ 'Grade_num' + killed）.innerhtml = parseint（$（ 'grade_num' + killed）.innerhtml）-1; this.show（index）; }} // chess chessclass.prototype.remove = function（index）{this.chess [index] ['status'] = -1; // empty $（this.getid（index））。innerhtml = ''; $（this.getid（index））。classname = ''; } / *チェックは * @paramインデックスチェスピースインデックス * @param selindex実行されたチェスピースインデックスが空になる可能性があります。空の場合、選択されたチェスのピースは読み取り */ 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またはcolunmは同じで、interval = 1 return true; } else {return false; }} / * check can kill * @param indexは破壊されたチェスピースインデックス * @param selindex実行されたチェスピースインデックスは空になる可能性があります。 if（this.selected！= null）{//選択されたチェスピースselindex = this.selected ['index']; } else {return false; }} if（this.chess [index] ['type']！= this.chestype [this.player]）{if（parseint（this.chess ['val']）== 7 && parseint（this.chess [index] ['val']）== 1）{// } else if（parseint（this.chess [selindex] ['val']）== 1 && parseint（this.chess [index] ['val']）== 7）{// 1を殺すことはできませんfalse; } else if（parseint（this.chess [selindex] ['val']）<= parseint（this.chess [index] ['val']））{// Small Kill Big Return true; }} falseを返します。 } // 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; // red $（ 'grade_img1'）。classname = 'img_on'; $（ 'grade_img2'）。classname = 'img'; }} // reset grad 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 = 'none'; $（ 'grade_res1'）。innerhtml = $（ 'grade_res2'）。innerhtml = ''; } // Game over Chessclass.prototype.gameover = function（）{if（$（ 'grade_num1'）。innerhtml == 0 || $（ 'grade_num2'）。innerhtml == 0）{//任意のチェスのピースは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'）; }}} // show 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 {// $（ 'grade_res1'）。innerhtml = $（ 'grade_res2'）。innerhtml = 'draw'; $（ 'grade_res1'）。classname = $（ 'grade_res2'）。classname = 'draw'; }} // Chess Can Can Action ChessClass.Prototype.Can_action = function（）{var chess = this.chess; for（var i = 0、max = chess.length; i <max; i ++）{if（chess [i] .status == 0）{//オープンしていないチェスのピースがtrue; } else {if（chess [i] .status == 1 && chess [i] .type == this.chestype [this.player]）{//開いたチェスのピースthis.can_kill（i-this.boardcols、i）））{// trueを返します。 } 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）&&（chess [i+this.boardcols] .status == -1 || this.can_kill（i+this.boardcols、i）））{// return true; } if（this.beside（i-1、i）&&（chess [i-1] .status == -1 || this.can_kill（i-1、i）））{//左return true; } if（this.beside（i+1、i）&&（chess [i+1] .status == -1 || this.can_kill（i+1、i）））{//右return true; }}}} falseを返します。 } / ** common function* / // get document.getElementby（id）function $（id）{this.id = id; document.getElementByID（ID）を返します。 } // get document.getElementsByTagname関数$ _TAG（name、id）{if（typeof（id）！= 'undefined'）{return $（id）.getelementsbytagname（name）; } else {return document.getElementsByTagname（name）; }} / * div show show and hided * @param id dom id * @paramハンドルショーまたは非表示 * / function disp（id、handle）{if（handle == 'show'）{$（id）.style.display = 'block'; } else {$（id）.style.display = 'none'; }} /* img preload* @param img画像配列がロードされる* @paramコールバックメソッド画像が正常に読み込まれた後* / function 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 Callback clearInterval（et）; callback（）;}}、200）; }完全なサンプルコードをダウンロードするには、ここをクリックしてください。
この記事の説明には、JavaScriptゲームデザインの全員が学習するための特定の参照値があると思います。