ギャラクシアンのようにボタンを押したら単発でビームを発射する

説明

ギャラクシアンのようにボタンを押したら単発でビームを発射するには、ボタンが押された際にビームが発射済みかどうか調べます。もし、発射済みであれば移動処理を行います。ビームは上に移動するのでY座標を少なくしていけば(減算すれば)よいことになります。大きな値を減算すればビームは高速に、小さな値にすればビームはゆっくり移動します。ビームが上に移動し画面から完全にはみ出したらビームのフラグをfalseにして、ビームが発射されていない事を示すようにします。これを忘れると二度とビームが発射されません。
ボタンが押された際の処理は、ビームが発射されているかどうか調べます。発射されていない場合は自機の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/beam.png");
// データの読み込みが完了したら処理
game.onload = function(){
// ビームの設定
var beam = new Sprite(4, 32);
beam.image = game.assets["images/beam.png"];
beam.y = -beam.height; // 画面外に配置する
beam.flag = false; // ビームが発射されているかどうかのフラグ
game.rootScene.addChild(beam);
// 自機の設定
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 - 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; }
// ビームが発射されていれば移動させる
if (beam.flag == true){
beam.y = beam.y - 24; // 一回で上に24ピクセル移動させる
if (beam.y < -beam.height){ // 画面外にまで達したら
beam.flag = false; // ビームの発射を示しているフラグをfalseにする
}
}else{

// Aボタンが押されたらビームを発射
if (game.input.a){
beam.flag = true; // trueにしてビームが発射されている事を示す
beam.x = fighter.x + 14; // 自機の中央から出す
beam.y = fighter.y; // 自機と同じY座標から出す
}
}

});
}
game.start(); // ゲーム処理開始
}
目次に戻る