この記事の所要時間は約 4 分 です。
駒台を実装しようと思う。
前回までのプログラムだと、局面としてsfenデータで……
”lr6l/4k1g2/2+B2S1pp/ppp2Sp2/9/P1PpNPP2/1PGG4P/7R1/L1K5L w S4Pbgs3np 1”
と渡すと、以下のような表示になっていた。
前述のsfen形式のデータの”S4Pbgs3np”の部分は、実は持ち駒を表しているのだが、そもそも持ち駒の実装を進めてなかったが故に、この部分のデータがなかったことにされている……。
駒台の実装方針を考える
駒台の実装方針について、悩んでいたわけだが、本質的に言えば、盤上に駒を表示しているのと同じ方式でよいはずだ。
先手の持ち駒と後手の持ち駒を各々の配列に保持しておき、showBoardと同じタイミングでshowCapture関数(持ち駒を表示する関数)を呼べば、駒台上に持ち駒が配置されるわけだ。
イメージをつかむために、さっと、コーディングしてみたのが、以下だ。
var cb = []; //capture black(先手の駒台)
var cw = []; //capture white(後手の駒台)
//まずは、先手番の駒台のみを実装してみる
var showCapture = function() {
var black = document.getElementById("capture_black");
while(black.firstChild) {
black.removeChild(black.firstChild);
}
for(var i = 0; i < cb.length; i++){
var c = piece[cb[i]].cloneNode(true);
c.style.left = (5+(i) * 60) + "px";
c.style.top = (5+(i) * 64) + "px";
black.appendChild(c);
}
};
持ち駒の情報を格納しておく配列であるcbとcwは、グローバルに置いてあるため、onloadの中で、以下のように持ち駒を追加して、表示テストをしてみた。
cb.push(FU); cb.push(KI); cb.push(GI); cb.push(FU); showCapture();
とりあえず、持ち駒の座標データについては、要調整だが、それよりも駒の並びが”歩”、”金”、”銀”、”歩”と並んでおり、これだと見にくい。できれば、同じ種類の駒は近くに置きたい。
array.sortを利用する
持ち駒の情報は、配列に保持しているので、sortメソッドを使えばよい。
cb.push(FU); cb.push(KI); cb.push(GI); cb.push(FU); cb.sort(); showCapture();
この実行結果が以下のような感じだ。
配列が、”歩”、”歩”、”銀”、”金”の順に並び変わっていることがわかる。
しかしながら、JavaScriptの標準の比較関数は、比較の前に変数の型を調べるような仕様にはなっておらず、どんな場合でも要素を”文字列”として比較してしまうという特徴がある。
後々、駒データの定数を変更することがあった時にバグの原因になるかもしれないため、持ち駒配列のsortメソッドは、別途、コーディングしてしまいたい。（ついでに、表示も価値の高い駒から順に並ぶように変更してしまう）
プログラムコードは、以下のような感じだ。
cb.push(FU);
cb.push(KI);
cb.push(GI);
cb.push(FU);
cb.sort(function (a,b){
return b-a;
});
showCapture();
とりあえず、予想通りの結果になったので、あとは、どのように配置するか……というstyle設定の問題である。
以下、次号。
