자바스크립트 로직훈련을 위해 수업으로 벽돌깨기 게임을 구현중에 있다.
오늘 수업 중 중요하게 배운 점을 기록한다.
공과 충돌한 벽돌은 깨져야 한다.
그러기 위해선 충돌한 벽돌의 '상태'값을 변경하고,
그것을 조건으로 다시 전체 로직을 적용한다.
// 벽돌 생성 함수
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
};
}
}
}
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 // 부딪힐 때마다 방향이 바뀐다.
모든 벽돌이 전부 공과 부딪히면 게임이 끝나야 한다.
'공과 부딪힌 벽돌을 세는 변수'와 '모든 벽돌을 세는 변수' 두가지가 일치하면, 게임이 끝나게 된다.
먼저 벽돌을 세는 변수들을 선언한다.
// game clear 변수
let maxCount = brickRow * brickCol // 전체 벽돌의 개수
let falseCount = 0; // 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
// 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;
}
}
}