ゲームを作ろ！-MDN web docs(ブロック崩し)-6

ブロックのかたまりを作る

ボールが動くようになり、次は壊していくブロックを作っていきます。まずブロックを表示するための変数を定義していきます。

var brickRowCount = 3;
var brickColumnCount = 5;
var brickWidth = 75;
var brickHeight = 20;
var brickPadding = 10;
var brickOffsetTop = 30;
var brickOffsetLeft = 30;

そしてたくさんのブロックを格納する変数を作ります。まずは空の配列です。

var bricks = [];
for(var c=0; c<brickColumnCount; c++) {
   bricks[c] = [];
   for(var r=0; r<brickRowCount; r++) {
       bricks[c][r] = { x: 0, y: 0 };
   }
}

実際には

var brickColumnCount = 5;

なので

bricks[c] = [];

配列"[ ]"がループで"5"個作られます。これが"列"になります。

その中に、

var brickRowCount = 3;

なのでブロックの座標

{ x: 0, y: 0 }

を"3"個作ります。これが"行"となります。

[[{x: 0, y: 0}, {x: 0, y: 0}, {x: 0, y: 0}], [{x: 0, y: 0}, {x: 0, y: 0}, {x: 0, y: 0}], [{x: 0, y: 0}, {x: 0, y: 0}, {x: 0, y: 0}], [{x: 0, y: 0}, {x: 0, y: 0}, {x: 0, y: 0}], [{x: 0, y: 0}, {x: 0, y: 0}, {x: 0, y: 0}]]

が作成されます。3行、5列のブロックの雛形で、内容としては3個の(x,y)座標が入った配列が5個つくられます。

このブロックの座標が入っていきます。(まだ空の状態なので実行してもブロックは表示されません)

四角いブロックを表示させる命令です。

function drawBricks() {
   for(var c=0; c<brickColumnCount; c++) {
       for(var r=0; r<brickRowCount; r++) {
           var brickX = (c*(brickWidth+brickPadding))+brickOffsetLeft;
           var brickY = (r*(brickHeight+brickPadding))+brickOffsetTop;
           bricks[c][r].x = brickX;
           bricks[c][r].y = brickY;
           ctx.beginPath();
           ctx.rect(brickX, brickY, brickWidth, brickHeight);
           ctx.fillStyle = "#0095DD";
           ctx.fill();
           ctx.closePath();
       }
   }
}

forループを2重にします。

bricksには実際に何が入っているか確認しましょう。

  for(var c=0; c<brickColumnCount; c++) {
       for(var r=0; r<brickRowCount; r++) {
           var brickX = (c*(brickWidth+brickPadding))+brickOffsetLeft;
           var brickY = (r*(brickHeight+brickPadding))+brickOffsetTop;
           bricks[c][r].x = brickX;
           bricks[c][r].y = brickY;}
 }
 
  console.log(bricks)

[
[ { x: 30, y: 30 }, { x: 30, y: 60 }, { x: 30, y: 90 } ],
[ { x: 115, y: 30 }, { x: 115, y: 60 }, { x: 115, y: 90 } ],
[ { x: 200, y: 30 }, { x: 200, y: 60 }, { x: 200, y: 90 } ],
[ { x: 285, y: 30 }, { x: 285, y: 60 }, { x: 285, y: 90 } ],
[ { x: 370, y: 30 }, { x: 370, y: 60 }, { x: 370, y: 90 } ]
]

bricksには上記の値が入っています。ブロックの位置を記録します。

ブロックを表示させるだけなら、

bricks[c][r].x = brickX;
bricks[c][r].y = brickY;}

はいりません。

var brickX = (c*(brickWidth+brickPadding))+brickOffsetLeft;
var brickY = (r*(brickHeight+brickPadding))+brickOffsetTop;

の数字がループするたびに変わっていきますので、少しづつブロックをずらして3行、5列のブロックが表示されるようになります。

あとは

function draw() {

}

に中に今回作った

drawBricks();

を入れます。

 drawBall();

の上に記入して実行すると、ブロックとパドルが表示され、ボールが下から上へ移動します。跳ね返ってしたまできてパドルに当たらない場合は"Game Over"とアラートが表示されます。

全コードです。

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var ballRadius = 10;
var x = canvas.width/2;
var y = canvas.height-30;
var dx = 2;
var dy = -2;
var paddleHeight = 10;
var paddleWidth = 75;
var paddleX = (canvas.width-paddleWidth)/2;
var rightPressed = false;
var leftPressed = false;
var brickRowCount = 3;
var brickColumnCount = 5;
var brickWidth = 75;
var brickHeight = 20;
var brickPadding = 10;
var brickOffsetTop = 30;
var brickOffsetLeft = 30;
var bricks = [];
for(var c=0; c<brickColumnCount; c++) {
   bricks[c] = [];
   for(var r=0; r<brickRowCount; r++) {
       bricks[c][r] = { x: 0, y: 0 };
   }
}
document.addEventListener("keydown", keyDownHandler, false);
document.addEventListener("keyup", keyUpHandler, false);
function keyDownHandler(e) {
   if(e.key == "Right" || e.key == "ArrowRight") {
       rightPressed = true;
   }
   else if(e.key == "Left" || e.key == "ArrowLeft") {
       leftPressed = true;
   }
}
function keyUpHandler(e) {
   if(e.key == "Right" || e.key == "ArrowRight") {
       rightPressed = false;
   }
   else if(e.key == "Left" || e.key == "ArrowLeft") {
       leftPressed = false;
   }
}
function drawBall() {
   ctx.beginPath();
   ctx.arc(x, y, ballRadius, 0, Math.PI*2);
   ctx.fillStyle = "#0095DD";
   ctx.fill();
   ctx.closePath();
}
function drawPaddle() {
   ctx.beginPath();
   ctx.rect(paddleX, canvas.height-paddleHeight, paddleWidth, paddleHeight);
   ctx.fillStyle = "#0095DD";
   ctx.fill();
   ctx.closePath();
}
function drawBricks() {
   for(var c=0; c<brickColumnCount; c++) {
       for(var r=0; r<brickRowCount; r++) {
           var brickX = (c*(brickWidth+brickPadding))+brickOffsetLeft;
           var brickY = (r*(brickHeight+brickPadding))+brickOffsetTop;
           bricks[c][r].x = brickX;
           bricks[c][r].y = brickY;
           ctx.beginPath();
           ctx.rect(brickX, brickY, brickWidth, brickHeight);
           ctx.fillStyle = "#0095DD";
           ctx.fill();
           ctx.closePath();
       }
   }
}
function draw() {
   ctx.clearRect(0, 0, canvas.width, canvas.height);
   drawBricks();
   drawBall();
   drawPaddle();
   
   if(x + dx > canvas.width-ballRadius || x + dx < ballRadius) {
       dx = -dx;
   }
   if(y + dy < ballRadius) {
       dy = -dy;
   }
   else if(y + dy > canvas.height-ballRadius) {
       if(x > paddleX && x < paddleX + paddleWidth) {
          if(y= y-paddleHeight){
           dy = -dy  ;
			 }
       }
       else {
           alert("GAME OVER");
           document.location.reload();
           clearInterval(interval); // Needed for Chrome to end game
       }
   }
   
   if(rightPressed && paddleX < canvas.width-paddleWidth) {
       paddleX += 7;
   }
   else if(leftPressed && paddleX > 0) {
       paddleX -= 7;
   }
   
   x += dx;
   y += dy;
}
var interval = setInterval(draw, 10);