敵機描画１

敵機襲来
画像
定数
変数
敵機描画
出撃処理
実行

敵機襲来

首都を襲う敵爆撃機。しかし恐れることはない。敵は対空兵装がなく数世代前の複葉機だ。応援部隊が来るまで時間をかせぐのだ。次から次へと湧き上がる敵機から首都を守るぞ！(しかし敵機の速度が徐々に増してきていないか？)

っていう感じで敵機を描画していきます。

画像

次の画像を使います。サイズが若干大きいので縮小し利用します。

画像のハンドリングを行うため<img>タグで読み込み、IDを利用してJavaScriptで要素を取得します。

    <div style="display:none"><img src="./images/env_2.png" id="teki"></div>
　　　　　・
　　　　　・
　　　　　・
    var teki = document.getElementById("teki");

　　　　　・

var teki = document.getElementById("teki");

定数

次の定数で表示最大機数や敵機の状態を管理します。

    var TEKI_SHRINK=2.5;    //敵機画像縮小率
    var TEKI_KAZU = 30;     //敵機最大表示数
    var TEKI_ON = 0;        //敵機待機中
    var TEKI_FIGHT = 1;     //敵機戦闘中
    var TEKI_INTER = 300;   //出撃数間隔

var TEKI_SHRINK=2.5; //敵機画像縮小率

var TEKI_KAZU = 30; //敵機最大表示数

var TEKI_ON = 0; //敵機待機中

var TEKI_FIGHT = 1; //敵機戦闘中

var TEKI_INTER = 300; //出撃数間隔

変数

一定間隔で出撃を行います。出撃機数、速度は出撃する度に増していくように、次の変数を定義しました。

    var teki_x_size = teki.width/TEKI_SHRINK; //敵機横サイズ
    var teki_y_size = teki.height/TEKI_SHRINK;//敵機縦サイズ
    var te=Array(TEKI_KAZU);    //敵機用変数
    var teki_count = TEKI_INTER;//出撃間隔カウンター
    var teki_fight_su = 3;      //1回の出撃数
    var teki_speed = 0.1;       //敵機スピード

var teki_x_size = teki.width/TEKI_SHRINK; //敵機横サイズ

var teki_y_size = teki.height/TEKI_SHRINK;//敵機縦サイズ

var te=Array(TEKI_KAZU); //敵機用変数

var teki_count = TEKI_INTER;//出撃間隔カウンター

var teki_fight_su = 3; //1回の出撃数

var teki_speed = 0.1; //敵機スピード

敵機管理を二次元配列で実現します。

敵機描画

敵機の描画は描画処理(draw())から敵機描画処理(tekiMove())を呼び出します。

    /*
      描画処理
    */
    function draw(){
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        myMove();     //自機を描画
        bulletMove(); //弾丸描画
        tekiMove();   //敵機描画
    }

描画処理

function draw(){

ctx.clearRect(0, 0, canvas.width, canvas.height);

myMove(); //自機を描画

bulletMove(); //弾丸描画

tekiMove(); //敵機描画

}

    /*
      敵機描画
    */
    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){
                ctx.drawImage(teki,te[i][2],te[i][3],teki_x_size,teki_y_size);//描画
                te[i][3] = te[i][3] + te[i][4]; //進める

                if( te[i][3] > canvas.height){  //画面下に達したら
                    te[i][0] = TEKI_ON;
                }
            }
        }
    }

敵機描画

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){

ctx.drawImage(teki,te[i][2],te[i][3],teki_x_size,teki_y_size);//描画

te[i][3] = te[i][3] + te[i][4]; //進める

if( te[i][3] > canvas.height){ //画面下に達したら

te[i][0] = TEKI_ON;

}

とりあえず直進させます。5行目～9行目で出撃間隔に達していたなら後述する出撃処理(fight())を呼び出しています。

10行目～19行目では全敵機の中から「出撃中」を探し描画しています。そして描画後に敵機を進めています。ここで敵機が画面下に達したなら状態を「待機中」にしています(15行~17行)

出撃処理

全敵機の中から「待機中」を検索し「戦闘中」にしています。これを1回の出撃数に達するまで行います(出撃数は徐々に増えます)。

座標の横位置はランダム、縦は画面上を設定し速度はその時点の速度(速度は徐々に増します）を格納しています。

    /*
      出撃
    */
    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 ));

                te[i][0] = TEKI_FIGHT;
                te[i][2] = x;
                te[i][3] = teki_y_size * -1;
                te[i][4] = teki_speed;

                count++;
                if(count>=teki_fight_su){   //1回の出撃数を超えた？
                    break;
                }
            }
        }
        teki_fight_su=teki_fight_su + 1;   //1回の出撃数増加
        teki_speed=teki_speed+0.02;        //スペードアップ
    }

出撃

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 ));

te[i][0] = TEKI_FIGHT;

te[i][2] = x;

te[i][3] = teki_y_size * -1;

te[i][4] = teki_speed;

count++;

if(count>=teki_fight_su){ //1回の出撃数を超えた？

break;

}

teki_fight_su=teki_fight_su + 1; //1回の出撃数増加

teki_speed=teki_speed+0.02; //スペードアップ

}

22行、23行目で1回の出撃数、速度を増やしています。

実行

動作を確認します。実行画面へ

敵機を描画できましたが改善が必要です。まず直進以外の方向へ移動させます。