終了状況
終了条件に敵機が画面下まで達した時、誤って味方機を撃ち落とした時があります。この条件に達したことが分かりやすいようにアニメーションを行います。
アニメーションは敵機や味方機を少しずつ大きくした後に元のサイズに戻します。
拡大アニメーション管理
敵機、味方機の拡大状態を管理するため敵機管理している変数を利用します。
敵機や味方機が終了条件になると敵機情報[0]を「敵機拡大」や「味方機拡大」にします。そして描画処理を実行する度に拡大率を変更していきます。
この拡大率を管理するため敵機情報[1]を流用します。そして拡大した後に元のサイズに戻しますので、拡大の増減値を敵情報[4]で管理します。
拡大の増減率、最大倍率を定数で定義します。
|
1 2 |
var SCALE_STEP_BAI=0.2; //アニメ拡大の増減倍率 var SCALE_BAIRITU=10; //アニメの最大倍率 |
拡大処理
拡大する際に元座標を利用すると画面からはみ出てしまうことがあり、どの機が拡大されたか判別しにくいです。
判別しやすくするため拡大しても横中心は変えず、縦側は全て表示するようにします。実現するため元画像と拡大画像のサイズ差を求め、次のように新たな座標を算出します。
6行目～7行目で拡大後の座標を算出しています。最大拡大後に縮小させているのが18行目です、「拡大率増減値」に-1を乗算することにより拡大率を減少させていきます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
/* 拡大アニメーション */ function scaleUp(j){ var bairitu = te[j][1];//現在拡大率取得 var x = te[j][2]-(teki_x_size*bairitu-teki_x_size)/2;//新横座標 var y = te[j][3]-(teki_y_size*bairitu-teki_y_size);//新縦座標 var x_size = teki_x_size*bairitu;//拡大後横サイズ var y_size = teki_y_size*bairitu;//拡大後縦サイズ if( te[j][0]==TEKI_SCALE_MIKATA){//味方機描画 ctx.drawImage(mikata,x,te[j][3],x_size,y_size); }else{ //敵機描画 ctx.drawImage(teki,x,y,x_size,y_size); } te[j][1] = te[j][1] + te[j][4];//拡大率増減 if(te[j][1]>SCALE_BAIRITU){ //最大まで拡大しているなら te[j][4] = te[j][4] * -1; //縮小させていく } if(te[j][1]<1){ //味方機なら次に爆破アニメーション if(te[j][0] == TEKI_SCALE_MIKATA){ te[j][0] = TEKI_BAKUHA; final(); }else{ te[j][0] = TEKI_ON; final(); } } } |
味方機の場合は拡大アニメーション終了後に爆破アニメーションを行います。そのため22行目で状態を「爆破」にしています。
敵描画
敵機描画処理(tekiMove())で拡大アニメーションの呼び出しを行います。そして画面下に達した際に拡大アニメーションするようにします。
4行～7行目で状態が「拡大・・」の場合に拡大アニメーション処理を実行しています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
・ ・ for(var i=0;i<te.length;i++){//出撃中の敵機を探す if( te[i][0] >= TEKI_SCALE_TEKI){//拡大アニメーション scaleUp(i); continue; } ・ ・ ・ if( te[i][3] > canvas.height-teki_y_size){//下画面はみ出し？ if(te[i][0] == TEKI_FIGHT_MIKATA){ te[i][0] = TEKI_ON; }else{ te[i][0] = TEKI_SCALE_TEKI; te[i][1] = 1; te[i][4] = SCALE_STEP_BAI; } } ・ ・ |
16行目～18行目で状態を「敵機拡大」、拡大率の開始を1倍、増減拡大率を定数から設定しています。
弾丸描画
弾丸描画処理で味方機に弾が当たったか判断しています。この部分を次のように変更します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
・ ・ ・ if( ret > COLLISION_ANYTHING){ // 衝突 bullet[i][0] = BULLET_OFF; if( te[ret][0] == TEKI_FIGHT_MIKATA){ //味方機と衝突？ te[ret][0] = TEKI_SCALE_MIKATA; te[ret][1] = 1; te[ret][4] = SCALE_STEP_BAI; }else{ //敵機 te[ret][0] = TEKI_BAKUHA; ・ ・ |
7行～9行目で状態を「味方機拡大」、拡大率の開始を1倍、増減拡大率を定数から設定しています。
実行
敵機が画面下に達した、味方機を撃墜してしまった際に拡大アニメーションされるか確認します。実行画面へ
ここまでのソースコードを掲載します。
