ギャプラスのサイドワインダーのように自機のX座標に合わせて弾も移動させる

説明

ギャプラスのパワーアップアイテムの1つであるサイドワインダーのように自機のX座標に合わせて弾も移動させるには、単純に自機のX座標を弾のX座標に入れます。(ギャプラスのサイドワインダーとは装着すると自機の動きに合わせて発射した弾も自機のX座標に合わせて左右に動きます)
サンプルではカーソルキーで自機を移動させ、Zキーでビームが発射されます。ビームを発射したら自機を動かすと自機のX座標に合わせて発射した弾も左右に動きます。

サンプル サンプルを実行データをダウンロード


■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/beam.png");
// ビームのデータを格納する配列を用意する
var beam = new Array();
// ビームの最大数(ここでは10連射)
var beamMax = 10;
// データの読み込みが完了したら処理
game.onload = function(){
// ビームの設定(10発分)
for(var i=0; i<beamMax; i++){
beam[i] = new Sprite(32, 16);
beam[i].image = game.assets["images/beam.png"];
beam[i].y = -beam[i].height; // 画面外に配置する
beam[i].flag = false; // ビームが発射されているかどうかのフラグ
game.rootScene.addChild(beam[i]);
}
// 自機の設定
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);
// Zキーをaボタンとして割り当てる
game.keybind(90, "a");
// フレームイベントが発生したら処理
game.rootScene.addEventListener(Event.ENTER_FRAME, function(){
if (game.input.left && (fighter.x > 0)){ fighter.x = fighter.x - 8; }
if (game.input.right && (fighter.x < game.width-fighter.width)){ fighter.x = fighter.x + 8; }
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; }
// ビームが発射されていれば移動させる(10回分)
for(var i=0; i<beamMax; i++){
if (beam[i].flag == true){
// 自機のX座標と同じにするとサイドワインダーになる
beam[i].x = fighter.x;
beam[i].y = beam[i].y - 16; // 一回で上に16ピクセル移動させる
if (beam[i].y < -beam[i].height){ // 画面外にまで達したら
beam[i].flag = false; // ビームの発射を示しているフラグをfalseにする
}
}
}
// Aボタンが押されたらビームを発射
if (game.input.a){
for(var i=0; i<beamMax; i++){
if (beam[i].flag == true){ continue; } // 発射済みならループの先頭へ
beam[i].flag = true; // trueにしてビームが発射されている事を示す
beam[i].x = fighter.x; // 自機の中央から出す
beam[i].y = fighter.y; // 自機と同じY座標から出す
break; // ループから抜ける
}
}
});
}
game.start(); // ゲーム処理開始
}
目次に戻る