[javascript] 자바스크립트로 아케이드 스타일의 게임 개발하기

14 Dec 2023

javascript

이번에는 자바스크립트를 사용하여 간단한 아케이드 스타일의 게임을 개발해 보겠습니다. 우리는 HTML 캔버스를 사용하여 게임을 그리고, 자바스크립트로 게임 논리를 작성할 것입니다.

1. 프로젝트 설정

먼저, 게임을 개발할 디렉토리를 만들고 프로젝트 파일을 생성합니다.

mkdir arcade-game
cd arcade-game
touch index.html
touch script.js

2. HTML 파일 작성

이제 index.html 파일을 열고 기본적인 HTML 구조를 작성합니다.

<!DOCTYPE html>
<html>
<head>
  <title>Arcade Game</title>
  <style>
    canvas {
      border: 1px solid #000;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="800" height="600"></canvas>
  <script src="script.js"></script>
</body>
</html>

여기서 우리는 canvas 요소를 사용하여 게임 화면을 만들고, 스크립트 파일을 불러오고 있습니다.

3. 자바스크립트로 게임 구현

이제 script.js 파일을 열고 게임의 논리를 작성합니다.

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

let x = canvas.width / 2;
let y = canvas.height - 30;
let dx = 2;
let dy = -2;

function drawBall() {
  ctx.beginPath();
  ctx.arc(x, y, 10, 0, Math.PI * 2);
  ctx.fillStyle = "#0095DD";
  ctx.fill();
  ctx.closePath();
}

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  drawBall();
  x += dx;
  y += dy;
}

setInterval(draw, 10);

여기서는 canvas를 가져와서 게임의 요소들을 그리고, 움직이는 로직을 작성했습니다.

4. 게임 실행

모든 파일을 작성한 후, 브라우저에서 index.html 파일을 열어 게임을 확인할 수 있습니다.

이제 여러분은 기본적인 아케이드 스타일의 게임을 자바스크립트로 개발할 수 있게 되었습니다!

이 글은 MDN web docs와 W3Schools를 참고하여 작성되었습니다.