TIL_벽돌깨기

김진경·2022년 4월 20일
0

자바스크립트 로직훈련을 위해 수업으로 벽돌깨기 게임을 구현중에 있다.

오늘 수업 중 중요하게 배운 점을 기록한다.

'상태'를 바꿔서 체크하기.

공과 충돌한 벽돌은 깨져야 한다.
그러기 위해선 충돌한 벽돌의 '상태'값을 변경하고,
그것을 조건으로 다시 전체 로직을 적용한다.

  1. 벽돌을 생성할 때 마지막 요소로 isAlive를 추가한다.
    그리고 초기값을 true로 설정한다.
// 벽돌 생성 함수
function setBricks() {
    for (let i = 0; i < brickRow; i ++) {
        bricks[i] = [];
        for(let j = 0; j < brickCol; j ++) {
            bricks[i][j] = {
                left:55 + j * (brickWidth + 10), 
                right: 55 + j * (brickWidth + 10) + 50, 
                top: 30 + i * (brickHeight + 5), 
                bottom: 30 + i * (brickHeight + 5) + 25,
                column : i, row : j,
                isAlive:true
            };
        }
    }
}
  1. 2중 반복문을 사용하여 모든 벽돌에 충돌함수를 적용한다.
  2. 조건문의 조건으로 isAlive값을 체크하면서 동시에 충돌함수를 적용한다.
    이때 조건을 통과하면 (isAlive값이 true, 즉 아직 충돌하지 않았다는 소리 + 충돌함수 통과(충돌했다는 말)) 해당 블록의 isAlive값을 false로 변경한다.

        for(let i = 0; i < brickRow; i ++){
            for(let j = 0; j < brickCol; j ++) {
                if(bricks[i][j].isAlive && isCollisionRectToRect(ball, bricks[i][j])) { //  한번 충돌된 애들은 체크를 안함. false
                    // 벽돌을 안보이게 하든, 위치를 바꾸던지, ball의 방향을 변경
                    // console.log('i : ', i , 'j : ', j)
                    bricks[i][j].isAlive = false; // 여기서 isAlive가 false 바뀜. 충돌한 적 있다고 상태가 바뀐다.
                }
            }
        }

위와 같은 과정을 통해 한번 상태가 바뀐(isAlive값이 false == 이미 충돌했다는 말)벽돌은 다시 전체 로직이 적용될 때, isAlive 값이 true인지 체크하는 조건문에서 탈락한다. 결과적으로 충돌했던 벽돌은 다시 충돌하지 않게 되는 것.



부호를 바꿔서 변수를 다시 갱신.

벽돌과 한번 부딪힌 공은 그 방향을 바꾸어야 한다. 부딪힐 때마다 방향을 바꿔줘야 하기 때문에 해당 변수에 반대부호를 붙이고 해당 변수에 다시 대입해준다.

    for(let i = 0; i < brickRow; i ++){
        for(let j = 0; j < brickCol; j ++) {
            if(bricks[i][j].isAlive && isCollisionRectToRect(ball, bricks[i][j])) { //  한번 충돌된 애들은 체크를 안함. false
                // arcMoveDirY *= -1; // 부딪힐때마다 방향이 바뀌어야 하기에 *= 로 적용
                bricks[i][j].isAlive = false; // 여기서 isAlive가 false 바뀜. 충돌한 적 있다고 상태가 바뀐다.
                
                arcMoveDirY = -arcMoveDirY
                break;
            }
        }
    }

arcMoveDirY = -arcMoveDirY // 부딪힐 때마다 방향이 바뀐다.


count로 조건을 완성하기.

모든 벽돌이 전부 공과 부딪히면 게임이 끝나야 한다.
'공과 부딪힌 벽돌을 세는 변수'와 '모든 벽돌을 세는 변수' 두가지가 일치하면, 게임이 끝나게 된다.

먼저 벽돌을 세는 변수들을 선언한다.

    // game clear 변수
    let maxCount = brickRow * brickCol // 전체 벽돌의 개수
    let falseCount = 0; // false 벽돌의 개수

그리고 bricks[i][j].isAlive = false; 의 경우가 생길 때마다 falseCount++; 로 깨진 벽돌의 수를 세어준다. 그리고 maxCount와 비교하여 만약 같은 경우가 도출된다면, 전체 페이지를 리로드하면서 동시에 알럿을 띄우고 마치게 된다.
        for(let i = 0; i < brickRow; i ++){
            for(let j = 0; j < brickCol; j ++) {
                
                if(bricks[i][j].isAlive && isCollisionRectToRect(ball, bricks[i][j])) { //  한번 충돌된 애들은 체크를 안함. false
                    // arcMoveDirY *= -1; // 부딪힐때마다 방향이 바뀌어야 하기에 *= 로 적용
                    bricks[i][j].isAlive = false; // 여기서 isAlive가 false 바뀜. 충돌한 적 있다고 상태가 바뀐다.
                    falseCount++;
                    console.log("falseCount : ", falseCount)
                    console.log("maxCount : ", maxCount)

                    if(maxCount == falseCount) {
                        location.reload()
                        alert("game clear")
                    }

                    arcMoveDirY = -arcMoveDirY
                    break;
                }
            }
        }
profile
Maktub.

0개의 댓글