このページの本文へ

PROGRAMMING 古籏一浩のJavaScriptラボ ― 第90回

enchant.jsとジャイロセンサーで作るスマホゲーム

2012年07月19日 11時40分更新

古籏一浩

  • この記事をはてなブックマークに追加
本文印刷
js-labo

 iPhoneのSafariでは、JavaScriptを使って加速度センサーやジャイロセンサーを利用できます。本連載でも以前、iPhoneの加速度センサー/ジャイロセンサーを使ったGoogleマップの自動移動や水準器のサンプルを作成しました。

iOS 4.2の新機能で作るHTML5+JSアプリ
http://ascii.jp/elem/000/000/573/573478/

 iOS 5.0以前の加速度センサー/ジャイロセンサーのAPIはiOSの独自仕様でしたが、2012年3月にリリースされたiOS 5.1では、W3Cが標準化を進めている「DeviceOrientation Event」APIが実装されています。

 W3CのDeviceOrientation Eventは2012年7月現在、iOSだけでなくAndroidでも利用できます(4.0以降で対応)。iOS 5.1でW3C仕様に対応したおかげで、Android 4.0標準ブラウザ/Firefox/Chrome for Androidともに同じプログラムが利用できるようになりました。

 今回は、このDeviceOrientation Eventと、ゲームライブラリーとして注目を集めている「enchant.js」を使って、スマートフォン用のゲームを作成してみましょう。作成するのは、「スカッシュ」と「ブロック崩し」。いずれもアナログ的な動作を必要とするゲームで、傾きセンサーで操作するにはもってこいです。

 スカッシュは1人テニスと呼ばれるもので、ボールをパドルで跳ね返すだけのゲームです。パドルより下にボールが落ちてしまうとゲームオーバーになります。

スカッシュ
スカッシュ

 ブロック崩しはスカッシュにブロックを壊す要素を追加したもので、ボールがブロックに当たると壊れ、全部破壊するとステージクリアになります。全部ブロックを破壊したら再度ブロックが設置されて継続してプレイできるので、自分がミスをしない限りゲームオーバーにはなりません。

ブロック崩し
ブロック崩し

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

HTMLリファレンス誘導バナー

CSSリファレンスサイト誘導バナー

Webディレクター江口明日香が行く

ランキング