ゲームを作ろ!-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);
この記事が気に入ったらサポートをしてみませんか?