iPhoneらしいゲームを作る
これまではiPhone 3G(以後iPhoneと表記)で動くゲームを作成しました。最初の「プチプチiPhone 3G」はiPhoneでなくてもブラウザでも動作します。2回目に作成した「隕石破壊ゲーム」は元はDashboard上で動いていたものを改良したものでした。どちらのゲームもiPhone以外でも動作するゲームでした。でも、せっかくiPhoneでゲームを作成しているのですから、iPhoneらしいゲームを作ってみたいところです。
iPhoneの特長の1つとして「タッチパネル」があります。そこで、今回はタッチパネルを活かしたゲームを作成してみます。どのようなゲームかと言うと「指定された座標に正確にタッチする」というものです。指定された座標とタッチした座標の差がポイントになります。今回のゲームは秒数など時間は競わずに、タッチした位置の正確さを競うものです。
Safariでタッチした座標を取得するには?
iPhone自体はタッチした位置を取得できるのは当然ですが、問題はSafariでタッチした座標を取得することができるかどうか、という点です。幸いiPhone用のSafariには独自のタッチ処理用のイベントと座標値のプロパティが用意されています。
画面全体をタッチした場合に指定した関数checkPoint
を呼び出すには以下のようにします。
document.addEventListener("touchstart", checkPoint, false);
touchstartはタッチが開始された時のイベントです。iPhone用のSafariには他にも以下のタッチイベントが用意されています。
touchstart | タッチ開始 (mousedownに相当) |
---|---|
touchend | タッチ終了 (mouseupに相当) |
touchmove | タッチ中 (mousemoveに相当) |
touchcancel | タッチキャンセル |
今回はタッチ位置だけなので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
で座標を取得します。
それではゲームの説明に入りましょう。