[javascript] 자바스크립트로 키보드 이벤트를 사용한 게임 만들기

14 Dec 2023

javascript

이번 글에서는 자바스크립트를 사용하여 키보드 이벤트를 처리하여 간단한 미니 게임을 만드는 방법을 알아보겠습니다.

1. HTML 및 CSS 준비

게임을 위한 HTML과 CSS를 작성합니다. 예를 들어, 게임 화면에 해당하는 div 요소와 스타일을 설정합니다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>키보드 이벤트 게임</title>
  <style>
    #game-screen {
      width: 300px;
      height: 300px;
      background-color: #f0f0f0;
    }
  </style>
</head>
<body>
  <div id="game-screen"></div>
</body>
</html>

2. 자바스크립트로 이벤트 처리

이제 자바스크립트를 사용하여 키보드 이벤트를 처리하고, 게임에 반응하도록 만들어 봅시다.

document.addEventListener('keydown', function(event) {
  if (event.key === 'ArrowUp') {
    // 위쪽 방향키를 눌렀을 때의 동작
  } else if (event.key === 'ArrowDown') {
    // 아래쪽 방향키를 눌렀을 때의 동작
  } else if (event.key === 'ArrowLeft') {
    // 왼쪽 방향키를 눌렀을 때의 동작
  } else if (event.key === 'ArrowRight') {
    // 오른쪽 방향키를 눌렀을 때의 동작
  }
});

3. 게임 로직 추가

키보드 이벤트에 대한 처리 로직을 추가하여, 움직이는 요소를 제어하거나 게임 점수 및 상태를 관리할 수 있습니다.

let positionX = 0;
let positionY = 0;

document.addEventListener('keydown', function(event) {
  if (event.key === 'ArrowUp') {
    positionY -= 10;
  } else if (event.key === 'ArrowDown') {
    positionY += 10;
  } else if (event.key === 'ArrowLeft') {
    positionX -= 10;
  } else if (event.key === 'ArrowRight') {
    positionX += 10;
  }

  //(positionX, positionY) 위치에 요소를 이동시키는 로직
});

마치며

이렇게 자바스크립트를 사용하여 키보드 이벤트를 처리하여 간단한 게임을 만들어 보았습니다. 게임 로직을 더 확장하거나 다양한 요소를 추가하여 더욱 흥미로운 게임을 만들어볼 수 있습니다.

참고 문헌:

MDN Web Docs