【ハウツー】

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) 完成コードと注意事項
関連キーワード

人気記事

一覧

新着記事

島津製作所、GC-MS/MSのハイエンドモデル「GCMS-TQ8050」を発売
[07:00 8/29] テクノロジー
食前の野菜ジュース摂取に「ベジタブルファースト」と同等の効果を確認
[07:00 8/29] ヘルスケア
銀行員は見た! 第64回 銀行員のワリカン精度
[07:00 8/29] マネー
これはかわいい!「うえのの森のパンやさん」にパンダパンやうさぎパン登場
[06:30 8/29] 趣味
安住アナ、髪を切った綾瀬はるかをべた褒め「私の歴史で一番かわいい」
[06:00 8/29] エンタメ