본문 바로가기
웹퍼블리싱

HTML5 캔버스로 간단한 게임 만들기

best-info-sea 2025. 1. 18. 20:20

HTML5 Canvas는 그래픽과 애니메이션을 구현하는 강력한 도구로, 간단한 2D 게임을 개발하는 데 매우 적합합니다. 이 글에서는 HTML5 Canvas를 사용해 기본적인 게임을 만드는 방법을 소개하고, 게임 개발에 필요한 필수 개념과 코드를 단계적으로 설명합니다.

웹퍼블리싱

1. HTML5 Canvas 소개

  1. Canvas란?
    • HTML5 Canvas는 픽셀 단위로 그래픽을 그릴 수 있는 HTML 요소입니다.
    • JavaScript와 결합해 동적인 그래픽이나 게임 애니메이션을 구현합니다.
  2. Canvas의 기본 설정
    • Canvas 요소를 사용하려면 getContext('2d') 메서드를 호출하여 2D 그래픽 렌더링 컨텍스트를 가져와야 합니다.
      <canvas id="gameCanvas" width="500" height="400"></canvas>
      <script>
          const canvas = document.getElementById('gameCanvas');
          const ctx = canvas.getContext('2d');
      </script>
  3. Canvas의 주요 메서드
    • fillRect(x, y, width, height): 사각형 그리기.
    • clearRect(x, y, width, height): 지정된 영역 지우기.
    • beginPath(): 새 경로 시작.
    • arc(x, y, radius, startAngle, endAngle): 원 그리기.

2. 간단한 게임 계획 및 구조

  1. 게임 개요
    • 간단한 공이 벽에 부딪히지 않고 움직이는 게임을 제작합니다.
    • 목표: 사용자가 화살표 키를 사용해 공을 조작하여 벽과 충돌하지 않도록 합니다.
  2. 기본 구조
    • HTML: Canvas 요소를 추가.
    • CSS: 스타일 정의.
    • JavaScript: 게임 로직과 애니메이션 구현.

3. HTML 및 CSS 설정

  1. HTML 구조
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Canvas Game</title>
        <link rel="stylesheet" href="styles.css">
    </head>
    <body>
        <canvas id="gameCanvas" width="600" height="400"></canvas>
        <script src="script.js"></script>
    </body>
    </html>

  2. CSS 스타일링
    body {
        margin: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        background-color: #282c34;
    }

    canvas {
        border: 2px solid white;
        background-color: black;
    }

4. 게임 개발: 단계별 구현

  1. Canvas 초기화 및 게임 루프
    • 게임 루프는 requestAnimationFrame()을 사용해 지속적으로 화면을 업데이트합니다.
      const canvas = document.getElementById('gameCanvas');
      const ctx = canvas.getContext('2d');

      function gameLoop() {
          ctx.clearRect(0, 0, canvas.width, canvas.height); // 화면 지우기
          // 업데이트 및 렌더링 코드
          requestAnimationFrame(gameLoop);
      }

      gameLoop();
  2. 플레이어 캐릭터(공) 추가
    • 공의 위치와 속도를 정의하고, arc()로 그립니다.
      const ball = {
          x: 300,
          y: 200,
          radius: 10,
          dx: 2,
          dy: 2,
          color: 'red',
      };

      function drawBall() {
          ctx.beginPath();
          ctx.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2);
          ctx.fillStyle = ball.color;
          ctx.fill();
          ctx.closePath();
      }
  3. 공 움직임 구현
    • 공이 움직이도록 위치를 업데이트합니다.
      function updateBall() {
          ball.x += ball.dx;
          ball.y += ball.dy;

          // 벽에 충돌하면 방향 반전
          if (ball.x + ball.radius > canvas.width || ball.x - ball.radius < 0) {
              ball.dx *= -1;
          }
          if (ball.y + ball.radius > canvas.height || ball.y - ball.radius < 0) {
              ball.dy *= -1;
          }
      }
  4. 키보드 입력 처리
    • 사용자 입력으로 공을 이동시킵니다.
      const keys = {};

      window.addEventListener('keydown', (e) => {
          keys[e.code] = true;
      });

      window.addEventListener('keyup', (e) => {
          keys[e.code] = false;
      });

      function handleInput() {
          if (keys['ArrowUp'] && ball.y - ball.radius > 0) {
              ball.y -= 5;
          }
          if (keys['ArrowDown'] && ball.y + ball.radius < canvas.height) {
              ball.y += 5;
          }
          if (keys['ArrowLeft'] && ball.x - ball.radius > 0) {
              ball.x -= 5;
          }
          if (keys['ArrowRight'] && ball.x + ball.radius < canvas.width) {
              ball.x += 5;
          }
      }
  5. 게임 루프에 통합
    • 게임 루프에서 업데이트와 렌더링을 호출합니다.
      function gameLoop() {
          ctx.clearRect(0, 0, canvas.width, canvas.height);
          updateBall();
          handleInput();
          drawBall();
          requestAnimationFrame(gameLoop);
      }

      gameLoop();

5. 추가 기능 및 개선

  1. 점수 시스템 추가
    • 점수를 계산하고 화면에 표시합니다.
      let score = 0;

      function updateScore() {
          score++;
          ctx.font = '16px Arial';
          ctx.fillStyle = 'white';
          ctx.fillText(`Score: ${score}`, 10, 20);
      }
  2. 난이도 조정
    • 시간이 지남에 따라 공의 속도를 증가시킵니다.
      setInterval(() => {
          ball.dx *= 1.1;
          ball.dy *= 1.1;
      }, 5000);
  3. 게임 오버 로직 추가
    • 공이 특정 조건에서 벽에 충돌하면 게임이 종료됩니다.
      function checkGameOver() {
          if (ball.y + ball.radius > canvas.height) {
              alert('Game Over!');
              document.location.reload();
          }
      }

결론

HTML5 Canvas는 간단하면서도 강력한 2D 게임 개발 도구입니다. 위에서 소개한 단계를 따라 가며 작은 게임을 제작하는 경험을 쌓으면 더 복잡하고 창의적인 프로젝트로 나아갈 수 있습니다. 점진적으로 애니메이션, 물리 효과, AI와 같은 고급 기술을 학습하며 자신만의 게임을 만들어 보세요!

'웹퍼블리싱' 카테고리의 다른 글

CSS Grid 완전 정복: 현대적인 레이아웃 시스템의 모든 것  (0) 2025.01.22
CDN(Content Delivery Network)으로 웹사이트 성능 최적화  (0) 2025.01.21
다국어 웹사이트 제작을 위한 HTML과 CSS 전략  (0) 2025.01.20
HTML 폼과 사용자 입력 데이터 처리 전략  (1) 2025.01.19
CSS Flexbox 완전 정복 가이드  (0) 2025.01.17
리셋 CSS와 노멀라이즈 CSS의 차이점과 활용  (1) 2025.01.16
SVG 아이콘을 활용한 UI 개선 전략  (0) 2025.01.15
모던 웹사이트를 위한 헤더와 푸터 디자인  (1) 2025.01.14

'웹퍼블리싱' Related Articles

티스토리툴바