[Javascript / Canvas] 크롬 공룡게임 따라서 게임 만들기 #3 - 타이머, 점수, 게임오버 및 재시작 표시

게임에서 추가적으로 만들 부분은 타이머 표시, 점수, 게임오버 표시 및 재시작이다.

 

---

1. 타이머 및 점수

타이머는 게임 시작을 기준으로 얼마만큼 시간이 지났는지 텍스트로 나타낸다.

 

1) 시간 계산

function printTime() {
    time++;
    timeText=getTimeFormatString();
    if(time%3==0&&speed>0.1){
        speed-=0.3;
    }
    //stopClock();
}

//시계 시작 - 재귀호출로 반복실행
function startClock() {
    printTime();
    stopClock();
    stopwatch = setTimeout(startClock, 1000);
}

//시계 중지
function stopClock() {
    if (stopwatch != null) {
        clearTimeout(stopwatch);
    }
}

// 시계 초기화
function resetClock() {
    stopClock()
    time = 0;
}

// 시간(int)을 시, 분, 초 문자열로 변환
function getTimeFormatString() {
    hour = parseInt(String(time / (60 * 60)));
    min = parseInt(String((time - (hour * 60 * 60)) / 60));
    sec = time % 60;

    return String(hour).padStart(2, '0') + ":" + String(min).padStart(2, '0') + ":" + String(sec).padStart(2, '0');
}

 

2) 점수 계산

function frameRepeatd(){
//생략

    collisionArr.forEach((a, i, o)=>{
        a.x--;
        //x좌표가 0미만이면 제거
        if(a.x < 0){ 
            o.splice(i,1)
            score++; //제거할 때 점수 +1
        }

}

점수 계산은 장애물이 삭제될 시 1점씩 증가되도록 했다.

장애물이 삭제된다는 것은 캐릭터와 충돌되지 않았다는 뜻이기 때문이다.

 

3) 타이머 및 점수 출력

//상단 시간 및 점수 정보 출력
function backgroundDraw(){
    ctx.font = "20px NeoDunggeunmoPro-Regular, sans-serif"; // 폰트 설정(크기 및 사용 폰트)
    ctx.fillStyle = "white"; // 폰트 색상
    ctx.fillText(timeText,canvas.width-90,30); // 시간 출력
    ctx.fillText("score: "+score,canvas.width-200,30); // 점수
}

 

상단 우측에 점수와 타이머가 출력되는 것을 볼 수 있다.

 

---

2. 게임오버 및 재시작

게임오버는 캐릭터가 장애물에 충돌한 경우이다. 이는 이전 글에서 코딩했다.

[Javascript / Cavas] 크롬 공룡게임 따라서 게임 만들기 #1 - 장애물 배치

이에 "GAME OVER" 텍스트와 재시작 버튼을 추가할 것이다.

 

1)  게임오버 텍스트

function gameoverDraw(){
    ctx.font = "70px NeoDunggeunmoPro-Regular, sans-serif";
    ctx.fillStyle = "white";
    ctx.lineWidth=3;
    ctx.strokeText("Game Over", 220, 120);
    ctx.fillText("Game Over",220,120);
}

gameoverDraw()는 stopGame()에서 호출한다. 이는 하단의 '재시작 버튼 기능'에 나타나있다.

 

 

2) 재시작 버튼

재시작 버튼 이미지

function gameoverDraw(){
	// GAME OVER 텍스트 출력
    ctx.font = "70px NeoDunggeunmoPro-Regular, sans-serif";
    ctx.fillStyle = "white";
    ctx.lineWidth=3;
    ctx.strokeText("Game Over", 220, 120);
    ctx.fillText("Game Over",220,120);
    // 재시작 버튼 출력
    ctx.drawImage(icRestart, 350, 150, 50, 50);
}

재시작 버튼으로 사용할 이미지를 준비하고 gameoverDraw()에 이미지를 추가한다.

 

 

재시작 버튼 기능

let play = false;

function startGame(){
    ctx.clearRect(0,0,canvas.width,canvas.height);

    if(collisionArr.length>0){
        collisionArr.length=0;
    }

    play=true; 
    timer=0;
    score=0;
    startClock();
    gameStartFunction();

}

function gameStartFunction(){
    frameRepeatd();
}

function stopGame(){
    play=false;
    resetClock();
    setTimeout(function(){gameoverDraw();},1)
    
}

//재시작 이미지 누르면 게임 재시작
document.addEventListener('click',(e)=>{
    if(play==false){
        if((350<=e.offsetX&&e.offsetX<=400) && (150<=e.offsetY&&e.offsetY<=200)){
            startGame();
        }
    }
});

이미지가 위치한 좌표를 클릭하면 게임이 재시작 되도록 설정한다.

게임 시작시 타이머, 점수를 초기화 한다.

변수 play를 통해 게임이 멈춘상태(game over)인지 진행중인 상태인지 구분한다.

 

 

재시작 마우스 커서 설정

이미지를 삽입한 것이기 때문에 재시작에 마우스를 올리면 기본 마우스 커서가 반영된다.

클릭 가능한 버튼이라는 것을 커서로 나타내기 위해 커서 이미지를 변경한다.

 

커서 변경 전에는 재시작 이미지 위에서 기본 마우스 커서로 나온다.

커서 변경 후에는 재시작 이미지 위에서는 포인터 커서로 나온다.

 

document.addEventListener('mousemove',(e)=>{
    if(play==false){
        if((350<=e.offsetX&&e.offsetX<=400) && (150<=e.offsetY&&e.offsetY<=200)){
            canvas.style.cursor="pointer";
        }else{
            canvas.style.cursor="default";
        }
    }
    else{
        canvas.style.cursor="default";
    }
});

이미지가 위치한 좌표를 이용하여 해당 좌표에 마우스가 있으면 커서 모양을 "pointer"로 변경한다.

그러면 버튼처럼 재시작 이미지에서는 마우스 커서가 변경되고, 그 외의 위치에서는 기본 마우스 커서로 반영된다.

 

---

Reference

[JavaScript] 스탑워치 만들기 (tistory.com)