無職のプログラミング

チマチマと囲碁定石勉強用プログラムを作っているのだが、定石データを何らかの形式で管理しなければならない。
囲碁の棋譜として広く使われているSGF(Smart Game Format)を使ってみよう。

SGFで記述された定石データを解析するため、parser(構文解析プログラム)を作る必要がある。
既存のプログラムを探したところ、SGFを扱っているプログラムの一覧を見つけた。
Sensei's Library: Smart Game Format
JGo Board がJavaScriptで書かれている。ライセンスは Creative Commons(CC BY-NC 3.0) だ。

ソースコードを読んだが今回の用途とは微妙に合わないので、これを参考にしてSGF parserを作ることにした。
サンプルデータを解析できるぐらいのものはできたが、まだ公開できる状態ではない。

作ってみてわかったが、SGF parserはあまり軽くない。定石データは、parser解析結果のデータで管理しようかと思っている。
今回作ったSGF parserは、定石登録画面で使うことにしよう。

囲碁定石勉強用プログラムを作ろうとしたのだが、それ以前に碁盤を表示したり碁石を置くプログラムを作らなきゃいけない。
そこで、以下の機能を提供する囲碁ライブラリをJavaScriptで作成した。
・画像を使わず、HTML5 Canvasで碁盤と碁石を描画。碁盤は5路盤から19路盤までをサポート。
・碁盤に石を置く。
・取られた石を消去。
・着手禁止点判定、コウ判定。

囲碁ライブラリの使用サンプルも作って公開した。
JavaScript囲碁サンプル | 無職のHTML5 Canvas

excanvas.js を使うと動作が遅いので、IEではFlashCanvasを使って描画している。FlashCanvasだと碁石が歪んでいるように見えるが気にしない。

ソースコードはgithubで公開したが、需要あるのだろうか。
mimami24i/jsIGO - GitHub

囲碁の定石を少々勉強しているのだが、勉強用フリーソフトが微妙に使いづらい。
そこで、囲碁定石勉強用プログラムを自分で作ってみることにした。

JavaScriptのライブラリはないかなとちょっと探したが、'Go'や'Igo'で検索すると囲碁と全く関係ないプログラムがヒットする。
ライセンスが明確なソースコードは見つけられなかったので、囲碁プログラム 勝也 と コンピュータ囲碁のページを参考にして自分で作ることにした。
定石勉強用なので、基本編だけ読めばいいはず。

とりあえず、HTML5 Canvasで碁盤と碁石を描くことができた。

5路盤～19路盤まで対応できるように作ったので、星の座標を求めるところでちょっと時間がかかった。

次はイベント処理を実装して石を置けるようにしよう。
先は長い。まともに使えるものを作ることができるだろうか。

先日公開した英単語のsynonym(類義語)をタイピングするゲームに機能追加をした。
主な追加は以下の２点。

・問題を追加し選択可能にした
ネットで見つけた「高校受験対策英単語」みたいなのから抽出して問題を作成したのだが、かなり時間がかかったのでレベル２までしか作っていない。
高校受験ってこんなに難しい単語使ってたっけ？と作りながら思った。

問題の取得はAjaxで行うようにした。大した量じゃないのでソースに直書きでもよかったんだけど。
久しぶりのAjaxだったので、「ダブルクォートがPythonで出力時にシングルクォートに変換されてJSONパースエラー」でちょっとハマった。実際のデータはシングルクォートなのに、Firebugで取得データを見るとダブルクォートになっていたので、パースエラーの原因特定に時間がかかった。

・音を出せるようにした
他のプログラムと共有可能な音出力管理クラスを作成した。HTML5 Audioをベースとしているが、ライブラリを使用してIEでも音を出せるようにしている。
音出力管理プログラム： misound.js （文字コードはUTF-8）

ゲーム中に音量を変えられるように、メニュー画面とゲーム画面に音量選択ラジオボタンを設置した。
一方の選択結果が他方にもちゃんと反映されるようにしたが、コードが複雑になってしまった気がする。


さて次は何を作ろうか。サーバーサイドのプログラミングをしたい気がするが、作りたいものが思いつかない。

英単語のsynonym(類義語)をタイピングするゲームを作った。

Synonym Typing Game | 無職のHTML5 Canvas


流れてくる英単語の中から、synonymを選んでタイプするだけのゲーム。
英語の勉強なら別にタイプする必要無いな と自分でプレイしてみて思った。タイピングの練習にもならないし。
そもそも何でこれを作ろうとしたのか、自分でもよくわからない。

今後やりたい機能追加
・問題を追加する
・音を出す

まずは問題を追加するか。
問題は辞書サイトを利用して自分で作っているのだが、これが結構時間かかる。
正解以外の単語を深く考えずに選べば簡単なのだが、色々とこだわるから時間を食ってしまう。

先日機能追加したチンチロリンのゲームを、ちょこちょことテストしている。
function単位の単体テスト以外に、自動実行させて動作確認するテストも行った。

せっかくなので、QUnit+jQueryで作った自動実行テストプログラムをアップした。
ccrmain.js full action Test

(ページを開くといきなり動き出します。HTML5 Canvasをサポートしていないブラウザでは正しく表示されません。
テストシナリオが崩れるので、ゲームのボタンは押さないでください)
右側にテスト結果が表示される。正常なら青になる。

テストを実行するJavaScriptソースは以下。
ccrActionTest.js (文字コードはUTF-8)

テストプログラムの流れを簡単に解説する。
1. $(window).load の実行を待つ
asyncTest("wait for onload", function() {...}); の部分
asyncTest()で、$(window).load が実行されるまで待つ。
asyncTest()でのイベント処理テストについては、QUnit & jQuery でイベント起動処理のテストを行う を参照。

2. ランダム処理部分を上書き
test("replace method", function() {...}); の部分
最初の親とサイコロの目はランダムに決めている。
シナリオに従って動作するよう、該当メソッドを上書きしている。

3. サイコロを振って、振り終わるのを待ってスコアチェック
jQueryのclick()などでイベント発行してサイコロを振る。
asyncTest()で、サイコロを振り終わるまで待つ。
次の親がプレイヤー(3Dサイコロ)のときは処理が勝手に進んでしまうので、asyncTest()内でメインループを止める処理を実行して処理を止めている。

今回のテストプログラムではスコアをチェックしているだけで、Canvasの表示結果は目視でチェックしている。
getImageDataなどを使ってCanvasの表示内容をチェックできそうだが、そこまでする気にはならない。
「asyncTest()内でメインループを止める処理を実行」は、ゲームの自動実行テストにいろいろと使えそうだが、clearIntervalなどが発行されるまでタイムラグがあることを考慮する必要がある。

以前チンチロリンのゲームを作ったのだが、賭金固定なのでゲーム性が全くなかった。
ゲームに近づけようと、賭金を指定できる機能を追加した。

勝手にチンチロリン | 無職のHTML5 Canvas

キーボード入力以外にスライダーで賭金を指定できるようにした。
毎回賭金を指定するのが面倒なので、賭金固定機能も作った。

できることは賭金を指定するだけだが、賭金を高額にすると即破産なのでちょっとドキドキする。