将棋盤をHTML/CSSで構成し、駒をJavaScriptで動かしてみる。

趣味で英語の将棋入門サイトをホストして5年くらい経つ。 駒の動きとか手筋、などをみせるのに過去ネット上で入手できる色々なアプリに世話になってきた。一番お世話になっているのが柿木さんのkifu for Flash で、定跡の紹介などは、このアプリケーションが欠かせない。 他にもユモケンさんのFlashを使った将棋盤を使って歩の手筋の紹介などをしてきた。 数年前に簡単な詰め将棋集をつくるのにBCM将棋で画像を生成し、これを順次表示して詰め手順を示すしくみを当時覚えたてのJavaScriptで書いてみた。 ただそのときわかったのだが、手数ごとの画像をいちいちセーブしてそれを組みたてる、というのはJavaScriptを使っていても結構手間がかかる。 今回駒職人1さんのサイトからCreative common license による駒と将棋盤の画像が入手できたのでこれを機会に初期の駒配置と動きのデータをJavaScriptファイルに書いておけば、それをなぞって実行してくれるようなしかけを作ってみた。

一応うごくようになったので、ここに公開しておくことにする。

特徴としては

駒の配置をCSSで処理しているということで、具体的にいうと たとえば先手の銀を34におきたい場合、銀のイメージファイルがSgin.png とすると

<img  src=”Sgin.png” class=”koma c3 r4″ alt=”” /> というようなイメージエレメントをJavascriptで動的に生成して将棋盤の3四の位置に銀を表示させる、というような手法をとっている。

動くサンプルをここにおいておく。 また、3年経つと何をやっているのかわからなくなる、というのが前回の経験でよくわかったので少し詳しい説明を順次ここに書きのこしておくことにする。 誰かの参考になればうれしいし、もっと経験のある方から助言をいただけるとありがたい。

ねらい: サイトの教材作成に使えるような動く将棋盤
データのエラーチェックなどはつけない(自分でしか使わないので)
前もって用意しておいたデータファイルをもとに初期配置およびその後の駒の動きを表示できる
CSSとJavaScript、HTMLの3種の神器のみで記述、JavaScriptはJqueryLibraryも使用

上記のページにはHTML記述に余計なものは入れていないので、ブラウザーの開発ツールを使って二つのJSファイルの中身とCSSファイルの中身も一緒に見てもらえれば、それなりにコメントも入れたので、ほぼ全容がつかめると思う。

 

Leave a Reply

Your email address will not be published. Required fields are marked *

Time limit is exhausted. Please reload the CAPTCHA.

This site uses Akismet to reduce spam. Learn how your comment data is processed.