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

이전 게시글에서 내 캐릭터인 dino 와 장애물인 cactus 를 만들었으니 

이제 cactus 가 나한테 달려오게 해보자

 

단순히 cactus 의 x 을 변경하면 순간이동하게되는거니 

프레임마다 움직이게 할거임

https://developer.mozilla.org/ko/docs/Web/API/Window/requestAnimationFrame

window.requestAnimationFrame() - Web API | MDN

function frameAction(){
    requestAnimationFrame(frameAction);
}

여기에 아까 밖에 던져뒀던 draw 함수들을 집어넣고

cactus 의 좌표값을 dino 쪽을 향해 오게 할건데 

function frameAction() {
    requestAnimationFrame(frameAction);

    cactus.x--;
    
    // 바닥선
    ctx.beginPath();
    ctx.moveTo(0, 250);
    ctx.lineTo(600, 250);
    ctx.stroke();
    
    // 캐릭터,장애물
    dino.draw();
    cactus.draw();
}

프레임마다 cactus 의 x 값이 줄어들게 하면

이 난리남 ㅋㅋ

잔상이 남는다고 생각하면 되는데 

크아 샤샤샥도 비슷한 원리 아닐까?

(출처: https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=7hu&logNo=220850690452) 

ctx.clearRect(0, 0, canvas.width, canvas.height);

프레임마다 샥 지워준 후 다시 그리는 식으로 해결하면 된다.

 

근데 이 상태론 새로고침 할때마다 이미 게임이 시작하고 있게됨

스페이스 버튼을 누르면 그때서야 게임이 시작되게 해보자

잘 아는 이벤트리스너를 쓸거임

document.addEventListener('keydown', (e)=>{
    if(e.code == 'Space'){
        frameAction();
    }
})

 

새로고침 후 스페이스를 눌러보면 뭔가 게임 비슷한게 만들어졌다.

다음으론 cactus 여러개가 일정 간격으로 생성되어 나한테 다가오게 해볼거