<brickgame> 3. brick 만들기 feat. 2D array

블록깨기 게임의 기본요소 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