開始処理 | PG talk

ゲーム状態
ゲーム起動後
変数のリセット
描画処理
ゲーム開始
実行

ゲーム状態

プログラム起動後はゲーム状態を「ゲームスタート前(GAME_START)」にします。そして開始処理が実行されたタイミングで「ゲーム中(GAME_PLAY)」へ変更します。

    var game_status = GAME_START; //ゲーム状態

   /*
      ゲーム開始処理
    */
    function start(){
      　init();                         //初期処理
      　interval=setInterval(draw, DRAW_INTER);  //描画を一定間隔毎に行う
        start_time = new Date();        //ゲーム開始時間
        game_status = GAME_PLAY;
    }

var game_status = GAME_START; //ゲーム状態

ゲーム開始処理

function start(){

　init(); //初期処理

　interval=setInterval(draw, DRAW_INTER); //描画を一定間隔毎に行う

start_time = new Date(); //ゲーム開始時間

game_status = GAME_PLAY;

}

ゲーム起動後

ゲーム起動後は開始画面を表示します。そのため起動後にゲーム開始処理(start())を呼び出していた箇所を次の通り変更します。

   start();	//ゲーム開始処理

次の通り変更

    init();  //初期処理
    draw();  //描画処理

start(); //ゲーム開始処理

次の通り変更

init(); //初期処理

draw(); //描画処理

変数等の初期化を行い、開始画面表示のため描画処理を呼び出しています。

変数のリセット

ゲームを再開できるよう変動した変数を初期処理でリセットします。

    /*
      初期処理
    */
    function init(){
        document.addEventListener("keydown", keyDown);
        document.addEventListener("keyup", keyUp);

        teki_fight_su = TEKI_FIGHT_SU;//1回の出撃数
        teki_speed = TEKI_SPEED;     //敵機スピード
        bullet_kazu = BULLET_KAZU;  //残り弾丸
        teki_count = TEKI_INTER;//出撃間隔カウンター
        my_die = false;         //自機生死



        for(let i = 0; i < bullet.length; i++) { //弾丸管理変数初期化
            bullet[i] = [0,0,0];
        }

        for(let i = 0; i < te.length; i++) { //敵機管理変数初期化
            te[i] = [0,0,0,0,0];
        }

    }

初期処理

