찾다

집 >웹 프론트엔드 >CSS 튜토리얼 >개념에서 코드까지: 간단한 Endless Runner 게임 구축

개념에서 코드까지: 간단한 Endless Runner 게임 구축

Patricia Arquette
Patricia Arquette원래의
2024-11-07 01:51:02203검색

From Concept to Code: Building a Simple Endless Runner Game

끝없는 러너 게임을 만드는 것은 게임 개발에 뛰어드는 재미있는 방법입니다. 이 게임은 간단하고 중독성이 있으며 창의적인 변형이 많이 가능합니다. 생각해 보세요. 달리기, 점프, 회피 등 몇 가지 간단한 메커니즘만 사용하면 플레이어가 화면에 계속 집중할 수 있는 무언가를 만들 수 있습니다.

Temple Run, Flappy Bird, Subway Surfers와 같은 게임은 모두 이와 같은 단순한 아이디어로 시작되었지만 전 세계적으로 수백만 명의 즐거움을 선사했습니다.

이 가이드에서는 자신만의 끝없는 러너를 처음부터 만드는 방법을 보여 드리겠습니다. 모든 것을 단순하게 유지하고 기본적인 게임을 시작하고 실행하기 위한 필수 단계를 살펴보겠습니다.

1단계: 핵심 메커니즘 이해

코드를 살펴보기 전에 끝없는 달리기 게임이 작동하는 이유를 분석해 보겠습니다. 핵심 메커니즘은 간단합니다.

자동이동 : 주인공이 자동으로 전진하기 때문에 플레이어가 전진동작을 조작할 필요가 없습니다.

장애물: 화면에 나타나며 플레이어는 이를 피하기 위해 빠르게 반응해야 합니다.

플레이어 액션: 일반적으로 플레이어는 장애물과 상호작용하기 위해 점프하거나 몸을 숙이거나 총을 쏠 수 있습니다.

이러한 핵심 메커니즘은 우리가 구축해야 할 항목에 대한 청사진을 제공합니다. 원활한 경험을 보장하면서 최대한 단순하게 유지하는 것이 아이디어입니다.

2단계: 기본 구조로 시작

기본적인 무한 실행기를 구축하려면 먼저 HTML, CSS 및 JavaScript로 구조를 설정하면 됩니다.

HTML 캔버스 설정

먼저 캔버스 요소가 포함된 기본 HTML 파일을 만듭니다. 그 모습은 다음과 같습니다.

먼저 캔버스 요소가 포함된 기본 HTML 파일을 만듭니다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Endless Runner</title>
  <style>
    canvas {
      background-color: #eee;
      display: block;
      margin: 0 auto;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="800" height="400"></canvas>
  <script src="game.js"></script>
</body>
</html>

JavaScript에서 캔버스 구성

다음으로, 게임을 계속 실행하기 위해 JavaScript로 기본 게임 루프를 만들어야 합니다. 게임 루프는 매 프레임마다 화면을 업데이트하는 게임의 "심장"입니다.

다음은 간단한 게임 루프 버전입니다.

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

function gameLoop() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  // Game code goes here

  requestAnimationFrame(gameLoop); // keeps the loop going
}

gameLoop();

설명: 우리는 requestAnimationFrame을 사용하여 gameLoop 기능을 지속적으로 실행하고 있으며, 이는 매 프레임마다 게임을 업데이트합니다. 이 기능은 화면을 지우고 나중에 여기에 게임 개체를 추가합니다.

3단계: 플레이어 캐릭터 추가

엔드리스 러너에서는 플레이어 캐릭터가 점프하거나 몸을 숙이는 등 한두 가지 행동만 하는 경우가 많습니다. 이 가이드에서는 단순하게 유지하고 점프에 집중하겠습니다.

간단한 플레이어 개체 만들기

플레이어를 위치, 크기, 속도와 같은 속성을 가진 개체로 정의하겠습니다. 예는 다음과 같습니다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Endless Runner</title>
  <style>
    canvas {
      background-color: #eee;
      display: block;
      margin: 0 auto;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="800" height="400"></canvas>
  <script src="game.js"></script>
</body>
</html>

이것은 점프할 수 있는 사각형 "플레이어"를 제공합니다. isJumping 속성은 플레이어가 다시 점프할 수 있는지 여부를 제어하는 ​​데 도움이 됩니다.

화면에 플레이어 그리기

gameLoop에 다음을 추가하여 플레이어를 그립니다.

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

function gameLoop() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  // Game code goes here

  requestAnimationFrame(gameLoop); // keeps the loop going
}

gameLoop();

