블록깨기 게임의 기본요소 3개를 생각해보면 우리가 조작하는 bar
,
bar나 block과 충돌할 시 튕기며 block을 파괴하는 ball
,
우리가 깨부셔야 할 brick
이 있다
bar와 ball은 각각 하나씩 그려주면 되지만 우리가 부숴야 할 brick이 하나밖에 없다면 노잼일것
여러개의 brick 만든다고 하면 각각 brick마다 posX와 posY를 주어 그려주는 방법도 있겠지만 굉장히 코드가 길어지기 때문에 array와 반복문을 사용해서 코드를 간략화해보자
// 각 brick에 대한 정보가 담긴 배열 bricks 생성
const brickColumn = 5; // 가로 5줄
const brickRow = 4; // 세로 4줄
let bricks = [];
function setBricks() {
for(let i = 0; i < brickRow; i++)
{
bricks[i] = [];
for(let j =0; j < brickColumn; j++)
{
bricks[i][j] = { //55, 30, 10, 5는 임의의 간격을 정해준것이다
left : 55 + j * (brickWidth + 10),
right : 55 + j * (brickWidth + 10) + brickWidth,
top : 30 + i * (brickHeight + 5),
bottom : 30 + i * (brickHeight + 5) + brickHeight,
col : i , row : j,
isAlive : true
};
}
}
}
// bricks를 참고하여 brick들 그리는 함수
function drawBricks()
{
context.beginPath();
for(let i = 0; i < brickRow; i++)
{
for(let j =0; j < brickColumn; j++)
{
if(bricks[i][j].isAlive)
{
context.rect(bricks[i][j].left, bricks[i][j].top, brickWidth, brickHeight);
context.fillStyle = "green";
context.fill();
}
}
}
context.closePath();
}
canvas