자바스크립트 키보드 이벤트 - keydown을 사용해 별 움직이기
이벤트를 받아올 때 앱은 event.nativeEvent를 사용하는데 웹에서는 event.keyCode와 같은 형식으로 쓰나보다.
<script>
document.addEventListener('DOMContentLoaded', () => {
const star = document.querySelector('h1')
star.style.position = 'absolute'
let [x, y] = [0, 0]
const block = 20
const print = () => {
star.style.left = `${x * block}px`
star.style.top = `${y * block}px`
}
const [left, up, right, down] = [37, 38, 39, 40] // 방향키를 쉽게 이용할 수 있도록 변수를 사용해 이름을 붙임
document.body.addEventListener('keydown', (event) => {
switch (event.keyCode) {
case left:
x -= 1
break
case up:
y -= 1
break
case right:
x += 1
break
case down:
y += 1
break
}
print()
})
})
</script>
<body>
<h1>*</h1>
</body>'JavaScript' 카테고리의 다른 글
| 08 - 예외 처리 고급 (2) | 2022.07.04 |
|---|---|
| 07 - localStorage 객체 - 예시 (1) | 2022.06.27 |
| 07 -2 자바스크립트 문서 객체 - 이벤트, 이벤트 모델 (0) | 2022.04.12 |
| 06 -3 얕은 복사(참조 복사)와 깊은 복사(... 전개 연산자) (0) | 2021.12.13 |
| 06-2 String 객체의 메소드(trim, split)와 JSON 객체에 대하여 (0) | 2021.10.10 |
