アニメーション撃墜２

第１０回アニメーション

JavaScriptでゲーム作成を目指す学習コーナーです。戦闘機の爆発のアニメーションを実装します。

2020.11.242020.11.27

爆発画像
爆発処理
自機描画
敵機描画
自機描画
実行

爆発画像

戦闘機が敵機、味方機と衝突すると爆発させます。戦闘機は敵機より大きいため爆発画像もバランスを取るため大きくする必要があります。これを実現するため爆破画像の倍率用定数を用意します。

    var BAKUHA_BAI=1.5;     //戦闘機の爆破画像を大きくする

1	var BAKUHA_BAI=1.5; //戦闘機の爆破画像を大きくする

爆発処理

戦闘機の爆発処理は自機描画処理(myMove())内で行います。爆発のアニメーション方法は敵機等と同様に行うため(アニメーション撃墜)、爆破された際の状態フラグ、時間経過用変数を用意します。

    var my_die = false;
    var my_bakuhatu_count=0;   //戦闘機爆発シーンカウント

1 2	var my_die = false; var my_bakuhatu_count=0; //戦闘機爆発シーンカウント

自機描画

戦闘機の爆破処理を自機描画処理(myMove())に追加します。

爆破状態の時に爆破アニメーションを行います(2行目の判断文)。

    function myMove(){
        if(my_die){ //爆破された？
          var step =  Math.floor(my_bakuhatu_count / BAKUHA_INTER);
          if(step>BAKUHA_INTER*3){
            return;
          }else{
            ctx.drawImage(bakuha,(bakuha.width/BAKUHA_SCENE)*step,0,
                                bakuha.width/BAKUHA_SCENE,bakuha.height,
                                my_x+bakuha_widht_my,canvas.height-my_y_size-10+bakuha_height_my,
                                (bakuha.width/BAKUHA_SCENE)*BAKUHA_BAI,bakuha.height*BAKUHA_BAI);
          }                      
          ++my_bakuhatu_count;                    

        }else{
          ctx.drawImage(my,my_x,canvas.height-my_y_size-10,my_x_size,my_y_size);
   ・
   ・

function myMove(){

if(my_die){ //爆破された？

var step = Math.floor(my_bakuhatu_count / BAKUHA_INTER);

if(step>BAKUHA_INTER*3){

return;

}else{

ctx.drawImage(bakuha,(bakuha.width/BAKUHA_SCENE)*step,0,

bakuha.width/BAKUHA_SCENE,bakuha.height,

my_x+bakuha_widht_my,canvas.height-my_y_size-10+bakuha_height_my,

(bakuha.width/BAKUHA_SCENE)*BAKUHA_BAI,bakuha.height*BAKUHA_BAI);

}

++my_bakuhatu_count;

}else{

ctx.drawImage(my,my_x,canvas.height-my_y_size-10,my_x_size,my_y_size);

・

爆破表示を戦闘機座標の中心で行うため事前に画像サイズの差を求め9行目で利用しています。

    var bakuha_widht_my = (my_x_size - (bakuha.width/3)*BAKUHA_BAI)/2;
    var bakuha_height_my =(my_y_size - bakuha.height*BAKUHA_BAI)/2;

1 2	var bakuha_widht_my = (my_x_size - (bakuha.width/3)BAKUHA_BAI)/2; var bakuha_height_my =(my_y_size - bakuha.heightBAKUHA_BAI)/2;

また爆破画像を大きくするため10行目で倍率定数(BAKUHA_BAI)で乗算しています。

敵機描画

敵機描画(tekiMove())処理の戦闘機との衝突処理を次のように変更します。

   ・
   ・
   ・ 
              //戦闘機と衝突しているか       
                if(collision(te[i][2],te[i][3],teki_x_size,teki_y_size,
                            my_x,canvas.height-my_y_size-10,my_x_size,my_y_size)){
                    te[i][0] = TEKI_BAKUHA;
                    te[i][1] = 0;
                    my_die = true;
                }
   ・
   ・

・

//戦闘機と衝突しているか

if(collision(te[i][2],te[i][3],teki_x_size,teki_y_size,

my_x,canvas.height-my_y_size-10,my_x_size,my_y_size)){

te[i][0] = TEKI_BAKUHA;

te[i][1] = 0;

my_die = true;

}

・

9行目で戦闘機の爆破状態をオン(true)にしています。

自機描画

自機描画処理(myMove())で戦闘機が移動した時に敵機や味方機と衝突していないか判断しています。この部分を変更します。

   ・
   ・
   ・
          //敵機と衝突しているか
          ret = colliTeki(my_x,canvas.height-my_y_size-10,my_x_size,my_y_size);
          if(ret != COLLISION_NOTHING){
            te[ret][0] = TEKI_BAKUHA;
            te[ret][1] = 0;
            my_die = true;
          }
   ・
   ・

・

//敵機と衝突しているか

ret = colliTeki(my_x,canvas.height-my_y_size-10,my_x_size,my_y_size);

if(ret != COLLISION_NOTHING){

te[ret][0] = TEKI_BAKUHA;

te[ret][1] = 0;

my_die = true;

}

・

実行

戦闘機と味方機や敵機が衝突した時に爆破されるか確認します。実行画面へ