JavaScript碁盤を書きました。
- 実行
- ソースコード
- https://github.com/misohena/js_igo
最近囲碁クエストにはまっているのですが、ブラウザ版には終局後の検討機能がありません。検討機能は終局後に巻き戻して途中から自分で好きに石を並べられるモードです。終局後に「あそこは何かあったんじゃないかな」「防ぐ手はなかったかな」などと思うことは良くありますが、ブラウザでプレイするとそれができません。Android版にはちゃんと検討機能がありますし過去の対局を振り返って検討することもできるのですが、デスクで作業しているときにいちいちスマホに手を伸ばしたくありません。
幸い棋譜(SGF)のエクスポート機能(ブラウザのテキスト領域に表示してコピーできる)はあるので、何か適当なソフトで読み込めば検討はできます。CGobanを入れてみたのですが、コピーしたSGFテキストを一度ファイルに保存してから読み込まなければならず面倒です。同じブラウザでSGFをペーストして読み込める碁盤があれば便利だなと思ったので作ることにしました。同じようなものは探せばいくらでもあるみたいですが、探すのも面倒ですし作るのも勉強になりますので。
基本的なロジックは10年以上前に作ったものがあったので流用しつつ現代風にアレンジ&機能追加しました。
盤面のデータ構造はUint32Arrayに1交点2ビットずつ詰め込む形を採用。9路盤を2*9*9=162ビット、162/32=5.0625で6dwords(24バイト)で表現出来ます。最小を目指すなら3(空点、黒、白)の倍数で記録していくべきなのですがさすがにそれはやりすぎかなと。盤外を表す点を用意すべきか等色々トレードオフがあってよく分からないのですが、盤面を沢山複製して保持するときにできるだけ小さい方がいいだろう、ということで。ハッシュも計算しやすそうですし。ただ、今回の用途までならどうやっても問題なし。
画像で表示するのも馬鹿らしいのでSVGで表示。グラデーションと影をつけてまあまあの見た目になりました。
履歴は最初からツリー構造を採用。巻き戻してから他の場所に打ったときは別のノードを作って記録します。分岐はA, B, C,…と盤面に表示できるようにしました。他のツールのようにツリー構造全体を図で表示出来たらかっこよかったのですが、これでも十分実用にはなります。
SGFインポート/エクスポート機能は今回の目的では必須。SGFフォーマットのページを見たらEBNFが書いてあったのでそれを元に手書きで解析器を作成。プロパティは、囲碁クエストのSGFを読むだけならSZ, B, Wくらいに対応すれば十分。後から詰碁を表示したいと思ってPL, AB, AW, AE, C, その他マーク等にも対応しました。
詰碁に対応するためにコメント機能、フリー編集機能、先番設定機能を追加。
一応スマホでも使えるようにタッチイベントに対応。19x19はさすがに小さいですね。ボタン類も一緒に小さくなってしまうので盤面部分だけ拡大縮小出来るようになるとよいのですが……。(→追記:対応しました)
あ、結果の判定機能はありません。死活判定しなければならないので難しいですよね……。死に石を指定出来るようにするとか、純碁みたいに全部打ち切るなら判定出来るのですが……。今後の大きな課題です。
純碁と言えば王銘エン先生の「こんなに面白い 世界の囲碁ルール」は面白かったです。オススメ。
ちなみに囲碁クエストをはじめたのは、知り合いが将棋ウォーズをやっていたからです。将棋は子供の頃に父親にボコボコにされたトラウマがあるのでやらないことにしているのです。なので囲碁ウォーズを試してみたのですが、Android版アプリの出来がすこぶる悪い。何回やっても起動しなくなるのです。時々思い出したようにすんなり起動するのですが、アプリを終了するとまた起動しなくなります。何が原因なのかまったく分かりません。調べてみると囲碁クエストという別のアプリの方が安定しているようなのでそちらをはじめました。
どちらもメインは9路盤のようです。19路のオンライン対局は大変なのでとてもやる気が起きませんが、9路なら短時間でプレイできるのでオススメです。
「一問一答! 囲碁・9路盤の手筋 ~基本定石からヨセまで~ (囲碁人ブックス)」という本も買ってみたのですが、これはちょっと難しいですね。難易度が低い問題が分からなくて気を落としていたら難易度が中くらいのものがあっさり分かってしまったり。巻末の引き分け定石は参考になります。手順番号の着いた棋譜を脳内再生するのは苦手なのですが、今回作った碁盤を使って勉強してみようと思います。
Web上も探すと9路の情報が結構ありますね。Youtube動画もあります。
[…] SVGといえば少し前にJavaScriptでSVGを使った碁盤を作ったところだったので、SVGでの碁盤の表現方法はすでに分かっていました。なので基本的な考え方はこれを踏襲してEmacs Lisp上で実装し直すことにしました。 […]