간단한 웹게임 만들기 - javascript(용사)

#hero에 접근하고 조작하기

const heroElement = document.getElementById("hero");
console.log(heroElement);

heroElement.className = "right";
heroElement.style.left = "30px";

heroElement 변수에 hero id 를 찾아와 접근하고 할당 한뒤
클래스이름을 "right"로 수정한다 (용사가 오른쪽을 바라보고 있는 모습)
hero의 css에서 left값을 30px로 수정한다
(아래의 사진과 같은 모습)

화살키로 용사 움직이기

용사를 움직이기 위해서는 적절한 단계가 필요하다
차례대로 살펴보자

1. 해당 페이지 내에서 key event가 작동해야 한다

처음에는 단순히 용사를 움직이기 위해서 hero에 키 이벤트를 적용시킬 생각이었지만 생각해보니 화면 전체를 감지해야 키보드로 용사의 움직이는 값을 감지하고 움직일 수 있는 것이다

//화면 자체에 이벤트(keydown) 감지하는 것을 추가
//keydown이벤트를 발생 할때마다 함수를 실행 후 브라우저에서 이벤트 정보(변수 e)를 넘겨준다
document.addEventListener("keydown", function (e) {
  console.log(e);
});

공통 코드에 화면 자체를 감지하는 이벤트를 추가 하였다
keydown 이벤트를 발생할때마다 브라우저에서는 이벤트 정보(e)를 넘겨준다
여기서 e는 무엇일까?
console.log로 살펴보자

화면에서 처럼 왼쪽 방향키를 눌렀더니 이벤트 정보가 뜨는것을 볼 수 있다
왼쪽 방향키의 값은 37인 것을 알수 있다
문자열보다는 숫자인 keyCode가 편리하게 관리 할 수 있다

아래 링크에서 더 자세한 keyCode 값을 알수 있다
https://www.toptal.com/developers/keycode

2. 방향키를 눌렀을 때만 용사 이동

참고) 왼쪽 키값 37, 오른쪽 키값 39

방향키만 을 눌렀을 때만 이니까 조건문이 필요하다

document.addEventListener("keydown", function (e) {
  if (e.keyCode === 37) {
    heroElement.style.left = "0px";
  } else if (e.keyCode === 39) {
    heroElement.style.left = "800px";
  }
});

여기까지 잘 적용됐는지 다음 화면을 확인해보자

오른쪽으로 이동할 때 게임화면 바깥으로 이동한다
이유가 뭘까 🤨
백그라운드 이미지 크기가 800px 인데
왼쪽으로 800px 만큼 이동해서 바깥으로 나간것이다
안으로 위치하게 하려면
용사 width가 35px 만큼 빼면 된다 즉 765px이다

용사를 백그라운드 안에서 움직이게 되었다
하지만 움직임이 어색해서 아쉽다 ..
키보드 방향키를 누를때마다 움직이게 하고 싶으니
다음을 살펴보자 !

3. 용사를 방향키대로 움직이기

현재의 left를 값을 가져와 현재의 위치보다 1px씩 줄이거나 늘려야한다
그렇다면 현재 left값은 어떻게 알수 있을까 ?

document.addEventListener("keydown", function (e) {
  const heroLeft = getComputedStyle(heroElement).left;
  console.log(heroLeft);
});

heroElement.style.left 이니 DOM으로 css값을 갖고와야 한다
위의 코드처럼 (계산된) CSS 속성과 값을 얻는 getComputedStyle() 메서드를 사용하는 것을 알아냈다
영웅의 왼쪽값을 가져와보자

하지만 결과값은 문자열 400px
그리고 -1 해보니 숫자가 아니라는 Nan이라는 결과가 출력되었다

'400px' -1
NaN

우선 계산을 위해서는 'px'를 제외해야 한다
문자열 400px 에서 'px'라는 것을 어떻게 제외 하는걸까 ?

split() : 구분자로 문자열 분리하여 배열로 리턴

'400px'.split('px')
(2) ['400', '']
'400px'.split('px')[0]
'400'

split 을 사용하여 'px'를 기준으로 나눈뒤 반환된 배열에 담긴 0번째 값을 리턴하였다

  const widthoutPx = Number(heroLeft.split("px")[0]);

그리고 위의 코드 처럼 배열로 반환된 '400'인 문자열을
숫자로 바꿀 차례이다
Number() 함수를 사용하여 '400' -> 400 으로 바꾸어준다

  if (e.keyCode === 37) {
    heroElement.style.left = widthoutPx - 10 + "px";
  } else if (e.keyCode === 39) {
    heroElement.style.left = widthoutPx + 10 + "px";
  }

현재값에서 -10 / +10 한 값을 heroElement의 left값에 할당하였다
이제 영웅이 잘 움직이는지 확인해보자

이제 키보드에서 손을 뗏을 때 stop 위치값을 할당해보자

// 키보드에서 손을 뗏을 때 일어나는 이벤트
document.addEventListener("keyup", function (e) {
  heroElement.className = "stop";
});

heroElement에 클래스이름으로 css에 stop의 위치값이 저장된
.stop을 할당하여 키보드에서 손을 뗏을 때 알아서
background-position: 0px 0px; 되게 한다

위에 보이는 유령도 createElement 메서드로
해당 배경 안에 div 를 생성하여 각각의 css 값을 넣어
유령을 나타나게 하였다

하지만 hero 의 움직임에 제한이 없어 브라우저 바깥까지 이동이 된다
여기서 if문과 논리연산자로 조건을 달아보자

 if (
    (widthoutPx <= 0 && e.keyCode === 37) ||
    (widthoutPx + 10 > BG_WIDTH - HERO_WIDTH && e.keyCode === 39)
  ) {
    return;
  }

widthoutPx 이라는 현재값이 0보다 크거나 작고 왼쪽 kedCode가 37 일때
-> 왼쪽으로 이동 시 0보다 적은 값은 false인 조건
|| (이거나)
widthoutPx 이라는 현재값과 오른쪽 kedCode가 39 일때
-> 오른쪽으로 이동 시 bg의 width- hero의 width 인 값보다
커질때 return 하여 멈춘다 , + 10 은 멈췄을때 보다 좀더 나아간 값

잘 멈추는지 확인해보자