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

학습 목표

• GameOver 기능 추가하기
• GameClear 기능 추가하기

Game Over

ball이 bar와 충돌을 일으키지 않는 지점. 이는 곧 ball이 게임화면의 아래쪽과 충돌할때 라고 접근할 수 있다. 이에 해당하는 함수에서 방향을 바꿔주는 코드를 삭제하고 alert() 메세지와 함께 location.reload(); 페이지 리로딩 코드를 추가했다.

function update() {
    if(arcPosX - arcRaius < 0 ) {
        arcMoveDirX = 1;
        
    } else if(arcPosX + arcRaius > canvas.width){
        arcMoveDirX = -1;
    }

    if(arcPosY - arcRaius < 0) {
        arcMoveDirY = -1;
    } else if(arcPosY + arcRaius > canvas.height) {
        // 기존코드
      	//arcMoveDirY = -1;
      
      	// 수정코드
      	location.reload();
        alert("Game Over!!");
    }

Game Clear

앞서 ball이 각각의 block과 충돌할때 설정해준 boolean값이 바뀌며 draw를 해주는 코드를 구현했었다. 이를 이용하여 false로 바뀔때마다 변수에 count++를 해주고, 이 변수가 20이 되었을때 alert창을 띄우는 로직을 구현했다.

이때, if조건문 안에서 alert('Clear!'); 코드만 실행할 경우 ball이 마지막 남은 block과 닿자 마자 alert함수가 실행되는 문제가 발생했다. setTimeout() 함수를 넣고 100ms 설정을 해주고, gameover와 마찬가지로 페이지 리로딩 코드를 추가해 주었다.

	
	let clearCount = 0;

 	// 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]))
            {
                // 벽돌을 안보이게.. 위치를 바꾸던지.. ball의 방향을 바꾸던지 
                // console.log(i,j)
                brickArray[i][j].isAlive = false;   
                arcMoveDirY = -1
                clearCount++
                console.log(clearCount)
                break // 벽돌 중복으로 뿌서지는거 방지                

            }
        }
    }

    if(clearCount==20)
    {
    	// 기존코드
      	// alert('Clear!')
      
      	//수정코드
        setTimeout(function() {
            alert('Clear!',location.reload());
          }, 100);
    }