やっぱりJavaScript! - やっぱりゲーム!6
ブロック崩しのブロックを配置するのですが、配置する座標を入れていくための配列を利用します。
横が5列、縦に3行を作ります。
二次元配列で座標を指定するためにまず座標(x,y) = (0,0)の空の入れ物を作ります。
const brickRowCount = 3;
const brickColumnCount = 5;
const bricks = [];
for (let c = 0; c < brickColumnCount; c++) {
bricks[c] = [];
for (let r = 0; r < brickRowCount; r++) {
bricks[c][r] = { x: 0, y: 0 };
}
}
console.log(bricks)
出力は
[[[object Object] {
x: 0,
y: 0
}, [object Object] {
x: 0,
y: 0
}, [object Object] {
x: 0,
y: 0
}], [[object Object] {
x: 0,
y: 0
}, [object Object] {
x: 0,
y: 0
}, [object Object] {
x: 0,
y: 0
}], [[object Object] {
x: 0,
y: 0
}, [object Object] {
x: 0,
y: 0
}, [object Object] {
x: 0,
y: 0
}], [[object Object] {
x: 0,
y: 0
}, [object Object] {
x: 0,
y: 0
}, [object Object] {
x: 0,
y: 0
}], [[object Object] {
x: 0,
y: 0
}, [object Object] {
x: 0,
y: 0
}, [object Object] {
x: 0,
y: 0
}]]
15個の座標ができました。これに一つ一つのブロックの座標を入れていきます。
ブロックを作ります。まず変数としてブロックの縦横余白など以下用意します。
const brickWidth = 75;
const brickHeight = 20;
const brickPadding = 10;
const brickOffsetTop = 30;
const brickOffsetLeft = 30;
関数です。
function drawBricks() {
for (let c = 0; c < brickColumnCount; c++) {
for (let r = 0; r < brickRowCount; r++) {
bricks[c][r].x = 0;
bricks[c][r].y = 0;
ctx.beginPath();
ctx.rect(0, 0, brickWidth, brickHeight);
ctx.fillStyle = "#0095DD";
ctx.fill();
ctx.closePath();
}
}
}
ブロックの座標は
bricks[c][r].x = 0;
bricks[c][r].y = 0;
で指定されているので、この状態では1つのブロックしかできません
座標をループするごとにずらしていきます。
const brickX = c * (brickWidth + brickPadding) + brickOffsetLeft;
const brickY = r * (brickHeight + brickPadding) + brickOffsetTop;
これを入れ込んで実行するとうまくいきます。
function drawBricks() {
for (let c = 0; c < brickColumnCount; c++) {
for (let r = 0; r < brickRowCount; r++) {
const brickX = c * (brickWidth + brickPadding) + brickOffsetLeft;
const 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();
}
}
}
全コードです
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);
参考 二次元配列の挙動
JavaScriptで九九の計算をしてみます。
let bricks = 0;
for (let c = 1; c < 10; c++) {
for (let r = 1; r < 10; r++) {
bricks = c*r;
console.log(bricks)
}
}
これを出力すると
1
1
2
3
4
・
・
18
27
36
45
54
63
72
81
と縦にずらっと並んで出力されますがこれが
bricks = c*r;
"c"には"1"から"9"が入ってきます。その数字に対して"r"に入っていく"1"から"9"を掛けていきます。
例えばcが"1"のが入っているときに、"r"の"1"から"9"を掛けていきます。
1 * 1
1 * 2
・
・
1 * 9
これが終わると"c"は"2"が入り、"r"は"1"から"9"が入り順次掛けていきます。
2 * 1
2 * 2
・
・
2 * 9
これを"c"が"9"になるまで繰り返します。
これをpythonで作ると
for i in range(1,10):
print('\n', end='')
for j in range(1,10):
print(f'{i*j:4d}', end='')
出力すると
1 2 3 4 5 6 7 8 9
2 4 6 8 10 12 14 16 18
3 6 9 12 15 18 21 24 27
4 8 12 16 20 24 28 32 36
5 10 15 20 25 30 35 40 45
6 12 18 24 30 36 42 48 54
7 14 21 28 35 42 49 56 63
8 16 24 32 40 48 56 64 72
9 18 27 36 45 54 63 72 81
この記事が気に入ったらサポートをしてみませんか?