三目並べを作ろう
---------------- 目次 -------------------
1. 三目並べをCanvasとjQueryで作る
2. 誰でも勝てる三目並べ AI で遊ぼう
3. 誰にも負けない AI を実装する
------------------------------------------
1. 三目並べをCanvasとjQueryで作る
2. 誰でも勝てる三目並べ AI で遊ぼう
3. 誰にも負けない AI を実装する
------------------------------------------
1. 三目並べをCanvasとjQueryで作る
三目並べは小規模ながら簡単なルールを持つボードゲームであるため,プログラミング入門として良く作られる。実際,HTML上で動く三目並べは,JavaScript,Java,Ruby で多く作られている。中でも JavaScript は初心者向きであり,多くの人が最初に取り組もうとすると思われる。一方,HTML5 でサポートされた Canvas は,美しい図形を容易に描くことができ,位置を座標で指定できるため,リバーシや囲碁のような大きな盤面にも容易に拡張できる。そこで,三目並べの作成に Canvas を使いたいと思うのは自然であろう。
JavaScript のボタンやテーブルを使うときは,マウスボタンのクリックイベントに対して,関数の引数にオブジェクトを取得することができ,そのオブジェクトに対する処理を順次記述していくことになる。それに対して,HTML5 Canvas を使うときは,マウスボタンのクリックイベントに対して,jQuery のカスタム trigger を発行してそれを受信した時,ユーザの処理を記述する手順が必要となる。
詳細は,解説記事(プログラム開発経緯)を参照されたい。
実際の動作を見るには,ここ(対局)をクリックされたい。
このプログラムコードは,次のようになっている。