위코드 2주차-3 - key event로 캐릭터 좌우로 이동하기

dooreplay·2020년 3월 6일
0

19년도 8월에 작성된 글입니다.


지난번에 캐릭터를 자르는데까지 정말 오랜 시간이 걸렸다. 이제 key event를 넣어서 좌우로 이동할 수 있도록 식을 만드는 시간쓰~

key code Number 알아내기

캐릭터를 좌우로 이동하려면 좌키, 우키 각각에 해당하는 숫자를 알아내서 각각의 값에 이벤트를 걸어줘야 한다.
https://keycode.info 키 값은 여기 들어가면 원하는 키를 눌러보면 쉽게 알아낼 수 있다!

이로써 좌키의 keycode는 37, 우키의 keycode는 39라는걸 알게되었다리~
이제 addEventlistener를 작성해보자.

key event의 종류

  • keydown : 사용자가 키보드를 누르는 순간 발생
  • keyup : 사용자가 키보드에서 손을 떼는 순간 발생
  • keypress : 사용자가 키보드를 누르고 있을 때 발생

keydown 이벤트를 적용하면 우리가 좌키, 우키를 누를 때마다 이벤트가 발생하게 된다.
keypress 이벤트랑은 무슨 차이가 있을지 한번 직접 써보면서 비교를 해보려고 했는데 안 먹힌다 ㅎ 이럴때 쓰라고 있는 함수가 아닌가보다~~~

적용

  • 나의 첫번째 시도
function left() {
    let hero = document.getElementById('hero')
    hero.style.left= parseInt(hero.style.left-1)+'px'
}

function right() {
    let hero = document.getElementById('hero')
    hero.style.right= parseInt(hero.style.left+1)+'px'
}

function moving(event) {
    if(event.keyCode === 37) {
        left()
    }
    if (event.keyCode === 39) {
        right()
    }
}

window.addEventListener('keydown',function(event) {
    moving(event)
})

이렇게 하면 왼쪽으로 너무 확 간다.. 오른쪽으론 가지도 않는다.
아무래도 function left와 right가 잘못 된 것 같아서 다시 한번 작성해보았다

  • 나의 두번째 시도
var hero_position = 400

function left() {
    let hero = document.getElementById('hero')
    hero.style.backgroundPositionX = 70+'px'
    hero_position -= 10
    hero.style.left = hero_position + 'px'
    //hero의 포지션이 0일때 멈추게 하는 법
    if(hero_position <= 0) {
        hero_position = 0 
    }
}

function right() {
    let hero = document.getElementById('hero')
    hero.style.backgroundPositionX = 35+'px'
    hero_position += 10
    hero.style.left = hero_position + 'px'
    //hero의 포지션이 764일때 멈추게 하는 법
    if(hero_position >= 764) {
        hero_position = 764
    }
}

처음에 backgroundPositionX를 CSS에 나와있는 대로 background-position-x 라고 썼다가 오류가 났다. 찾아보니 Camel case로 써야 하는것 같아서 바꿔보니 캐릭터 도리도리는 성공!

position도 생각처럼 쉬운 문제는 아니였는데....
처음엔 아예 left에다가 직접 숫자를 더하고 뺐다가 아닌것 같아서 hero_position이라는 변수를 하나 만들어서 적용했더니 성공!
이동하는걸 성공하고 나니 경계선에 도달했을 때 더이상 못 움직이게 하는 로직은 쉬웠다. 그냥 특정한 숫자에 도달했을 때 고정된 값을 주면 되는거였다!!!!

하지만 진정한 고통은 class를 공부하면서 왔는데... 다음타자는 클래스인가 두둥!!!!

To be continued...

Reference

https://keycode.info
https://www.w3schools.com/jsref/event_onkeypress.asp
https://www.youtube.com/watch?v=8ZPlNOzLrdw

profile
Community Manager && front-end Dev

0개의 댓글