首页 >web前端 >css教程 >从概念到代码：构建简单的无尽跑酷游戏

从概念到代码：构建简单的无尽跑酷游戏

Patricia Arquette原创: 2024-11-07 01:51:02201浏览

From Concept to Code: Building a Simple Endless Runner Game

创建一款无尽的跑酷游戏是深入游戏开发的一种有趣方式。这些游戏简单易懂、令人上瘾，并且允许进行大量的创意调整。想一想：只需一些简单的机制——奔跑、跳跃、躲避——你就可以制作出让玩家粘在屏幕上的东西。

像Temple Run、Flappy Bird和地铁跑酷这样的游戏都是从同一个简单的想法开始的，但它们已经为全世界数百万人带来了娱乐。

在本指南中，我将向您展示如何从头开始构建自己的无尽跑酷游戏。我们将让事情变得简单，并逐步完成启动和运行基本游戏的基本步骤。

第 1 步：了解核心机制

在深入研究代码之前，让我们先来分析一下无尽跑酷游戏的工作原理。核心机制很简单：

自动移动：主角自动向前移动，玩家无需控制向前移动。

障碍：这些出现在屏幕上，玩家需要快速反应才能避开它们。

玩家动作：通常，玩家可以跳跃、躲避或者射击来与障碍物互动。

这些核心机制为我们提供了我们需要构建的蓝图。我们的想法是让事情尽可能简单，同时确保流畅的体验。

第 2 步：从基本结构开始

要构建基本的无尽跑酷游戏，您可以首先使用 HTML、CSS 和 JavaScript 设置结构。

设置 HTML 画布

首先，创建一个带有 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 中配置画布

接下来，我们需要在 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。

第 6 步：碰撞检测

现在，让我们添加碰撞检测。如果玩家碰到障碍物，游戏将停止或重新开始。

const obstacles = [];

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

在游戏循环中运行 checkCollision()。

第 7 步：将所有内容整合在一起

这是添加所有这些函数后的完整游戏循环：

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中文网其他相关文章！

JavaScript css html edge dash Object define if for while break double using finally Property function this position canvas input idea

声明：

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：How Can I Remove Inline CSS Styles from a Div with jQuery?下一篇：Can You Style Iframe Content From a Different Domain?

查看更多