56将棋開発ブログ

5×6マスのミニ将棋、「56将棋」で遊べるものをいろいろ開発してます。

JavaScriptで将棋盤 その5

また少し進んだので報告してみます。

今回はやっと駒を動かせるようになりました。(取ったり成ったりはできませんが)


f:id:tetsuzuki1115:20140114215449p:plain

一度駒のあるマスをクリックすると、このように駒が選択された状態になります。

さらに空白のマスをクリックすると、


f:id:tetsuzuki1115:20140114215558p:plain

このように駒を動かすことができました。


せっかくなのでソースコードを貼ってみようと思います。

<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>

ソースコードはてなブログへの貼り方はこちら(はてなブログにソースコードを貼り付ける方法 - くりにっき)を参考にさせていただきました。


次は駒台を表示できるようにして、駒をとったら駒台に追加されるようにする予定です。

それでは。