リアルタイムWebハッカソンに参加してきた

node.jsでWebSocket動かして遊ぼうという素敵なイベント、リアルタイムWebハッカソン : ATNDに参加してきました。
まず、なんといってもめそさんが準備した資料が素晴らしく、大変勉強になりました。資料はリアルタイムWebハッカソンでハンズオンしてきました - 自分の感受性くらいから。node.jsの環境構築から具体的なサンプルの作り方までわかりやすくまとまっています。

で、タイトルのとおりハッカソンなので、上記資料にざっくり目を通してから@yoshikawa_tさんとなにか作ってみようかという話になりました。
ただ、いいアイディアが思い浮かばず、「ゲームとか」と考えたところでという、こちらもnode.js+WebSocket(Socket.IO)で動いているデモアプリを思い出しました。このSwarmationは、右側でお題が与えられて、そのお題の形になるようにマス目を塗り潰すというゲームです。一人一つしか持ちコマがないので、参加者の動きを予想して動かなければいけないというところがポイントです。かなり完成度が高くて、Socket.IOなのでIEでも動くようになっています。
で、これの影響をモロに受けて、マス目を取り合うゲームを考えました。
まず適当なマス目を用意して、クリックすると自分の色に反転させる。反転した状態が1列並ぶと自分が反転させていたマスの数だけポイントが入るという形を考えました。そこに複数人でリアルタイムに反転させあうという要素によって、相手の妨害をするといった戦略がでてきます。さらに自分が反転して置ける数に制限を設ければ、妨害だけでなく上手く協力もしないといけなくなってそこそこゲーム性が出てくるだろうと考えました。

で、できたのがこちら(クライアント側のコード)です。
os0x's
gist: 636371 — Gist

サーバー側はごくシンプルで、クライアントが送った位置情報を他のユーザーにそのまま通知するだけです。あとはそのデータで、クライアント側で現在の反転状況(自分のマス、他人のマス)を把握して、1列揃ったら消してポイント計算という処理を行っているだけです。
黙々と書いた甲斐あって、なんとか時間内にゲームとして成立させることができました。
あ、ちなみになるべくIEでも動くようにそれっぽく書いてあります(改めてみたらaddEventListener使ってたけど、onclickで良いケースだし)。折角のSocket.IOなので、IE6でも動かしたいですから。

反省

• 私はいつも通りクライアントサイドのJSを書いてただけで、node.jsにあんまり触れなかった…
• 同じテーブルの方とかともっと協力できればよかった

まあ、今回は3時間もなかったので仕方ないところも。ハッカソンならやはり半日はほしいかなと。

その後はLTがあってなかなか面白そうな話題が出てましたが、コードにコメントつけたりしてていまひとつ集中できず、LTのあたりは リアルタイムWebハッカソン ハンズオン編 - サイト更新停滞ちうっなどに。

全体としてはなかなかまとまった情報を得られなかった node.js についての理解が深められた良いイベントでした。ありがとうございました。