三目並べを作ろう

1.   三目並べをCanvasとjQueryで作る

三目並べは小規模ながら簡単なルールを持つボードゲームであるため,プログラミング入門として良く作られる。実際,HTML上で動く三目並べは,JavaScript,Java,Ruby で多く作られている。中でも JavaScript は初心者向きであり,多くの人が最初に取り組もうとすると思われる。一方,HTML5 でサポートされた Canvas は,美しい図形を容易に描くことができ,位置を座標で指定できるため,リバーシや囲碁のような大きな盤面にも容易に拡張できる。そこで,三目並べの作成に Canvas を使いたいと思うのは自然であろう。

JavaScript のボタンやテーブルを使うときは,マウスボタンのクリックイベントに対して,関数の引数にオブジェクトを取得することができ,そのオブジェクトに対する処理を順次記述していくことになる。それに対して,HTML5 Canvas を使うときは,マウスボタンのクリックイベントに対して,jQuery のカスタム trigger を発行してそれを受信した時,ユーザの処理を記述する手順が必要となる。
詳細は,解説記事(プログラム開発経緯)を参照されたい。

実際の動作を見るには,ここ(対局)をクリックされたい。

このプログラムコードは,次のようになっている。


JavaScript(初版),  JavaScript(改定)
先頭へ戻る