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

학습 목표

• 기존에 구현했던 brick 코드 class형태로 수정하기

Class 생성하기

먼저 객체를 정의하기 위해 상태(멤버 변수)와 메서드(함수)를 구성해보자. 앞서 작성한 코드를 수정하는 것이기에 setBricks()의 내용을 constructor 안에 구상하고, drawBricks()의 내용을 class 안에 draw()함수에 넣어 주었다.

class Brick {
    // # 속성에 해당하는 내용
    // 처음 위에서 배열을 만들때 설정해줬던 값을 이쪽으로 빼준거라고 할수 있을듯 
    // 여기서 먼저 class로 설정을 해두고, 이제 위에서는 this.로 가져다 쓰기만 하면되지
    constructor(left, top, right, bottom, color){
        this.left = left;
        this.top = top;
        this.right = right;
        this.bottom = bottom;
        this.left = left;
        this.isAlive = true;
        this.color = color;
    }
    
    // # 기능에 해당하는 내용
    // 위에서 draw로 그렸던 내용을 이쪽 함수에 선언하고 이 함수를 이제 가져다 쓰도록 하자
    // 일단 rect안에 들어가는 인자값이 위에서 바꼈기 때문에 배열먼저 만들고 다시 내려오자
    draw() {
        // 위 class에서 선언해준 것들로 변수를 바꿔주자
        if(this.isAlive) 
        {
            context.rect(this.left, this.top, brickWidth, brickHeight)
            context.fillStyle = this.color; 
            context.fill();
        }
    }
}

brick코드 수정하기

수정한 변수들을 setBricks() drawBricks()에 각각 알맞게 넣자. 주석처리된 이전 코드와 비교하면 더 직관적이고 깔끔하게 코드가 정리된 것을 확인할 수 있다.

let brickArray  // class로 바꾸며 그냥 선언만 해주자

function setBricks() 
{
    brickArray = [] // why? 여기서 다시 선언해주는거지?  

    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,
            //     isAlive : true, // 여기에 변수를 추가하는 개념 

            // class로 수정해보자
            // 미리 선언해둔 각각의 class인자에 값을 넣어주는것.
            brickArray[i][j] = new Brick(
                55 + j * (brickWidth + 10), // this.left
                30 + i * (brickHeight + 5), // this.top
                55 + j * (brickWidth + 10) + 50, // this.right
                30 + i * (brickHeight + 5) + 25, // this.bottom
                'green' // this.color
            )
        }
    }
}


// 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();
            // }

            // 위 조건문을 주석처리하고, 밑에서 선언해준 class에있는 함수만 불러내주면 된다.
            brickArray[i][j].draw();
        }
    }
    context.closePath();
}