從概念到程式碼：建立簡單的無盡跑酷遊戲-css教學-PHP中文網

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);
  });
}

登入後複製