説明
スプライトを操作して左右に動かすにはnew Game()として生成したオブジェクトのinputオブジェクトのleft, rightプロパティを参照します。left, rightプロパティがtrueなら、その方向のキーが押されたことになりますので、スプライトの移動処理を行います。この時に、画面の端からはみ出さないようにif()を使って判定します。画面の左端は常に0になります。画面の右端はnew Game()として生成したオブジェクトのwidthプロパティに入っています。また、右端からはみ出さないようにするためにスプライトの横幅も考慮する必要があります。スプライトの横幅はwidthプロパティで読み出すことができます。
■HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Sample game</title>
<style>
body { margin: 0; }
</style>
<script src="js/enchant.min.js"></script>
<script src="js/main.js"></script>
</head>
<body></body>
</html>
■JavaScript (main.js)
enchant(); // ライブラリの初期化
window.onload = function(){
// 320×240ピクセルサイズの画面(Canvas)を作成
var game = new Game(320, 240);
// フレームレートの設定。15fpsに設定
game.fps = 15;
// 画像データをあらかじめ読み込ませる
game.preload("images/fighter.png");
// データの読み込みが完了したら処理
game.onload = function(){
var fighter = new Sprite(32, 32);
fighter.image = game.assets["images/fighter.png"];
fighter.x = 160;
fighter.y = game.height - fighter.height;
game.rootScene.addChild(fighter);
// フレームイベントが発生したら処理
fighter.addEventListener(Event.ENTER_FRAME, function(){
// 左に移動するキーが押されたか調べて処理する
if (game.input.left && (fighter.x > 0)){
fighter.x = fighter.x - 1;
}
// 右に移動するキーが押されたか調べて処理する
if (game.input.right && (fighter.x < game.width-fighter.width)){
fighter.x = fighter.x + 1;
}
});
}
game.start(); // ゲーム処理開始
}
目次に戻る