援護機飛来
落としても落としても湧き出る敵機、応援部隊はまだ来ない。業を煮やしたのか真っ直ぐ飛ぶこともできない練習生が上がってきた。それも兵装無しの練習機でだ。何をしようとしているんだ！
まぁこんな感じで味方機を描画していきます。
画像
次の画像を使います。敵機とは色が違うだけなので、できる限り敵機のリソースを使いハンドリングします。
画像のハンドリングを行うため<img>タグで読み込み、IDを利用してJavaScriptで要素を取得します。
|
1 2 3 4 5 |
<div style="display:none"><img src="./images/env_1.png" id="mikata"></div> ・ ・ ・ var mikata = document.getElementById("mikata"); |
※味方機のIDを「mikata」にしたため、戦闘機のIDを「mikata」から「my」に変更しています。
変数
味方機は敵機とほぼ同じ動きをします。そのため味方機用の関数を用意することなく敵機の関数を利用することにしました。これを実現するため敵機管理している変数を次のよう変更します。
敵機情報の0番目に「味方機戦闘中」を新たに設けました。これで敵機、味方機を混在して管理でき、敵機の関数が利用できます。
味方描画
敵描画処理内に「味方出撃中」状態も描画するように変更します(下記11行目)。そして描画する画像を状態に応じて変更します(下記12行目～16行目)。
|
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 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 |
/* 敵機描画 */ function tekiMove(){ teki_count++; if(teki_count>TEKI_INTER){//出撃間隔に達した？ fight(); teki_count = 0; } for(var i=0;i<te.length;i++){//出撃中の敵機を探す if(te[i][0] == TEKI_FIGHT_TEKI || te[i][0] == TEKI_FIGHT_MIKATA){ if( te[i][0]==TEKI_FIGHT_MIKATA){//味方機描画 ctx.drawImage(mikata,te[i][2],te[i][3],teki_x_size,teki_y_size); }else{ //敵機描画 ctx.drawImage(teki,te[i][2],te[i][3],teki_x_size,teki_y_size); } tmp_x = te[i][2]; //横座標保管 tmp_y = te[i][3]; //縦座標保管 tmp_houkou=-1; //衝突時方向変数 switch(te[i][1]){ case H_LEFT: //左方向へ進む te[i][2] = te[i][2] - te[i][4]/2; te[i][3] = te[i][3] + te[i][4]/2; tmp_houkou = H__RIGHT;//衝突時方向設定 break; case H_CENTER://真ん中方向へ進む te[i][3] = te[i][3] + te[i][4]; tmp_houkou = H_CENTER;//衝突時方向設定 break; case H__RIGHT://右方向へ進む te[i][2] = te[i][2] + te[i][4]/2; te[i][3] = te[i][3] + te[i][4]/2; tmp_houkou = H_LEFT;//衝突時方向設定 break; } if(colliTekivsTeki(i)){ //衝突しているか？ te[i][2] = tmp_x; //横座標を戻す te[i][3] = tmp_y; //縦座標を戻す te[i][1] = tmp_houkou;//衝突時方向に設定 } //戦闘機と衝突しているか 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_ON; final(); } if( te[i][3] > canvas.height){//下画面はみ出し？ te[i][0] = TEKI_ON; } if( te[i][2] < 0){ //左画面はみ出し？ te[i][2] = 0; te[i][1] = H__RIGHT; } if( te[i][2] > canvas.width - teki_x_size){//右画面はみ出し？ te[i][2] = canvas.width - teki_x_size; te[i][1] = H_LEFT; } } } } |
味方出撃
味方機は敵機と違って直進できないようにします。直進可能にすると味方機が壁になり後ろの敵機を撃ち落とせないからです。
|
1 2 3 |
var H_LEFT = 0; //方向左 var H_CENTER = 2; //方向直進 var H__RIGHT = 1; //方向右 |
実現するため味方機の場合は0～1のランダム発生(0:左、1:右)、敵機は0～2(0:左、1:右、2:直進)としています(14行、17行目)。
|
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 30 31 32 33 34 35 36 37 |
/* 出撃 */ function fight(){ count = 0; for(var i=0;i<te.length;i++){//出撃していない敵機を探す if( te[i][0] == TEKI_ON){ //横位置をランダムに決定 x = Math.round( Math.random()*(canvas.width-teki_x_size )); var h = 0; //方向初期値S //味方の出撃? if(MIKATA_KAKURITU > Math.random()){ te[i][0] = TEKI_FIGHT_MIKATA; h = Math.round( Math.random()*1);//味方機は方向左右ランダム }else{ te[i][0] = TEKI_FIGHT_TEKI; h = Math.round( Math.random()*2);//三方向ランダム } te[i][1] = h; te[i][2] = x; te[i][3] = teki_y_size * -1; te[i][4] = teki_speed; if(colliTekivsTeki(i)){//既に機が存在するか？ te[i][0] = TEKI_ON; continue; } count++; if(count>=teki_fight_su){ //1回の出撃数を超えた？ break; } } } teki_fight_su=teki_fight_su + 1; //1回の出撃数増加 teki_speed=teki_speed+0.02; //スペードアップ } |
12行目の味方機の出撃確立は定数定義しています。
|
1 |
var MIKATA_KAKURITU = 0.1 //出現確率 |
実行
赤い味方機が描画されるか確認します。実行画面へ
味方機が描画されました。次回は味方機の衝突判定を実装していきます。