function init(){

document.addEventListener("keydown", keyDown);

document.addEventListener("keyup", keyUp);

teki_fight_su = TEKI_FIGHT_SU;//1回の出撃数

teki_speed = TEKI_SPEED; //敵機スピード

bullet_kazu = BULLET_KAZU; //残り弾丸

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

my_die = false; //自機生死

for(let i = 0; i < bullet.length; i++) { //弾丸管理変数初期化

bullet[i] = [0,0,0];

}

for(let i = 0; i < te.length; i++) { //敵機管理変数初期化

te[i] = [0,0,0,0,0];

}

描画処理

描画処理でゲーム状態が「ゲームスタート前」なら開始画面処理(drawStart())を呼び出します。

    /*
      描画処理
    */
    function draw(){
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        if(game_status == GAME_FINAL){
          drawFinal();
        }
        if(game_status==GAME_START){
          drawStart();  //ゲーム開始描画
        }else{
          myMove();     //自機を描画
        }
        bulletMove(); //弾丸描画
        tekiMove();   //敵機描画
        infoDisp()    //情報表示
    }

描画処理

function draw(){

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

if(game_status == GAME_FINAL){

drawFinal();

}

if(game_status==GAME_START){

drawStart(); //ゲーム開始描画

}else{

myMove(); //自機を描画

}

bulletMove(); //弾丸描画

tekiMove(); //敵機描画

infoDisp() //情報表示

}

開始画面処理では主に文字描画を行っていますので「描画-文字」を参考にしてください。

    /*
      開始画面
    */
    function drawStart(){
      ctx.fillStyle = COLOR_START_BACK; //スタートボックス
      ctx.lineWidth = 1;
      ctx.fillRect(canvas.width*1/4,canvas.height*1/4,canvas.width/2,canvas.height/2);

      ctx.fillStyle = COLOR_START;      //「START」
      ctx.font = "64px 'Impact'";
      ctx.textAlign = "center";
      ctx.textBaseline = "top";
      ctx.fillText(START_MSG1,canvas.width/2,canvas.height*1/4+10,canvas.width*2/4);

      var me = ctx.measureText("START");//文字縦サイズ算出
      var h = me.actualBoundingBoxAscent+me.actualBoundingBoxDescent;

      ctx.fillStyle = COLOR_ETC;        //「Enter key,Touch・・」
      ctx.font = "20px 'Impact'";
      ctx.fillText(START_MSG2,canvas.width/2,canvas.height*1/4+h+20,canvas.width*2/4);

      ctx.fillStyle = COLOR_HIGHT;      //「HIGHT SOCORE」
      ctx.fillText("START_MSG3",canvas.width/2,canvas.height*2/4,canvas.width*2/4);
      var me = ctx.measureText("HIGHT SCORE");
      h = me.actualBoundingBoxAscent+me.actualBoundingBoxDescent;
      ctx.textAlign = "center";

      ctx.fillStyle = COLOR_SCORE1;     //SCORE RANKING
      ctx.fillText("1. 00:00",canvas.width/2,canvas.height*2/4+h*1+10,canvas.width*2/4);
      ctx.fillStyle = COLOR_SCORE2;
      ctx.fillText("2. 05:00",canvas.width/2,canvas.height*2/4+h*2+20,canvas.width*2/4);
      ctx.fillStyle = COLOR_SCORE3;
      ctx.fillText("3. 23:00",canvas.width/2,canvas.height*2/4+h*3+30,canvas.width*2/4);
    }

開始画面

function drawStart(){

ctx.fillStyle = COLOR_START_BACK; //スタートボックス

ctx.lineWidth = 1;

ctx.fillRect(canvas.width*1/4,canvas.height*1/4,canvas.width/2,canvas.height/2);

ctx.fillStyle = COLOR_START; //「START」

ctx.font = "64px 'Impact'";

ctx.textAlign = "center";

ctx.textBaseline = "top";

ctx.fillText(START_MSG1,canvas.width/2,canvas.height*1/4+10,canvas.width*2/4);

var me = ctx.measureText("START");//文字縦サイズ算出

var h = me.actualBoundingBoxAscent+me.actualBoundingBoxDescent;

ctx.fillStyle = COLOR_ETC; //「Enter key,Touch・・」

ctx.font = "20px 'Impact'";

ctx.fillText(START_MSG2,canvas.width/2,canvas.height*1/4+h+20,canvas.width*2/4);

ctx.fillStyle = COLOR_HIGHT; //「HIGHT SOCORE」

ctx.fillText("START_MSG3",canvas.width/2,canvas.height*2/4,canvas.width*2/4);

var me = ctx.measureText("HIGHT SCORE");

h = me.actualBoundingBoxAscent+me.actualBoundingBoxDescent;

ctx.textAlign = "center";

ctx.fillStyle = COLOR_SCORE1; //SCORE RANKING

ctx.fillText("1. 00:00",canvas.width/2,canvas.height*2/4+h*1+10,canvas.width*2/4);

ctx.fillStyle = COLOR_SCORE2;

ctx.fillText("2. 05:00",canvas.width/2,canvas.height*2/4+h*2+20,canvas.width*2/4);

ctx.fillStyle = COLOR_SCORE3;

ctx.fillText("3. 23:00",canvas.width/2,canvas.height*2/4+h*3+30,canvas.width*2/4);

}

メッセージやカラー指定は次のように定数化します。

    var COLOR_START = "#FF0000";
    var COLOR_ETC = "#000000"
    var COLOR_START_BACK = "#556B2F";
    var COLOR_HIGHT = "blue";
    var COLOR_SCORE1="yellow";
    var COLOR_SCORE2="silver";
    var COLOR_SCORE3="brown";

    var START_MSG1 = "START";
    var START_MSG2 = "Enter Key,Touch or Click here"
    var START_MSG3 = "HIGHT SCORE";

var COLOR_START = "#FF0000";

var COLOR_ETC = "#000000"

var COLOR_START_BACK = "#556B2F";

var COLOR_HIGHT = "blue";

var COLOR_SCORE1="yellow";

var COLOR_SCORE2="silver";

var COLOR_SCORE3="brown";

var START_MSG1 = "START";

var START_MSG2 = "Enter Key,Touch or Click here"

var START_MSG3 = "HIGHT SCORE";

開始画面では上位スコアーを表示する予定です。この実装は別途行います。

ゲーム開始

エンターキー、タッチやクリックでゲームを開始します。タッチ、マウス操作は別途まとめて実装しますので、エンターキーの実装を行います。

キーを離した時の処理でエンターキーが離されかつ「ゲームスタート前」ならスタート処理(start())を呼び出します。

    /*
      キーを離した時
    */
    function keyUp(e){
        if(e.key == "ArrowRight") {     //右矢印
            my_houkou = 0;
        }else if(e.key == "ArrowLeft") {//左矢印
            my_houkou = 0;
        }
        if(e.keyCode==32){        //スペースキー
            bullet_flg = false;
            bullet_count = BAKUHA_INTER; //最初のキー押下は必ず発射
        }
        if(e.keyCode==13){        //エンターキー

          if( game_status == GAME_START){
            start();
          }
        }

    }

キーを離した時

function keyUp(e){

if(e.key == "ArrowRight") { //右矢印

my_houkou = 0;

}else if(e.key == "ArrowLeft") {//左矢印

my_houkou = 0;

}

if(e.keyCode==32){ //スペースキー

bullet_flg = false;

bullet_count = BAKUHA_INTER; //最初のキー押下は必ず発射

}

if(e.keyCode==13){ //エンターキー

if( game_status == GAME_START){

start();

}

実行

起動後、ゲーム終了後に開始画面が表示されるか確認します。実行画面へ

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

Download Now!