56将棋開発ブログ

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

JavaScriptで将棋盤 その10

ついにJavaScriptで将棋盤も10回目になりました。

今日は持ち駒の表示を変更してみました。


f:id:tetsuzuki1115:20140126182200p:plain


数字で表示するよりこっちのほうがなんとなくカッコいいですね。


あと昨日の記事の動画で、さもちゃんと動くみたいに話してましたが、

重大なバグがありました(笑)


なんと、持ち駒を使い切っても、持ち駒の表示が消えません。

それどころか持っていないはずの持ち駒が使えるというダメダメっぷり。

あほすぎてため息がでますね。


持ち駒を打ったときに、appendChildで追加した要素を削除していなかったため、そんなことになってしまいました。

数字のほうは、新たな数字の画像が上に表示されてしまうので気づかなかったんですね。

選択したときのカーソルはちゃんとremoveChildで削除しているんで気づいてもよさそうなもんですが。


とりあえず、

持ち駒の表示 : 持ち駒の画像をgetElementByIdで取得 持ち駒にappendChildで追加

盤に駒を打つ : removeChildで追加した要素をすべて削除 持ち駒の数を1つ減らす


というふうに変更しました。


f:id:tetsuzuki1115:20140126184744p:plain


この飛車を打つと、


f:id:tetsuzuki1115:20140126184804p:plain


ちゃんと持ち駒がなくなります。


持ち駒を打つと、removeChildで持ち駒の画像の要素がすべて削除されますが、

そのあとに持ち駒を表示するようにしているので、ちゃんと数が減ったあとの持ち駒が表示されています。



あとは成ったときのメッセージをもう少しいじろうかなと思っています。

それでは。