JavaScriptで将棋盤 その5
また少し進んだので報告してみます。
今回はやっと駒を動かせるようになりました。(取ったり成ったりはできませんが)
一度駒のあるマスをクリックすると、このように駒が選択された状態になります。
さらに空白のマスをクリックすると、
このように駒を動かすことができました。
せっかくなのでソースコードを貼ってみようと思います。
<html> <head> <title>shogi</title> <script type="text/javascript" language="javascript"> var piece; //駒の画像のIDを入れておく変数 var selectedFlg; //なんらかの駒が選択された状態かどうか var firstClickDan,firstClickSuji; //駒を選択するときにクリックしたマスの段と筋 あとで動かす先のマスにつかう変数も必要なのでFirst var selectedKoma; //選択された駒の種類 var board = []; //将棋盤の配列 //駒の種類を数字で表す C++のマクロっぽい表記(大文字)にした var OUT_OF_BOARD = 128; var EMPTY = 0; var FU = 1; var KY = 2; // ~中略~ var PROMOTED = 8; var TO = PROMOTED + FU; var NY = PROMOTED + KY; // ~中略~ var EFU = ENEMY + FU; var EKY = ENEMY + KY; // ~中略~ var SELECTED = 32; //盤を表示する var showBoard = function(){ var b = document.getElementById("board"); //"board"のIDを取得 for(var dan = 1; dan <= 9; dan++){ for(var suji = 1; suji <= 9; suji++){ var c = piece[board[dan][suji]].cloneNode(true); //駒画像の要素を複製 c.style.left = ((suji - 1) * 33) + "px"; //位置を調節 c.style.top = ((dan - 1) * 33) + "px"; b.appendChild(c); //"board"に駒画像のノードを追加 if(board[dan][suji] != EMPTY && board[dan][suji] != OUT_OF_BOARD){ //もしマスに駒があれば (function(){ var _dan = dan, _suji = suji; //danとsujiは1ずつ足されていくので覚えておく c.onclick = function(){ //クリックされたらこの関数が呼び出される //もし駒が選択された状態でなければ if(!selectedFlg){ board[_dan][_suji] = board[_dan][_suji] | SELECTED; //クリックされたマスにある駒の種類をSELECTEDにする firstClickDan = _dan; firstClickSuji = _suji; //クリックされたマスの段と筋を覚えておく selectedKoma = board[_dan][_suji] & ~SELECTED; //選択されたマスにある駒を覚えておく SELECTEDを除く必要はないはずだが念のため } //もし駒が選択された状態なら else{ board[firstClickDan][firstClickSuji] = board[firstClickDan][firstClickSuji] & ~SELECTED; //選択された状態の駒を元に戻す selectedKoma = EMPTY; //覚えておいた選択された駒の種類を消去する } selectedFlg = !selectedFlg; //フラグを更新 showBoard(); //盤の駒をSELECTEDにしたかもしれないので、盤を表示 }; })(); } if(board[dan][suji] == EMPTY){ //もしマスに駒がなければ (function(){ var _dan = dan, _suji = suji; c.onclick = function(){ //もし駒が選択された状態なら if(selectedFlg){ board[_dan][_suji] = selectedKoma; //クリックされたマスに、選択された状態の駒を置く board[firstClickDan][firstClickSuji] = EMPTY; //選択された状態の駒があったマスを空にする selectedFlg = !selectedFlg; //フラグを更新 showBoard(); //盤の駒が変更されたので、盤を表示 } }; })(); } } } }; //ページ読み込み時に以下の処理を実行 onload = function(){ //pieceにコマ画像のIDを入れておく piece = [ document.getElementById("cell") ,document.getElementById("sente_FU") ,document.getElementById("sente_KY") // ~中略~ ,document.getElementById("gote_UM_selected") ,document.getElementById("gote_RY_selected") ]; //boardの9×9の範囲はEMPTY、それ以外はOUT_OF_BOARD for(var i = 0; i <= 10; i++){ board[i] = []; for(var j = 0; j <= 10; j++){ board[i][j] = OUT_OF_BOARD; } } for(var i = 1; i <= 9; i++){ for(var j = 1; j <= 9; j++){ board[i][j] = EMPTY; } } //boardに駒を初期配置 board[1][1] = EKY; board[1][2] = EKE; // ~中略~ board[7][8] = FU; board[7][9] = FU; //盤を表示 showBoard(); }; </script> </head> <body> <div style="display:none"> <div id="cell" style="position:absolute;width:33px;height:33px;background-color:#000"> <img style="position:relative;top:1px;left:1px;width:31px;height:31px" src=画像ファイル名.png> </div> <div id="sente_FU" style="position:absolute;width:33px;height:33px;background-color:#000"> <img style="display:block;position:relative;top:1px;left:1px;width:31px;height:31px" src=画像ファイル名.png> </div> ~中略~ <div id="gote_RY_selected" style="position:absolute;width:33px;height:33px;background-color:#000"> <img style="display:block;position:relative;top:1px;left:1px;width:31px;height:31px" src=画像ファイル名.png> </div> <div id="gote_UM_selected" style="position:absolute;width:33px;height:33px;background-color:#000"> <img style="display:block;position:relative;top:1px;left:1px;width:31px;height:31px" src=画像ファイル名.png> </div> </div> <div style="position:relative"id="board"> </div> </body> </html>
ソースコードのはてなブログへの貼り方はこちら(はてなブログにソースコードを貼り付ける方法 - くりにっき)を参考にさせていただきました。
次は駒台を表示できるようにして、駒をとったら駒台に追加されるようにする予定です。
それでは。