[WEB] HTML/CSS/JS로 게임 만들기 2

https://conquer-it.tistory.com/130

HTML/CSS/JS로 게임 만들기1

---

5. 방향키에 이벤트 주기

우선 방향키를 눌렀을 때 우주선이 이동하기 위해서는 

방향키에 이벤트를 주어야 한다.

그렇기 때문에 함수를 만들어 키보드 이벤트를 줘 보자.

const setupKeyboardListener=()=>{
    document.addEventListener("keydown",(event)=>{
        console.log("어떤 키가 눌렸나",event.key)
    });
}

이벤트리스너에 키보드로 움직이는 것이다 보니

click이 아니라 keydown 이벤트를 주었다.

그 후 잘 동작하는지 보기 위해 console을 해 주었다.

(잘 나오고 있다.)

 

우리가 누른 값이 저장이 되어야 우주선이 움직일 수 있기 때문에 

객체를 만들어 우리가 누른 방향키의 값을 넣어준다.

//방향키 이벤트
let keysDown = {};
const setupKeyboardListener=()=>{
    document.addEventListener("keydown",(event)=>{
        keysDown[event.key] = true;
        console.log(keysDown);
    });
}

하지만 이렇게 하면 문제점이 하나 발생한다.

한번 누르고 방향키에서 손을 떼도 값이 그대로 남아 있다는 것이다.

마음대로 움직이기 위해서는 방향키에서 손을 떼었을 때는 객체에서 값이 

사라져야 한다.

 

그 작업을 해 주기 위해 keyup 이벤트를 처리해준다.

//방향키 이벤트
let keysDown = {};
const setupKeyboardListener=()=>{
    document.addEventListener("keydown",(event)=>{
        keysDown[event.key] = true;
    });

    document.addEventListener("keyup",(event)=>{
        delete keysDown[event.key]; 
    });
   
}

---

6. 우주선 움직이기

우주선은 오른쪽 또는 왼쪽으로 움직일 수 있다.

이때 우주선이 오른쪽으로 움직인다는 뜻은 x좌표가 증가한다는 뜻이고,

왼쪽으로 움직인다는 것은 x좌표가 감소한다는 뜻이다.

이 개념을 가지고 코드를 작성해보자.

 

우선, update라는 함수를 하나 만든다.

그 함수 안에서

만약 오른쪽 키가 눌렸다면 x좌표를 증가시키고

왼쪽 키가 눌렸다면 x좌표를 감소시키면 된다.

(y좌표도 같은 개념이다.)

//우주선 위치 움직이기
const update=()=>{
    if("ArrowRight" in keysDown){ //오른쪽
        spaceshipX += 4;
    }
    if("ArrowLeft" in keysDown){ // 왼쪽
        spaceshipX -= 4;
    }

    if("ArrowUp" in keysDown){ // 위
        spaceshipY -= 4;
    }

    if("ArrowDown" in keysDown){ // 아래
        spaceshipY += 4;
    }
}

여기서 문제가 하나 생긴다. 이 상태에서 특정 방향키를 계속 누르고 있으면

우주선이 게임 화면 밖으로 이탈해버리는 현상이 나타난다.

이러한 문제를 해결하기 위해 조건문을 더 사용해 줘야 한다.

예를 들어, 왼쪽의 경우 우주선의 x좌표가 canvas의 x좌표의 0보다 작아진다면 

더이상 움직이지 못하게 0으로 고정시키는 것이다.

//방향키 이벤트
let keysDown = {};
const setupKeyboardListener=()=>{
    document.addEventListener("keydown",(event)=>{
        keysDown[event.key] = true;
        
    });

    document.addEventListener("keyup",(event)=>{
        delete keysDown[event.key]; 
        console.log(keysDown);
    });
   
}

//우주선 위치 움직이기
const update=()=>{
    if("ArrowRight" in keysDown){ //오른쪽
        spaceshipX += 4;
    }
    if("ArrowLeft" in keysDown){ // 왼쪽
        spaceshipX -= 4;
    }

    if("ArrowUp" in keysDown){ // 위
        spaceshipY -= 4;
    }

    if("ArrowDown" in keysDown){ // 아래
        spaceshipY += 4;
    }

    if(spaceshipX <= 0){ // 왼쪽
        spaceshipX = 0;
    }

    if(spaceshipX >= canvas.width-64){ // 오른쪽
        spaceshipX = canvas.width-64;
    }

    if(spaceshipY <= 0){ // 위
        spaceshipY = 0;
    }

    if(spaceshipY >= canvas.height-64){ // 아래
        spaceshipY = canvas.height-64;
    }
}

오른쪽과 아래에 조건식을 canvas.height -64로 준 이유는 

만약 canvas.width, canvas.height로 주게 되면 아래 사진과 같이 우주선이 밖으로 나가기 때문이다.

그렇기 때문에 canvas.width에서 우주선의 크기인 64를 빼줘야 화면에 

잘 나오게 된다.

---

지금까지 결과

---

참고 영상

https://www.youtube.com/watch?v=s2HlPDMIbi4