[Javascript / Canvas] 크롬 공룡게임 따라서 게임 만들기 #4 - 게임 속도 증가

마지막으로 다룰 부분은 게임의 속도 증가이다.

이전 게시물까지만 진행해도 기본적인 게임의 틀은 완성이다.

따라서 속도증가부분은 추가옵션이다.

하지만 속도 증가 없이는 일정 속도로 같은 키만 누르는 게임이라 지루함이 느껴질 수있을 것 같다.

따라서 시간이 지남에 따라 점점 속도가 증가되도록 추가 및 수정했다.

 

1. 속도 증가

속도 증가를 위해서는 중간에 속도를 다른 값으로 지정하여 변경할 수 있어야한다.

속도 증가방법을 찾아보니 기존에 쓰던 requestAimationFrame()으로는 할 수 없었다.

requestAimationFrame()으로는 중간에 값을 변경하지 못했다.

그래서 setTimeout()으로 변경했다.

 

변경 전

function frameRepeatd(){
    requestAnimationFrame(frameRepeatd);
    //생략
}
frameRepeatd()

 

변경 후

let speed=10;

function frameRepeatd(){
//생략
}

//게임 속도증가를 위한 재귀함수
function gameStartFunction(){
    frameRepeatd();

    gameStartFunctionId = setTimeout(gameStartFunction, speed)
    if(play==false){
        clearTimeout(gameStartFunctionId);
    }
}

//게임 시작을 담당하는 함수
function startGame(){
    ctx.clearRect(0,0,canvas.width,canvas.height);

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

    play=true; 
    timer=0;
    score=0;
    speed=10;           //게임 시작시 스피드 10으로 초기화
    startClock();
    gameStartFunction();

}

// 시간 지날수록 스피드 올림
function printTime() {
    time++;
    timeText=getTimeFormatString();
    if(time%3==0&&speed>0.1){
        speed-=0.3;
    }
}

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

 

속도 값을 위해 speed변수를 만든다.

gameStartFunction()에 setTimeout()을 만들어 재귀함수를 speed의 시간마다 반복한다.

speed는 time이 증감함에 따라 값을 감소시킨다.(=값이 감소하면 속도는 증가한다. ex) 10초마다 반복 보다 0.1초마다 반복이 더 빠르다.)

time의 경우 타이머를 계산하는 함수인 startClock()에서 계속 증가되도록한다.

startClock()은 1초마다 반복되는 재귀함수이기 때문에 1초마다 time과 speed값이 계산된다.