iPhoneらしいゲームを作る

これまではiPhone 3G(以後iPhoneと表記)で動くゲームを作成しました。最初の「プチプチiPhone 3G」はiPhoneでなくてもブラウザでも動作します。2回目に作成した「隕石破壊ゲーム」は元はDashboard上で動いていたものを改良したものでした。どちらのゲームもiPhone以外でも動作するゲームでした。でも、せっかくiPhoneでゲームを作成しているのですから、iPhoneらしいゲームを作ってみたいところです。

iPhoneの特長の1つとして「タッチパネル」があります。そこで、今回はタッチパネルを活かしたゲームを作成してみます。どのようなゲームかと言うと「指定された座標に正確にタッチする」というものです。指定された座標とタッチした座標の差がポイントになります。今回のゲームは秒数など時間は競わずに、タッチした位置の正確さを競うものです。

指定した座標をタッチする。タッチした座標値との誤差を表示。10回繰り返すとゲームオーバーとなる

Safariでタッチした座標を取得するには?

iPhone自体はタッチした位置を取得できるのは当然ですが、問題はSafariでタッチした座標を取得することができるかどうか、という点です。幸いiPhone用のSafariには独自のタッチ処理用のイベントと座標値のプロパティが用意されています。

画面全体をタッチした場合に指定した関数checkPointを呼び出すには以下のようにします。

document.addEventListener("touchstart", checkPoint, false);

touchstartはタッチが開始された時のイベントです。iPhone用のSafariには他にも以下のタッチイベントが用意されています。

今回はタッチ位置だけなのでtouchstartイベントを捕捉して指定された座標値との比較を行います。

タッチされた座標はevent.touches[0].pageXとevent.touches[0].pageYで取得することができます。touches[0]の0は同時にタッチされることもあり、その際にはevent.touches[1].pageXのように参照番号を指定して座標値を取得することができます。今回の場合はタッチされるポイントは1つだけなのでevent.touches[0].pageXとevent.touches[0].pageYで座標を取得します。

それではゲームの説明に入りましょう。