개념에서 코드까지: 간단한 Endless Runner 게임 구축
- Patricia Arquette원래의
- 2024-11-07 01:51:02127검색
끝없는 러너 게임을 만드는 것은 게임 개발에 뛰어드는 재미있는 방법입니다. 이 게임은 간단하고 중독성이 있으며 창의적인 변형이 많이 가능합니다. 생각해 보세요. 달리기, 점프, 회피 등 몇 가지 간단한 메커니즘만 사용하면 플레이어가 화면에 계속 집중할 수 있는 무언가를 만들 수 있습니다.
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!