説明
ゼビウスや
ザビガのように自機の前に照準を表示するには、自機のX座標と照準の座標を同じにします（照準と自機が同一サイズの場合のみ）。次に自機の前に照準を表示するために自機のY座標から一定数を減算した値を照準のY座標に入れます。これで、自機に合わせて照準が移動するようになります。
■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(){
// 240×320ピクセルサイズの画面(Canvas)を作成
var game = new Game(240, 320);
// フレームレートの設定。30fpsに設定
game.fps = 30;
// 画像データをあらかじめ読み込ませる
game.preload("images/fighter.png", "images/pointer.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);
// 照準の設定
var pointer = new Sprite(32, 32);
pointer.image = game.assets["images/pointer.png"];
game.rootScene.addChild(pointer);
// フレームイベントが発生したら処理
fighter.addEventListener(Event.ENTER_FRAME, function(){
if (game.input.left && (fighter.x > 0)){ fighter.x = fighter.x - 4; }
if (game.input.right && (fighter.x < game.width-fighter.width)){ fighter.x = fighter.x + 4; }
if (game.input.up && (fighter.y > 80)){ fighter.y = fighter.y - 4; }
if (game.input.down && (fighter.y < game.height-fighter.height)){ fighter.y = fighter.y + 4; }
// 自機の移動に合わせて照準の座標を設定
pointer.x = fighter.x; // 自機のX座標に合わせる
pointer.y = fighter.y - 80; // 上方向に-80ピクセルの位置にする
});
}
game.start(); // ゲーム処理開始
}
目次に戻る