HTML5でスマホをコントローラにするゲームを作ってみた

カテゴリ:HTML5 2011年10月27日 09:00

Canvasゲームをカスタマイズ

ゲーム自体は以前作ったものをそのまま使いました。

今回作ったスマホコントローラ版

http://edo-m18.me:9000/

以前作ったものをカスタマイズして、弾を打つ部分と自機を移動する部分を、関連付けたスマホから操作できるようにしてみたものです。
これはあくまでアイデア、ってことで快適にプレイできるまでは作りこんでいません(; ´Д`)
ただ、特にプラグインなどを使わずともここまでできる、というのは非常に面白いなと思いました。

Node.jsを使って実装

今回、WebSocket部分はNode.jsを使って実装しました。
最近Node.jsにハマりすぎてプライベートではNode.jsしか触ってませんw
やはりサーバサイドとクライアントサイドが同じ言語、というのはとても実装しやすいですね。Node.jsおすすめです。
ちなみに最近、Node.js関連については別ブログで記事を書いてます。まだ全然記事数が少ないですが、興味がある方はぜひ。→ EBLOG Branch

機能説明

簡単に機能を説明すると、Node.jsのSocket.IOモジュールを使ってWebSocketを使えるようにします。
その後、Socket.IOのversion0.7? から追加されたnamespaceを使ってPCで見ている画面とスマホ画面を結びつけます。

最初にPCでアクセスするとスマホでアクセスするためのID入力が求められるので適当なアルファベットでIDを入力します。
するとそのIDを元にスマホでアクセスするURLが表示されるので、そのURLにスマホでアクセスします。

すると画面には「tab to shoot!」という文字しか出ませんが、タップで弾を発射、加速度センサーで自機の移動ができるようになります。
横向きに持ち、左右に傾けることで自機を動かすことができるようになっています。

若干タイムラグが発生しますが、ゲーム画面のコントローラとしてスマホを使うのは面白なーと思って作ってみました。
※まだ全然調整していないので、Androidでは動いてません。現状はiOSオンリーです。

この記事のカテゴリー一覧を見る⇒HTML5

  • このエントリーをはてなブックマークに追加

トラックバックURL

http://css-eblog.com/cgi-bin/mt/mt-tb.cgi/200