傾きセンサーに対応する
サンプル1で作ったスカッシュゲームはカーソルキーを使って操作しますが、スマートフォンにはカーソルキーがありません。そこで、iOS/Android共通で使える傾きセンサーを利用して操作できるように改良します。
傾きセンサーが傾きを検知すると、windowオブジェクトのdeviceorientationイベントが発生します。イベント発生時にイベントハンドラーに渡されるイベントオブジェクトのプロパティに傾きが入ります。
| alpha | Z方向の傾き |
| beta | Y方向の傾き |
| gamma | X方向の傾き |
※傾きの方向はW3Cのドキュメント（http://dev.w3.org/geo/api/spec-source-orientation.html#deviceorientation）を参照。
傾きの値は角度で返されますので、そのままgame.inputオブジェクトのプロパティに代入して利用します。ここではanalogXというプロパティに傾きの角度を入れます。また、どのくらい傾いているかが分かるように、傾きの角度をラベルで表示します。
傾きセンサーの処理は以下のようになります。
window.addEventListener("deviceorientation", function(evt){
var x = evt.gamma; // 横方向の傾斜角度
game.input.analogX = x;
sensorLabel.text = game.input.analogX;
}, false);
センサーで取得した値を使ってパドルを移動させる処理を作ります。角度を適当な値（ここでは4にしました）で除算し、パドルのX座標に加算するだけのシンプルな処理です。
var n = game.input.analogX / 4;
pad.x = pad.x + n; // パドルを左に移動
これでiPhone/Android（4.0以降で対応）で操作できるスカッシュができました。実際のプログラムはサンプル2です。
スマートフォンを横に傾けるとパドルが移動する。大きく傾けるとパドルはすばやく動く。画面右上には傾きの角度が表示される
■サンプル2
enchant(); // ライブラリーの初期化
window.onload = function(){
var game = new Game(240, 320); // 240×320画面(Canvas)を作成
game.fps = 30; // フレームレートの設定。30fpsに設定
game.preload("images/pad.png","images/ball.png"); // 画像データをあらかじめ読み込ませる
game.rootScene.backgroundColor = "blue"; // ゲームの背景色を青色に設定
game.score = 0; // スコアを入れる変数を用意する
// スコアを表示するラベルを作成
var scoreLabel = new Label("SCORE : 0");
scoreLabel.font = "16px Tahoma";
scoreLabel.color = "white";
scoreLabel.x = 10; // X座標
scoreLabel.y = 5; // Y座標
game.rootScene.addChild(scoreLabel);
// 傾きを表示するラベルを作成
var sensorLabel = new Label("0");
sensorLabel.font = "10px Tahoma";
sensorLabel.color = "white";
sensorLabel.x = 200; // X座標
sensorLabel.y = 5; // Y座標
game.rootScene.addChild(sensorLabel);
// データの読み込みが完了したら処理
game.onload = function(){
// ボールの設定
var ball = new Sprite(16, 16);
ball.image = game.assets["images/ball.png"];
ball.x = 0; // X座標
ball.y = 0; // Y座標
ball.dx = 1.5; // X方向の移動量
ball.dy = 2.5; // Y方向の移動量
game.rootScene.addChild(ball);
// パドルの設定
var pad = new Sprite(32, 16);
pad.image = game.assets["images/pad.png"];
pad.x = game.width/2; // X座標
pad.y = game.height - 40; // Y座標
game.rootScene.addChild(pad);
// フレームイベントが発生したら処理
game.rootScene.addEventListener(Event.ENTER_FRAME, function(){
ball.x = ball.x + ball.dx; // X方向の移動量を加算
ball.y = ball.y + ball.dy; // Y方向の移動量を加算
// 画面外かどうか調べる
if ((ball.x < 0) || (ball.x > (game.width-ball.width))){ ball.dx = -ball.dx; }
if (ball.y < 0){ ball.dy = -ball.dy; }
// ボールが下まで行ったらゲームオーバー
if(ball.y > game.height){
game.stop();
alert("スコアは"+game.score+"点でした");
}
// パドルを移動させる
var n = game.input.analogX / 4;
pad.x = pad.x + n; // パドルを移動
if (pad.x < 0){ pad.x = 0; } // 左端かどうか調べる
if (pad.x > (game.width-pad.width)){ pad.x = game.width-pad.width; } // 右端かどうか調べる
// パドルとボールの接触判定
if (pad.intersect(ball)){
ball.dy = -ball.dy; // 接触した場合はボールのY方向の移動量を逆にする
game.score = game.score + 10; // スコアを加算(10点)
scoreLabel.text = "SCORE : "+game.score;
}
});
}
// 傾きセンサーを設定
window.addEventListener("deviceorientation", function(evt){
var x = evt.gamma; // 横方向の傾斜角度
game.input.analogX = x;
sensorLabel.text = game.input.analogX;
}, false);
// ゲーム処理開始
game.start();
}
次回は、今回作ったスカッシュゲームを拡張して、ブロック崩しゲームを作りましょう。
