qf board

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ライセンスなのでそのまま使っても改変しても何やってもだいたい大丈夫です。
フリーボードの後につくったので、比較的スッキリしたコードになってるかもしれません。

使い方

• 画像は一切使っていないので、インポートするのはcssとjsのみです。
  色等をカスタマイズしたい場合はcssのそれっぽいところをいじってみてください。
  
• "qf_board_viewer"というクラスを持ったdiv要素を探して、その中に生成したボードの要素を全て流し込みます。
  複数あれば複数のボードが生成されます。
  たくさんつくっても読み込みが遅くなることはほとんどありません。
  
• 以下で説明するdata属性の指定を3つ必要とします。
• data-boardsizeでボードのサイズを指定します。
  この数字は、板の厚さ(マスとマスの間の距離)を定めています。10ならその部分が10pxということです。この数字をベースにしてボード全体のサイズを算出しています。
  この数字をnとすると、ボードサイズは48n*48n(px)の正方形となります。その下に情報バーがある場合は高さが6n増え、棋譜データを再生する場合はボタン表示のため横幅が10n増えます。
  1以上の整数で指定してください。
  ブラウザの最小フォントの関係上、ボード下部の情報バーと右のBACK, NEXTボタンを表示する場合は、ある程度(4, 5ぐらい)以上のサイズでないと、文字が潰れて表示される可能性があります。
  指定を省略すると、10として作成します。
  
• data-flagsではボードの各種表示フラグを指定します。
  

  ボードの上下反転	LastMoveハイライト表示	先攻後攻の板の無区別	ボード下部の情報バー
  8	4	2	1

  その機能が必要ならその数字を足して(不必要ならば足さないで)、その合計値を指定してください。
  例えば、「上下反転なし、ハイライト表示あり、板無区別あり、情報バーあり」なら、0+4+2+1=7 になります。
  指定を省略すると、5として作成します。
  
• data-qfcodeにはqf_codeを入力します。
  qf_codeについては下で別個に説明していますが、端的に言うとバイナリのデータを文字列として表現したものです。
  フリーボードで簡単に出力できます。
  盤面データなら盤面モードに、棋譜データなら棋譜再生モードに、自動的に切り替えて表示されます。
  棋譜再生モードの場合、右側にBACKとNEXTの2つのボタンが付きます。
  適切なqfフォーマット形式の文字列が指定されると暗黙の了解をしています。適正ではない文字列を指定した場合、変な表示になると思います…。
  

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

このコードで↓

<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ライセンスです。

• 見切り発車で考えながらつくったので、なかなかのスパゲティコードに仕上がっています。
  読むことや改変しようとすることはあまりオススメしません。
  
• 単独のページで使うことを想定しているので、qf_board_viewerと一緒に使うと干渉するかもしれません。
  確認はしていませんが、多分cssの同じクラス名などが干渉すると思われます。
  
• viewerの方に比べて機能が多い上に、コードも無駄が多いので、少し重いです。
  
• "qf_freeboard"というクラスを持ったdiv要素を探して、その中に生成したボードの要素を全て流し込みます。
  data-boardsizeにボードのサイズを指定します。
  

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

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

qf_code

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

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

qf format
bit	data	解説
1	State Y/N	盤面データがあるかどうか なければ0、あれば1 初期配置から始まる棋譜データの場合0となる 0ならば、以下のStateチャンクはなくなる
1	Record Y/N	棋譜データがあるかどうか なければ0、あれば1 Recボタンで作成したデータは1になり、Snapボタンで作成したデータは0になる 0ならば、以下のRecordチャンクはなくなる
(n)	State Chunk	Stateチャンク 盤面データがある場合のみ存在する
(n)	Record Chunk	Recordチャンク 棋譜データがある場合のみ存在する

State Chunk
bit	data	解説
7	white piece place	白(先攻)の駒の場所 0-80の範囲の数字 左下を0、そこから右へ進み、一番端までいったら上へ進み、80までナンバリングした時のマスの数字
7	black piece place	黒(後攻)の駒の場所 0-80の範囲の数字
4	white horizontal wall number	白の横に置いた板の枚数 0-10の範囲 この数だけ、以下wall placeが続く
(6)	wall place	板の場所 0-63の範囲 マス目のナンバリングの方向はpieceの時と同じだが、右端と上端を除外するので63までになっている 板が1枚もない場合は存在しない
…	…	…
4	white vertical wall number	白の縦に置いた板の枚数
(6)	wall place	板の場所
…	…	…
4	black horizontal wall number	黒の横に置いた板の枚数
(6)	wall place	板の場所
…	…	…
4	black vertical wall number	黒の縦に置いた板の枚数
(6)	wall place	板の場所
…	…	…
2or8	last move chunk	last moveチャンク 最後に打った手の情報
10	turn number	ターン数 0-1023の範囲の数字

last move Chunk
bit	data	解説
1	white/black	白か黒か 白なら0、黒なら1
1	piece/wall	駒か板か 駒なら0、板なら1 駒だった場合、以下のplaceは存在しない
(6)	place	板だった場合、その場所

Record Chunk
bit	data	解説
10	moves number	手数 0-1023の範囲の数字 この数だけ、以下moveチャンクが続く
(4or8)	move Chunk	moveチャンク 一手の情報
…	…	…

move Chunk
bit	data	解説
1	piece/wall	駒か板か 駒なら0、板なら1 このビットによって、以下のチャンクが変わる
3or7	move piece Chunk or move wall Chunk	駒か板かによってチャンクが分かれる

move piece Chunk
bit	data	解説
3	direction	駒の動いた方向を0-7の数字で表現する 白(先攻)のスタート地点を手前として、奥に一歩進む方向を0とし、そこから時計回りに斜めも含めた8方向にナンバリングする つまり、後ろは4、左斜め前は7になる

move wall Chunk
bit	data	解説
1	horizontal/vertical	横に置いたか縦に置いたか 横なら0、縦なら1
6	place	置いた場所

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

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

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

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

バグがあったら

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

back	top