【ハウツー】

iPhoneゲーム自作工房5 - Googleマップ回転ゲームの作成

1 ジェスチャーの利用

 
  • <<
  • <

1/5

iPhone + Safariによるジェスチャー処理

iPhoneのSafariにはタッチされた時のイベントを取得することができます。このタッチ関係のイベントを使ってピンチイン/アウトや回転操作を行うためのプログラムを書くこともできます。が、実際にそのようなコードをJavaScriptで書くのは手間です。幸いiPhoneのSafariには、そのような処理(ジェスチャー)を検知するための仕組みとイベントプロパティが用意されています。今回は、回転させるジェスチャーを使って、ちょっとした回転ゲームを作成してみます。

今回はシンプルなゲームで指定した回転角度まで画像を回転させるだけのものです。指定した回転角度まで回転させるタイムを競います。普通の画像を回転させても良いのですが、ここではGoogleマップを回転させてみます。

正確に地図を回転させるゲーム

ジェスチャーイベント

Safariのジェスチャーに関するイベントは以下のものがあります。

gesturestartジェスチャー開始
gesturechangeジェスチャー中
gestureendジェスチャー終了

今回の場合、回転させるジェスチャーを取得しますが、使用するのはgesturechangeとgestureendイベントです。gesturechangeにより現在の回転角度を表示します(遅延描画が行われるためかリアルタイムに角度が表示されないことがあります)。

画像をいったん回転させた後、指を離してしまうとジェスチャーが終わってしまいます。そこでgestureendにより画像の回転角度を変数に保存しておきます。

あと、もう1つイベント処理を追加しておきます。これまではSafariの画面をドラッグまたはフリック(画面を指で払う)すると、Webページの画面がスクロールしてしまいました。このフリックによるスクロールを禁止するにはtouchmoveイベントを検知してデフォルトのイベントを処理しないようにします。「event.preventDefault()」とするとデフォルトのイベントが実行されなくなります。

コード01

        window.addEventListener("load", function(){
            document.addEventListener("gesturechange", checkRotate, false);
            document.addEventListener("gestureend", saveRotate, false);
            document.addEventListener("touchmove", function(){ event.preventDefault(); }, false);
        });
  • <<
  • <

1/5

インデックス

目次
(1) ジェスチャーの利用
(2) ボタンの設置と回転角度の設定
(3) ジェスチャーイベントを利用した処理
(4) Googleマップとの連動
(5) 完成コードと注意事項
関連キーワード

人気記事

一覧

新着記事

ロバート秋山が扮する「クリエイターズ・ファイル展」開催中
[20:56 9/27] シゴト
「ぼくは麻理のなか」完結巻で色紙当たる、押見修造のサイン会も
[20:47 9/27] ホビー
JR北海道、石北本線上川~白滝間10/1復旧 - 特急「オホーツク」も運転再開
[20:44 9/27] ホビー
子どものストレス、世帯所得によって原因に違い
[20:32 9/27] マネー
[映画興行成績]「君の名は。」がV5 累計興収は111億円を突破
[20:30 9/27] エンタメ