지난번에 캐릭터를 자르는데까지 정말 오랜 시간이 걸렸다. 이제 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를 공부하면서 왔는데… 다음타자는 클래스인가 두둥!!!!