HTML5 の Canvas 上でボールをコロコロ for iPhone

phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです.

Pocket

以前, HTML5 の Canvas 上でボールがコロコロするプログラムを作りました. iPhone の傾きを JavaScript で取れたので iPhone 用に修正してみました. iPhone を傾けるとボールの転がる方向が変わります.

DEMO And DATA

デモはこちらから見ることができます. iPhone を傾けると, 画面が回ってしまうのでできれば画面をロックして見てみてください. また, Safariのメニューから”ホーム画面に追加”してホーム画面から起動するとフルディスプレイで見ることができます.

データはここからダウンロードできます.

主な変更点

下記は以前のコードから iPhone 用に変更した箇所です.

index.html

headタグに下記の2行を追加. ホーム画面から起動した際にフルディスプレイにし, キャッシュを有効する設定です.

<meta name="viewport" content="width=device-width, user-scalable=no" /> 
<meta name="apple-mobile-web-app-capable" content="yes" /> 
    

script.js

preventDefault()を実行することで, デフォルトの処理(タッチスクロール)をオフにしています.

/**
 * タッチスクロールをできないようにする
 */
canvas.addEventListener('touchstart', function(e){
    e.preventDefault();
});
canvas.addEventListener('touchmove', function(e){
    e.preventDefault();
});
    

加速度変更時に重力の方向を変更する

/**
 * iPhone の加速度変更時イベントをセット
 */
var devicemotion_timer = 0;
window.addEventListener('devicemotion', function(e){
    // なぜか最初吹っ飛ぶことがあるのでタイマーを付けておく
    if (devicemotion_timer < 32) {
        devicemotion_timer+=1;
        return ;
    }
    var gravity = e.accelerationIncludingGravity;
    GRAVITY.set(gravity.x, -gravity.y, 0);
    
    GRAVITY.normalize();
    GRAVITY.mul(2.0);
});
    

次は, 9leapが開催中なので「enchant.js」を使って作ったゲームについて書こうと思います.

TRACK BACK URL

POST COMMENT

メールアドレスが公開されることはありません。

COMMENT