弾数表示 | PG talk

弾数表示

第１１回情報表示

JavaScriptでゲーム作成を目指す学習コーナーです。今回は残り弾数を表示します。

2020.11.25

変数
弾丸描画
情報表示
実行

変数

残り弾数を表示します。まず管理する変数を定義します。

    var bullet_kazu = BULLET_KAZU;  //残り弾丸

1	var bullet_kazu = BULLET_KAZU; //残り弾丸

代入している定数は以前定義した弾丸数です。これを初期値とし弾を打つ度に減らしていきます。

   var BULLET_KAZU=500;    //弾丸数

1	var BULLET_KAZU=500; //弾丸数

弾丸描画

弾丸描画処理で弾の発射を行っています。このタイミングで弾数を減らします。それが10行目です。

    /*
      弾丸描画
    */
    function bulletMove(){
        if(bullet_flg==true){ //スペースキーが押されているか
            bullet_count++;
            if(bullet_count > BULLET_INTER){  //発射間隔を過ぎているか
                shot(my_x+my_x_size/2,canvas.height-my_y_size-10);//発射
                bullet_count = 0;
                bullet_kazu--;
            }
        }
   ・
   ・
   ・

弾丸描画

function bulletMove(){

if(bullet_flg==true){ //スペースキーが押されているか

bullet_count++;

if(bullet_count > BULLET_INTER){ //発射間隔を過ぎているか

shot(my_x+my_x_size/2,canvas.height-my_y_size-10);//発射

bullet_count = 0;

bullet_kazu--;

}

・

情報表示

情報表示関数で次のように弾丸数を表示します。

    /*
      情報表示
    */
    function infoDisp(){
      var sa = Math.floor((new Date()-start_time)/1000);//経過時間を算出
      sa = sa/60;               //時間表示
      var min = Math.floor(sa);
      var min_disp = ( "00" + min ).slice( -2 );
      var sec = Math.floor((sa - min)*60);
      var sec_disp = ( "00" + sec ).slice( -2 );
      ctx.fillStyle = COLOR_TIME;
      ctx.font = "24px 'ＭＳ ゴシック'";
      ctx.textAlign = "left";
      ctx.textBaseline = "top";
      ctx.fillText("Time "+min_disp+":"+sec_disp, 0, 0,200);
                                //弾数表示
      ctx.fillStyle = COLOR_BULLET_KAZU;
      ctx.textAlign = "right";
      ctx.fillText("弾数:"+bullet_kazu, canvas.width, 0,200);


    }

情報表示

function infoDisp(){

var sa = Math.floor((new Date()-start_time)/1000);//経過時間を算出

sa = sa/60; //時間表示

var min = Math.floor(sa);

var min_disp = ( "00" + min ).slice( -2 );

var sec = Math.floor((sa - min)*60);

var sec_disp = ( "00" + sec ).slice( -2 );

ctx.fillStyle = COLOR_TIME;

ctx.font = "24px 'ＭＳゴシック'";

ctx.textAlign = "left";

ctx.textBaseline = "top";

ctx.fillText("Time "+min_disp+":"+sec_disp, 0, 0,200);

//弾数表示

ctx.fillStyle = COLOR_BULLET_KAZU;

ctx.textAlign = "right";

ctx.fillText("弾数:"+bullet_kazu, canvas.width, 0,200);

}

※文字の表示方法は描画-文字を参照してください。

実行

残り弾丸数が表示されるか確認します。実行画面へ

時間表示、弾丸数表示が完成しました。少しゲームらしくなってきましたね。次のステップへ進みます。

ここまでのソースコードを掲載します。

Download Now!