创建一款无尽的跑酷游戏是深入游戏开发的一种有趣方式。这些游戏简单易懂、令人上瘾，并且允许进行大量的创意调整。想一想：只需一些简单的机制——奔跑、跳跃、躲避——你就可以制作出让玩家粘在屏幕上的东西。
像Temple Run、Flappy Bird和地铁跑酷这样的游戏都是从同一个简单的想法开始的，但它们已经为全世界数百万人带来了娱乐。
在本指南中，我将向您展示如何从头开始构建自己的无尽跑酷游戏。我们将让事情变得简单，并逐步完成启动和运行基本游戏的基本步骤。
在深入研究代码之前，让我们先来分析一下无尽跑酷游戏的工作原理。核心机制很简单：
自动移动：主角自动向前移动，玩家无需控制向前移动。
障碍：这些出现在屏幕上，玩家需要快速反应才能避开它们。
玩家动作：通常，玩家可以跳跃、躲避或者射击来与障碍物互动。
这些核心机制为我们提供了我们需要构建的蓝图。我们的想法是让事情尽可能简单，同时确保流畅的体验。
要构建基本的无尽跑酷游戏，您可以首先使用 HTML、CSS 和 JavaScript 设置结构。
首先，创建一个带有 canvas 元素的基本 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 中创建一个基本的游戏循环以保持游戏运行。游戏循环是游戏的“心脏”，每一帧都会更新屏幕。
这是游戏循环的简单版本：
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 函数，这将更新游戏的每一帧。此函数会清除屏幕，稍后我们将在此处添加游戏对象。
在无尽跑酷中，玩家角色通常只有一两个动作，例如跳跃或躲避。对于本指南，让我们保持简单并专注于跳跃。
我们将玩家定义为具有位置、大小和速度等属性的对象。这是一个例子：
<!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
};
为了让玩家跳跃，我们将监听键盘输入。当玩家按下“空格”键时，玩家角色应该跳跃。
function drawPlayer() {
ctx.fillStyle = player.color;
ctx.fillRect(player.x, player.y, player.width, player.height);
}
当按下空格时，我们将玩家的垂直速度设置为负值，使其向上移动。我们还将 isJumping 设置为 true，以防止双跳。
玩家跳跃后重力会将其拉回原处。这可以通过在每一帧中添加将玩家拉低的恒定力来完成：
function gameLoop() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawPlayer();
requestAnimationFrame(gameLoop);
}
现在，在gameLoop中调用updatePlayer()，让玩家跳跃后重新落下。
障碍让无尽的跑步者充满挑战。它们从屏幕右侧出现并向左移动。如果玩家碰到障碍物，游戏就结束。
这是设置障碍的简单方法：
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;
}
}
将updateObstacles() 和drawObstacles() 添加到gameLoop。
现在，让我们添加碰撞检测。如果玩家碰到障碍物，游戏将停止或重新开始。
const obstacles = [];
function createObstacle() {
obstacles.push({
x: canvas.width,
y: canvas.height - 50,
width: 20,
height: 50,
color: "red"
});
}
在游戏循环中运行 checkCollision()。
这是添加所有这些函数后的完整游戏循环：
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，一位 Scratch 游戏开发者，目前正在开发一个项目，使几何冲刺成为一款无尽的跑酷游戏。评论区见！
以上是从概念到代码：构建简单的无尽跑酷游戏的详细内容。更多信息请关注PHP中文网其他相关文章！
