黄昏より暗きもの、血の流れより赤きもの

黄昏より暗きもの、血の流れより赤きもの

自分の好きな事を好きなように書いて行きます。

○×ゲームをjavascriptで実装してみた

以前C言語で○×ゲームを書いた。今度はそれをJavaScriptで書き直してみた。

jQuery(JavaScript)について

欠点:多次元配列が使いにくい

まずC言語と違う点は多次元配列が使いにくいと言う事だ。今回の○×ゲームなどのゲームや画像などは配列を升目(座標)と対応付けさせて作業を行う事が多い。このため横幅をlとして座標(n,m)に対応する配列の添字(n*l+m-1)に置き換えて作業していかなくてはならない点が難しい。

利点:htmlと連携して、操作性の高いアプリケーションを設計できる

2つ目の利点はUIの設計が容易な点だ。他の言語よりもイベント処理を手軽に実装できる点だ。本アプリケーションでは各升目をクリックすると、○と×が打ち込まれる。このようにマウスが押されたときなどの振る舞いの事をイベント処理と言う。jQueryを使うとこのイベント処理が容易にできるのが素晴らしい。

例えばjQuery(セレクタ名).click(function(){});と打ち込むだけで、サイトのメニューなどの振る舞いを設定する事ができる。又ボタンなどはイメージを張れば良いし、動的に特定のhtmlを書き換えたいと言った場合はjQueryの、.text(),.html()。追加や削除は.append().remove()。動きが欲しいときは.animate()を使ってやれば良い。このように操作性に関わるような調整がコマンド一つでできる事が多いのもjQueryの魅力だ。と言う訳で早速ソースコードを紹介したい。

ソースコード

実行結果

URL:http://ryuichi64.daiwa-hotcom.com/page.html

2プレイヤー方式の○×ゲームとなっています。0〜15までの番号をクリックすると、先手の時は○、後手の時は×が表示されます。縦横斜めのいずれかの方向に○か×かがそろったら終了です。万一全部○か×が置かれた場合や、どちらかがそろった場合は、お手数ですがリロードの方よろしくお願い致します。