포시코딩

javascript - 구글 공룡 게임 구현(4) 본문

개인프로젝트/구글 공룡 게임

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

포시 2022. 6. 22. 14:16
728x90

이번엔 dino 를 점프시켜보자

 

스페이스로 점프할건데 이미 게임 스타트를 스페이스로 하고 있으면 어캄?

timer 변수를 따로 지정해서 시간 대신 사용했듯이 

상태에 대한 변수를 만들어 쓸거임

let gameState = 0; // 0: end, 1: start
let jumpState = 0; // 0: default, 1: jump

document.addEventListener('keydown', (e)=>{
    if(e.code == 'Space'){
        if(gameState == 0){
            gameState = 1; // 게임실행
            frameAction();
        } else if(gameState == 1){ // 게임실행중일때 스페이스누르면
            jumpState = 1; // 점프중으로 변경
        }
    }
})

프레임함수에

    if(jumpState == 1){
        jumpTimer++; // 점프중일때 점프타이머가 진행되게. 밑에서 설명할거임
        dino.y--;
    }

jumpState 가 1일 때 dino 의 y축을 위로 올라가게 해주면 

게임이 시작되고 스페이스를 누를때 dino 가 위로 올라간다.

근데 끝도없이 올라가네

 

dino 의 현재 y 값이 일정수준에 도달하면 상태를 변경하는 방법도 있지만

만약에 계단 같은거 위에서 뛸 경우엔 그때마다 한계 y 값을 다 다르게 지정해줘야 할것이다. 

그러니 여기서도 timer 를 쓰자

점프용timer 를 따로 지정

let jumpTimer = 0;

프레임함수에서 jumpTimer 가 50 이상이 되면 점프상태를 0(default) 로 변경

점프상태가 0 이 되었으니 jumpTimer 도 0 으로 재설정

    if(jumpTimer > 50){
        jumpState = 0;
        jumpTimer = 0;
    }

점프상태가 0이면 dino 의 y 값이 상승(캐릭터는 하강) 하게끔 만들어주자. 

대신 y 값이 200 이하일 경우에서만 하강되게!

이 부분을 안해주면 바닥선을 뚫고 내려가버린다.

    if(jumpState == 0){
        if(dino.y < 200){
            dino.y++;
        }
    }

마찬가지로 점프높이 조절은 dino.y 값을 건들여주는 곳을 통해 하면된다.

 

728x90