説明
グラディウスのように自機にオプションが追従するようにするには、あらかじめ自機の座標を格納しておく配列を用意しておきます。そして、自機が移動した時だけ座標を格納する配列に自機のX,Y座標を格納していきます。その後、配列のshift()メソッドを使って配列に格納された座標値を１つずつずらしていきます。
オプションは自機の座標が格納された配列から等間隔に座標値を読み出し表示座標として設定していきます。グラディウスタイプの場合、自機が動いた時だけオプションが動きます。
■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(320, 240);
// フレームレートの設定。30fpsに設定
game.fps = 30;
// 画像データをあらかじめ読み込ませる
game.preload("images/fighter.png", "images/option.png");
// オプションのデータを格納する配列を用意する
var option = new Array();
var optionMax = 4; // オプション（影）の最大数（ここでは4つ）
var optionStep = 8; // オプションの間隔
var xyData = new Array(); // 自機のX,Y座標を入れる配列
var xyLength = optionMax * optionStep; // 自機のX, Y座標を格納する最大値
// データの読み込みが完了したら処理
game.onload = function(){
// オプションの設定(4つ分)
for(var i=0; i<optionMax; i++){
option[i] = new Sprite(32, 24);
option[i].image = game.assets["images/option.png"];
option[i].x = 160; // XY座標を自機と同じにする
option[i].y = game.height - 24;
game.rootScene.addChild(option[i]);
}
// 自機の設定
var fighter = new Sprite(32, 24);
fighter.image = game.assets["images/fighter.png"];
fighter.x = 160;
fighter.y = game.height - fighter.height;
game.rootScene.addChild(fighter);
// オプションに自機の座標を設定する
for(var i=0; i<xyLength; i++){
xyData[i] = { x : fighter.x, y : fighter.y };
}
// 自機のフレームイベントが発生したら処理
game.rootScene.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 > 0)){ fighter.y = fighter.y - 4; }
if (game.input.down && (fighter.y < game.height-fighter.height)){ fighter.y = fighter.y + 4; }
// 自機が移動した場合のみオプションの座標も移動させる
if (game.input.left || game.input.right || game.input.up || game.input.down){
xyData.shift();
xyData.push({ x : fighter.x, y : fighter.y});
// オプションを移動させる(4つ分)
for(var i=0; i<optionMax; i++){
var point = optionStep * i;
option[i].x = xyData[point].x;
option[i].y = xyData[point].y;
}
}
});
}
game.start(); // ゲーム処理開始
}
目次に戻る