keyCode 속성 활용
keyCode 속성은 입력한 키를 숫자로 나타냄 37, 38, 39, 40이 방향키 왼쪽, 위, 오른쪽, 아래 를 내타냄
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
/*
keyCode 속성 활용
keyCode 속성은 입력한 키를 숫자로 나타냄 37, 38, 39, 40이 방향키 왼쪽, 위, 오른쪽, 아래 를 내타냄
*/
document.addEventListener('DOMContentLoaded', () => {
//별의 초기 설정
const star = document.querySelector('h1');
star.style.position = 'absolute'; // style 속성을 조작하여 position 값을 설정
star.style.transitionDuration = '2s'
// 별의 이동을 출력하는 기능
let [x, y] = [0, 0];
const block = 20;
const print = () => {
star.style.left = `${x * block}px`;
star.style.top = `${y * block}px`;
}
print();
// 별을 이동하는 기능
// 방향키 keyCode를 쉽게 사용하기 위해 변수를 사용해 이름을 붙임
const [left, up, right, down] = [37, 38, 39, 40];
document.body.addEventListener('keydown', (evnet) => { // 키보드 눌릴때 실행
console.log(event.keyCode);
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>
<h1>★</h1>
</body>
</html>
