HTMLでゲームを作る

ふと思い立ってWindowsについてるソリティアで暇つぶししようとしたんです。

ソリティアって単純なわりには面白いですよね。

カードゲームなら俺でも作れるかしらと思ったんですよ。

今日日のゲームはプログラムを組むのも大変ですが、
それよりなにより、グラフィックスとかのリソースを用意するのが大変です。
プログラムを作るのが大変なのは、自分がプログラマだから別にいいんですよ。
画像を作るのは、自分が専門じゃないからなんですけど、なかなか辛いものがあるんですね。

その点、カードゲームなら、トランプの画像さえあればOKなので楽チンです。

じゃーネットからトランプの画像を探してくるかーとぐぐったんですが、
いやまてよ、
トランプならテキストベースでも作れるんじゃないかと気がついたわけです。

クラブ、ダイヤ、ハート、スペード、全てUnicode上に存在します。
これとHTMLでdivとかで囲って枠をつけてあげれば、トランプのカードが作れそうです。

で、さっそくやってみました。

カードのマークの位置を合わせるのに意外と苦労しましたが、それっぽくなりました。

カードができたところで、jQueryを使用して、カードをドラッグで移動できるようにしました。

マウスでカードをつかんでぐりぐり動かしてるとちょっと楽しいです。

せっかくHTML+JavaScriptで作るんだから、これをネットゲーにしたらいいんじゃないかと妄想が膨らんできました。
さっそく、Javaでサーブレットを作りTomcatで動かして、JavaScriptからデータをAJAXで送る実験をしてみました。

サーブレットなら、Eclipseで「動的Webプロジェクト」を選べば、ウイザードで一瞬で雛形ができます。
そこへAJAXでデータを送るのは、jQueryを使えば、数行プログラムを書くだけでした。
すげー簡単でいい感じです。

上の画像は、カードをドラッグすると、そのカードのIDと座標をサーバーへ通信しているところです。
というわけでとっかかりはできました。

あとはどんなゲームにするかを決めないといけません。
ネット対応なら、やっぱりネット対戦ができるようなゲームがよさそうです。