게임 루프에서 drawPlayer()를 호출합니다.

const player = {
  x: 50,
  y: canvas.height - 60,
  width: 50,
  height: 50,
  color: "blue",
  velocityY: 0,
  isJumping: false
};

4단계: 점프 메커니즘 추가

플레이어를 점프하게 만들기 위해 키보드 입력을 듣습니다. 플레이어가 "Space" 키를 누르면 플레이어 캐릭터가 점프해야 합니다.

점프 동작 처리 

function drawPlayer() {
  ctx.fillStyle = player.color;
  ctx.fillRect(player.x, player.y, player.width, player.height);
}

Space를 누르면 플레이어의 수직 속도를 음수 값으로 설정하여 위쪽으로 이동합니다. 또한 isJumping을 true로 설정하여 이중 점프를 방지합니다.

중력 구현

중력은 플레이어가 점프한 후 다시 아래로 내려오게 합니다. 이는 각 프레임마다 플레이어를 아래로 당기는 일정한 힘을 추가하여 수행할 수 있습니다.

function gameLoop() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  drawPlayer();
  requestAnimationFrame(gameLoop);
}

이제 gameLoop에서 updatePlayer()를 호출하여 플레이어가 점프한 후 다시 넘어지도록 합니다.

5단계: 장애물 만들기

장애물은 끝없는 달리기를 어렵게 만듭니다. 화면 오른쪽에서 나타나 왼쪽으로 이동합니다. 플레이어가 장애물에 부딪히면 게임이 종료됩니다.

장애물 속성 정의

장애물을 설정하는 간단한 방법은 다음과 같습니다.

document.addEventListener("keydown", (event) => {
  if (event.code === "Space" && !player.isJumping) {
    player.velocityY = -10;
    player.isJumping = true;
  }
});

이 기능은 캔버스 오른쪽 가장자리에 새로운 장애물을 만듭니다. 그런 다음 각 프레임을 왼쪽으로 이동할 수 있습니다.

장애물 이동

gameLoop에서 장애물을 이동하고 그리는 기능을 추가하세요.

function updatePlayer() {
  player.y += player.velocityY;
  player.velocityY += 0.5; // Gravity effect

  // Ground detection
  if (player.y > canvas.height - player.height) {
    player.y = canvas.height - player.height;
    player.velocityY = 0;
    player.isJumping = false;
  }
}

gameLoop에 updateObstacles() 및 drawObstacles()를 추가합니다.

6단계: 충돌 감지

이제 충돌 감지를 추가해 보겠습니다. 플레이어가 장애물에 부딪히면 게임이 중지되거나 다시 시작됩니다.

const obstacles = [];

function createObstacle() {
  obstacles.push({
    x: canvas.width,
    y: canvas.height - 50,
    width: 20,
    height: 50,
    color: "red"
  });
}

gameLoop 내에서 checkCollision()을 실행하세요.

7단계: 모든 것을 하나로 모으기

다음은 이러한 기능을 모두 추가한 후의 완전한 gameLoop입니다.

function updateObstacles() {
  obstacles.forEach((obstacle, index) => {
    obstacle.x -= 5; // Speed of obstacle

    // Remove obstacles that go off-screen
    if (obstacle.x + obstacle.width < 0) {
      obstacles.splice(index, 1);
    }
  });
}

function drawObstacles() {
  obstacles.forEach(obstacle => {
    ctx.fillStyle = obstacle.color;
    ctx.fillRect(obstacle.x, obstacle.y, obstacle.width, obstacle.height);
  });
}

마지막으로...

끝없는 달리기 게임은 만들기가 간단하지만 창의력을 발휘할 여지가 많습니다. 다양한 장애물, 파워업, 심지어 레벨 진행도 추가할 수 있습니다. 작게 시작하고 성장함에 따라 더 많은 기능을 추가하여 게임을 독특하게 만드세요.

이 게시물의 배후는 누구일까요?

저는 스크래치 게임 개발자인 Chipm0nk입니다. 현재 지오메트리 대시를 끝없는 달리기 게임으로 만드는 프로젝트를 진행하고 있습니다. 댓글창에서 만나요!

위 내용은 개념에서 코드까지: 간단한 Endless Runner 게임 구축의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

JavaScript css html edge dash Object define if for while break double using finally Property function this position canvas input idea
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：jQuery를 사용하여 Div에서 인라인 CSS 스타일을 제거하려면 어떻게 해야 합니까?다음 기사：jQuery를 사용하여 Div에서 인라인 CSS 스타일을 제거하려면 어떻게 해야 합니까?

관련 기사

더보기