[javascript] 자바스크립트로 마우스 드래그 이벤트를 활용한 게임 개발

14 Dec 2023

javascript

마우스 드래그 이벤트는 웹 개발에서 유용하게 활용될 수 있는 기능 중 하나입니다. 이번 글에서는 자바스크립트로 마우스 드래그 이벤트를 활용하여 간단한 게임을 만드는 방법에 대해 알아보겠습니다.

1. HTML 및 CSS 설정

게임 화면을 만들기 위해 HTML과 CSS를 설정합니다. 예를 들어, 캔버스를 사용하여 게임 화면을 만들고, CSS를 통해 스타일을 지정합니다.

HTML

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <title>마우스 드래그 게임</title>
</head>
<body>
  <canvas id="gameCanvas"></canvas>
  <script src="script.js"></script>
</body>
</html>

CSS (styles.css)

body {
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f0f0f0;
}

canvas {
  border: 2px solid #000;
}

2. 자바스크립트로 마우스 드래그 이벤트 구현

이제 자바스크립트를 사용하여 마우스 드래그 이벤트를 구현합니다. 캔버스 내에서 마우스 드래그가 시작되면 그리기를 시작하고, 드래그가 끝나면 그리기를 멈추는 기능을 추가할 수 있습니다.

JavaScript (script.js)

const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
let isDrawing = false;

canvas.width = 800;
canvas.height = 400;

canvas.addEventListener('mousedown', (e) => {
  isDrawing = true;
  ctx.beginPath();
});

canvas.addEventListener('mousemove', (e) => {
  if (isDrawing) {
    const x = e.clientX - canvas.offsetLeft;
    const y = e.clientY - canvas.offsetTop;
    ctx.lineTo(x, y);
    ctx.stroke();
  }
});

canvas.addEventListener('mouseup', () => {
  isDrawing = false;
});

위의 코드는 캔버스를 생성하고, 마우스 다운/무브/업 이벤트를 감지하여 그리기를 시작하고 멈추는 기능을 구현한 예시입니다.

3. 게임 요소 추가

위의 기본 코드를 기반으로 게임에 필요한 요소들을 추가하여 게임을 완성해나갈 수 있습니다. 예를 들어, 캐릭터, 장애물, 점수 등을 추가하여 실제 게임을 제작할 수 있습니다.

마우스 드래그 이벤트를 활용하여 다양한 게임을 개발할 수 있으며, 이를 활용하여 본인만의 창작물을 만들어보시기를 권장합니다. 게임 개발에 대한 더 많은 정보를 원하시면 MDN 웹 문서에서 관련 정보를 찾아보실 수 있습니다.