ゲーム状態
プログラム起動後はゲーム状態を「ゲームスタート前(GAME_START)」にします。そして開始処理が実行されたタイミングで「ゲーム中(GAME_PLAY)」へ変更します。
|
1 2 3 4 5 6 7 8 9 10 11 |
var game_status = GAME_START; //ゲーム状態 /* ゲーム開始処理 */ function start(){ init(); //初期処理 interval=setInterval(draw, DRAW_INTER); //描画を一定間隔毎に行う start_time = new Date(); //ゲーム開始時間 game_status = GAME_PLAY; } |
ゲーム起動後
ゲーム起動後は開始画面を表示します。そのため起動後にゲーム開始処理(start())を呼び出していた箇所を次の通り変更します。
|
1 2 3 4 5 6 |
start(); //ゲーム開始処理 次の通り変更 init(); //初期処理 draw(); //描画処理 |
変数等の初期化を行い、開始画面表示のため描画処理を呼び出しています。
変数のリセット
ゲームを再開できるよう変動した変数を初期処理でリセットします。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
/* 初期処理 */ 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())を呼び出します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
/* 描画処理 */ 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() //情報表示 } |
開始画面処理では主に文字描画を行っていますので「描画-文字」を参考にしてください。
|
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 |
/* 開始画面 */ 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); } |
メッセージやカラー指定は次のように定数化します。
|
1 2 3 4 5 6 7 8 9 10 11 |
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())を呼び出します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
/* キーを離した時 */ 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(); } } } |
実行
起動後、ゲーム終了後に開始画面が表示されるか確認します。実行画面へ
ソースコードを掲載します。
