JavaScriptでテトリスっぽいもの#7

前の記事から物凄く時間が経ちましたが、勉強卒研からの現実逃避のためまた少しずつテトリスをいじっていきたいと思います。

今回はもう少しゲームらしく、「ゲームオーバー」を付け加えます。

まず、前回のプログラムのmapHeightの部分を変更します。

mapHeight = 22;

これは5マス分余計目に広くすることによってゲームオーバーの境界線を作る役目をしています。
他にもオセロなどのゲームを作るときにもよく盤面を実際よりも拡張させて作ったりとかします。

次に、見た目を良くするためにゲーム画面である長方形も大きくします。

<canvas id="target" style="border: 5px solid gray" width="200" height="440"></canvas>

それに合わせて画面をクリーンにするときの大きさも変えておきましょう。

ctx.clearRect(0, 0, 200, 440);

最後に一番の肝であるゲームオーバーの処理と、ゲーム画面余剰部分を消す処理を付け加えましょうか。

function paint() {
    ctx.clearRect(0, 0, 200, 440);
    if(posy > 2){
    	paintMatrix(block, posx, posy, 'rgb(255, 0, 0)');
    }
    paintMatrix(map, 0, 0, 'rgb(128, 128, 128)');

    if (check(map, block, posx, posy + 1)) {
        posy = posy + 1;
    }
    else {
         mergeMatrix(map, block, posx, posy);
         clearRows(map);
         if(posy < 2){
                alert("GAMEOVER");
		ctx.clearRect(0, 0, 200, 440);
		posx = 0; posy = 0;
		map = [];
                for (var y = 0; y < mapHeight; y++) {
                 	map[y] = [];
                        for (var x = 0; x < mapWidth; x++) {
                    	    map[y][x] = 0;
                   	}
                 }
          }
          posx = 0; posy = 0;
          block = blocks[Math.floor(Math.random() * blocks.length)];
    }
}

これでゲーム画面の少し上が空き、空いた部分のブロックの処理は見えず、かつゲームオーバーの処理も行えたのではないでしょうか？

今回はここまで。
次回も色々と手を加えていきたいと思います。

　Tweet