Quoridorを描画するJavaScriptコード


ボード自動生成

このサイトでは、Quoridorのボードを自動生成するJavascriptプログラムを使用しています。
自動生成されたボードをここではqf_boardと呼ぶことにします。"qf"は"quoridor fansite"の略だったりします

このサイトでは2つのプログラムが使用されています。
qf_board_viewer.js と、qf_freeboard.jsです。
どちらのプログラムもjQueryを使用しています(このサイトでは2.1.1を使っています)。
以下で各CSSと共にMITライセンスで配布しています。需要はほとんどないと思いますが…
それぞれについて簡単に解説します。

qf_board_viewer

このサイトの、戦略・戦術ページで使われているプログラムです。
盤面データもしくは棋譜データから、それぞれをボード上に再現して表示します。

qf_board_viewer.js と、qf_board_viewer.css をセットで使ってください。
使う際はjQueryのインポートを忘れないでください。
MITライセンスなのでそのまま使っても改変しても何やってもだいたい大丈夫です。
フリーボードの後につくったので、それなりにスッキリしたコードになってるんじゃないかなぁ…と思います。

使い方

実際に例を見てみましょう。

このコードで↓

<div class="qf_board_viewer" data-boardsize="7" data-flags="6" data-qfcode="j7oklAHMe1ICg"></div>

↑が表示できます。

このコードで↓

<div class="qf_board_viewer" data-boardsize="9" data-flags="13" data-qfcode="QuBAQEk6yVqpfcBgTio6WQr0JiSJKLLMYLb1vyYmBmRk"></div>

↑が表示できます(NEXTで再生できます)。

qf_freeboard

このサイトの、フリーボードのページで使われているプログラムです。
フリーボードを生成します。

qf_freeboard.js と、qf_freeboard.css がセットです。
一応こちらもMITライセンスですが、使う人なんているのかなぁ…

ソースを見れば分かりますが、このサイトのフリーボードのページではこのコード↓で表示させています。

<div class="qf_freeboard" data-boardsize="10"></div>

qf_code

qf_codeとは、盤面情報や棋譜情報を記録する独自のファイルフォーマット(バイナリデータ)を、Base64でエンコードしたものです。

その独自のファイルフォーマット(qf format)の仕様です。備忘録みたいなものです

qf format
bitdata解説
1State Y/N盤面データがあるかどうか
なければ0、あれば1
初期配置から始まる棋譜データの場合0となる
0ならば、以下のStateチャンクはなくなる
1Record Y/N棋譜データがあるかどうか
なければ0、あれば1
Recボタンで作成したデータは1になり、Snapボタンで作成したデータは0になる
0ならば、以下のRecordチャンクはなくなる
(n)State ChunkStateチャンク
盤面データがある場合のみ存在する
(n)Record ChunkRecordチャンク
棋譜データがある場合のみ存在する
State Chunk
bitdata解説
7white piece place白(先攻)の駒の場所
0-80の範囲の数字
左下を0、そこから右へ進み、一番端までいったら上へ進み、80までナンバリングした時のマスの数字
7black piece place黒(後攻)の駒の場所
0-80の範囲の数字
4white horizontal wall number白の横に置いた板の枚数
0-10の範囲
この数だけ、以下wall placeが続く
(6)wall place板の場所
0-63の範囲
マス目のナンバリングの方向はpieceの時と同じだが、右端と上端を除外するので63までになっている
板が1枚もない場合は存在しない
4white vertical wall number白の縦に置いた板の枚数
(6)wall place板の場所
4black horizontal wall number黒の横に置いた板の枚数
(6)wall place板の場所
4black vertical wall number黒の縦に置いた板の枚数
(6)wall place板の場所
2or8last move chunklast moveチャンク
最後に打った手の情報
10turn numberターン数
0-1023の範囲の数字
last move Chunk
bitdata解説
1white/black白か黒か
白なら0、黒なら1
1piece/wall駒か板か
駒なら0、板なら1
駒だった場合、以下のplaceは存在しない
(6)place板だった場合、その場所
Record Chunk
bitdata解説
10moves number手数
0-1023の範囲の数字
この数だけ、以下moveチャンクが続く
(4or8)move Chunkmoveチャンク
一手の情報
move Chunk
bitdata解説
1piece/wall駒か板か
駒なら0、板なら1
このビットによって、以下のチャンクが変わる
3or7move piece Chunk or move wall Chunk駒か板かによってチャンクが分かれる
move piece Chunk
bitdata解説
3direction 駒の動いた方向を0-7の数字で表現する
白(先攻)のスタート地点を手前として、奥に一歩進む方向を0とし、そこから時計回りに斜めも含めた8方向にナンバリングする
つまり、後ろは4、左斜め前は7になる
move wall Chunk
bitdata解説
1horizontal/vertical横に置いたか縦に置いたか
横なら0、縦なら1
6place置いた場所

このバイナリデータをBase64で文字列にエンコードしています。
しかし"="でパディングはしないので、必ず4の倍数になるということはありません。
フリーボードでINPUTボタンで入力する際、Base64の文字ではないものは("="も含めて)無視します。

テキストベースなら、面白い棋譜データがあった時にWebでもメールでも気軽に共有できそうだと考えたのが発端です。
その際に文字列が長いと鬱陶しいので、なるべくビット数が少なくなるように設計しました。そのため、処理系の実装が少し面倒なことになっています。

Stateの板情報の記録の仕方ですが、板の場所を1枚ずつ保存する方法と、全てのマス目において板があるかないかの情報を記録する方法の2通りが考えられます。
両方計算したところ、置かれた板が12枚より少ない場合は前者が、多い場合は後者がビット数が少なくなりました。
このサイトでは序盤の定跡を研究していきたいと思っていたので、前者を採用しました。

棋譜は1024手まで保存できるので、まず困ることはないでしょう。

バグがあったら

連絡して頂けると助かります。