javascript - 구글 공룡 게임 구현(3)

프레임함수 안에서는 리얼시간이 아닌 프레임단위로 시간이 흐르기 때문에

따로 타이머를 만들어 사용해야한다. 

 

여기에 여러개의 cactus 를 담을 수 있는 Array도 만들었음

let timer = 0;
let cactusArr = [];

1초에 60번 실행되는 프레임함수가

( 사용하는 모니터 주사율에 따라 다름. 144Hz 쓰면 144번, 60Hz 쓰면 60번 )

120번마다 새 cactus 를 생성해서 Array 안에 들어가게 했다.

    if(timer % 120 == 0){
        let cactus = new Cactus();
        cactusArr.push(cactus);
    }

그 다음 해당 어레이가 forEach 문을 돌며

각각의 cactus 가 왼쪽으로 이동하며 화면에 뿌려지게끔 작성

    cactusArr.forEach((a)=>{
        a.x--;
        a.draw();
    })

바닥선 긋는 코드도 프레임함수에 있기엔 더러워보여

따로 함수로 만들었다.

let timer = 0;
let cactusArr = [];
function frameAction() {
    requestAnimationFrame(frameAction);
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    timer++;
    
    if(timer % 120 == 0){
        let cactus = new Cactus();
        cactusArr.push(cactus);
    }
    cactusArr.forEach((a)=>{
        a.x--;
        a.draw();
    })    

    drawLine();
    dino.draw();
}

function drawLine(){
    ctx.beginPath();
    ctx.moveTo(0, 250);
    ctx.lineTo(600, 250);
    ctx.stroke();
}

선인장이 다가오는 속도나 나오는 간격 같은건 

timer++;

a.x--;

얘네를 timer += 2;, a.x -= 2; 이런식으로 조절하면 된다.