[Javascript Basic] 03. 벽돌깨기 게임(4)

학습 목표

• 블록 만들기
• 볼과 블럭 충돌시키기

블록 만들기

지난 포스팅에서 언급한 내용과 같은 방식으로 블록을 만들어보자. 이중배열을 이용하여 4행 5열의 배열을 만들고 각 인덱스값에 객체의 형태로 설정값을 주는 함수를 먼저 만들자. function setBricks() (여기서 설정값 중요)
이와 같은 형식으로 이중배열의 인덱스값을 context.rect함수의 x,y값으로 넣고 블럭을 그리면 된다. function drawBricks()

// 블록만들기 
const brickWidth = 50; // 간격 10
const brickHeight = 25 // 간격 5
const brickColumn = 5;
const brickRow = 4;
let brickArray = []

function setBricks() 
{
    for(let i = 0; i < brickRow; i++){
        brickArray[i] = []
        for(let j = 0; j < brickColumn; j++){
            brickArray[i][j] = {
                // 여기 숫자 의미를 잘 파악해야한다 
                left : 55 + j * (brickWidth + 10),
                right : 55 + j * (brickWidth + 10) + 50, //60으로 나중에 묶기
                top : 30 + i * (brickHeight + 5), 
                bottom : 30 + i * (brickHeight + 5) + 25,
                row : j,
                column : i,
                test : 0
              	isAlive : true // 여기에 변수를 추가하는 개념 
            };
        }
    }
}


// block 그리기
function drawBricks() 
{
    context.beginPath();
    for(let i = 0; i < brickRow; i++)
    {
        for(let j = 0; j < brickColumn; j++)
        {
          context.rect(brickArray[i][j].left, brickArray[i][j].top, brickWidth, brickHeight)
          context.fillStyle = 'coral'; // 이때 색칠하는것을 for문 안에 넣느냐 마느냐로 블록색을 여러개로 줄 수 있다.
          context.fill();
        }
    }
    context.closePath();
}

// 그리기
function draw() {
    // 화면 클리어
    context.clearRect(0, 0, canvas.width, canvas.height);
    // 다른 도형 그리기
    drawBar();
    drawArc();
    drawBricks() //블록 그리기 추가
}

블록 충돌하기

충돌을 일으키기 위해 function update()에서 작동하는 함수 isCollisionRectToRect() 이용해보자. 먼저 배열의 인덱스값을 불러오도록 for문을 돌리고 isCollisionRectToRect()의 두번째 매개변수로 주어 콘솔에 찍어보았다. 아무일도 일어나지 않지만 콘솔에 i, j 인덱스가 찍히는것을 확인할 수 있다.

	// function update() 안에 추가함

    for(let i = 0;  i < brickRow; i++)
    {
        for(let j = 0; j < brickColumn; j++)
        {
            if(isCollisionRectToRect(ball, brickArray[i][j]))
            {
             	console.log(i,j)
            }
        }
    }

충돌이 일어난 것을 확인했다. 이제 충돌시 블록을 없애는 방법으로 두 가지 접근을 할 수있다.

• 블록을 삭제한다.
• 블록을 그리지 않는다.

여기서 충돌이 일어날때마다 미리 선언해준 boolean값인 isAlive를 false로 바꿔주는 코드를 추가하자.(중복충돌을 방지하기 위해 break를 추가해 주었다.) 이후 function draw()에서 isAlive 값이 true일때만 블록을 그려주도록 하면 끝이다.

	// function update() 안에 추가함
    for(let i = 0;  i < brickRow; i++)
    {
        for(let j = 0; j < brickColumn; j++)
        {
            if(brickArray[i][j].isAlive && isCollisionRectToRect(ball, brickArray[i][j]))
            {
                // console.log(i,j)
                brickArray[i][j].isAlive = false;   
                arcMoveDirY = -1
                clearCount++
                console.log(clearCount)
                break // 벽돌 중복으로 뿌서지는거 방지                

            }
        }
    }

	// 수정된 block 그리기
    function drawBricks() 
    {
        context.beginPath();
        for(let i = 0; i < brickRow; i++)
        {
            for(let j = 0; j < brickColumn; j++)
            {
                if(brickArray[i][j].isAlive)
                {
                    context.rect(brickArray[i][j].left, brickArray[i][j].top, brickWidth, brickHeight)
                    context.fillStyle = 'coral'; // 이때 색칠하는것을 for문 안에 넣느냐 마느냐로 블록색을 여러개로 줄 수 있다.
                    context.fill();
                } 
            }
        }
        context.closePath();
    }