Vom Konzept zum Code: Erstellen eines einfachen Endless-Runner-Spiels-CSS-Tutorial-php.cn

From Concept to Code: Building a Simple Endless Runner Game

Das Erstellen eines Endlosläuferspiels ist eine unterhaltsame Möglichkeit, in die Spieleentwicklung einzutauchen. Diese Spiele sind unkompliziert, machen süchtig und ermöglichen zahlreiche kreative Optimierungen. Denken Sie darüber nach: Mit nur ein paar einfachen Mechaniken – Laufen, Springen, Ausweichen – können Sie etwas erschaffen, das die Spieler an ihren Bildschirm fesselt.

Spiele wie Temple Run, Flappy Bird und Subway Surfers begannen alle mit derselben einfachen Idee, haben aber weltweit Millionen von Menschen unterhalten.

In dieser Anleitung zeige ich Ihnen, wie Sie Ihren eigenen Endlosläufer von Grund auf bauen. Wir halten die Dinge einfach und gehen die wesentlichen Schritte durch, um ein Basisspiel zum Laufen zu bringen.

Schritt 1: Verstehen Sie die Kernmechanik

Bevor wir uns mit dem Code befassen, wollen wir aufschlüsseln, was ein Endless-Runner-Spiel zum Funktionieren bringt. Die Kernmechanik ist einfach:

Automatische Bewegung: Die Hauptfigur bewegt sich automatisch vorwärts, sodass der Spieler die Vorwärtsbewegung nicht steuern muss.

Hindernisse: Diese erscheinen auf dem Bildschirm und Spieler müssen schnell reagieren, um ihnen auszuweichen.

Spieleraktionen: Normalerweise können Spieler entweder springen, sich ducken oder vielleicht schießen, um mit Hindernissen zu interagieren.

Diese Kernmechaniken geben uns eine Blaupause für das, was wir bauen müssen. Die Idee besteht darin, die Dinge so einfach wie möglich zu halten und gleichzeitig ein reibungsloses Erlebnis zu gewährleisten.

Schritt 2: Beginnen Sie mit der Grundstruktur

Um einen einfachen Endlosläufer zu erstellen, können Sie zunächst eine Struktur in HTML, CSS und JavaScript einrichten.

Einrichten des HTML-Canvas

Erstellen Sie zunächst eine einfache HTML-Datei mit einem Canvas-Element. So könnte das aussehen:

Erstellen Sie zunächst eine einfache HTML-Datei mit einem Canvas-Element:

<!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>

Nach dem Login kopieren

Konfigurieren des Canvas in JavaScript

Als nächstes müssen wir eine grundlegende Spielschleife in JavaScript erstellen, um unser Spiel am Laufen zu halten. Die Spielschleife ist das „Herzstück“ des Spiels und aktualisiert den Bildschirm in jedem Frame.

Hier ist eine einfache Version einer Spielschleife:

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

Nach dem Login kopieren

Erklärung: Wir verwenden requestAnimationFrame, um die gameLoop-Funktion kontinuierlich auszuführen, wodurch das Spiel in jedem Frame aktualisiert wird. Diese Funktion löscht den Bildschirm und später fügen wir hier unsere Spielobjekte hinzu.

Schritt 3: Hinzufügen des Spielercharakters

In Endlosläufern hat der Spielercharakter oft nur eine oder zwei Aktionen, wie zum Beispiel Springen oder Ducken. Halten wir es in diesem Leitfaden einfach und konzentrieren wir uns auf das Springen.

Erstellen eines einfachen Player-Objekts

Wir definieren den Player als Objekt mit Eigenschaften wie Position, Größe und Geschwindigkeit. Hier ist ein Beispiel:

<!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>

Nach dem Login kopieren

Dadurch haben wir einen quadratischen „Spieler“, der springen kann. Mithilfe der Eigenschaft isJumping können wir steuern, ob der Spieler erneut springen kann oder nicht.

Den Spieler auf dem Bildschirm zeichnen

Fügen Sie Folgendes zum GameLoop hinzu, um den Spieler zu zeichnen:

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

Nach dem Login kopieren

DrawPlayer() in der Spielschleife aufrufen:

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

Nach dem Login kopieren

Schritt 4: Sprungmechanik hinzufügen

Um den Player zum Springen zu bringen, achten wir auf Tastatureingaben. Wenn der Spieler die „Leertaste“ drückt, sollte der Spielercharakter springen.

Umgang mit der Sprungaktion

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

Nach dem Login kopieren

Wenn Leertaste gedrückt wird, stellen wir die vertikale Geschwindigkeit des Spielers auf einen negativen Wert ein, sodass er sich nach oben bewegt. Außerdem setzen wir isJumping auf true, um Doppelsprünge zu verhindern.

Schwerkraft implementieren

Die Schwerkraft bringt den Spieler nach dem Sprung wieder zu Boden. Dies kann erreicht werden, indem eine konstante Kraft hinzugefügt wird, die den Player in jedem Frame nach unten zieht:

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

  drawPlayer();
  requestAnimationFrame(gameLoop);
}

Nach dem Login kopieren

Rufen Sie nun updatePlayer() im gameLoop auf, damit der Spieler nach dem Sprung wieder hinfällt.

Schritt 5: Hindernisse schaffen

Hindernisse machen endlose Läufer zu einer Herausforderung. Sie erscheinen auf der rechten Seite des Bildschirms und bewegen sich nach links. Wenn der Spieler auf ein Hindernis stößt, ist das Spiel vorbei.

Hinderniseigenschaften definieren

Hier ist eine einfache Möglichkeit, Hindernisse einzurichten:

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

Nach dem Login kopieren

Diese Funktion erstellt ein neues Hindernis am rechten Rand der Leinwand. Wir können es dann in jedem Frame nach links verschieben.

Hindernisse verschieben

Fügen Sie in gameLoop eine Funktion zum Bewegen und Zeichnen von Hindernissen hinzu:

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

Nach dem Login kopieren

UpdateObstacles() und drawObstacles() zu gameLoop hinzufügen.

Schritt 6: Kollisionserkennung

Jetzt fügen wir die Kollisionserkennung hinzu. Wenn der Spieler auf ein Hindernis stößt, wird das Spiel gestoppt oder neu gestartet.

const obstacles = [];

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

Nach dem Login kopieren

Führen Sie checkCollision() innerhalb des gameLoop aus.

Schritt 7: Alles zusammenbringen

Hier ist der komplette GameLoop nach dem Hinzufügen all dieser Funktionen:

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

Nach dem Login kopieren

Endlich...

Endless-Runner-Spiele sind einfach zu erstellen, bieten aber viel Raum für Kreativität. Sie können verschiedene Hindernisse, Power-Ups und sogar Levelfortschritte hinzufügen. Fangen Sie klein an und fügen Sie mit zunehmendem Wachstum weitere Funktionen hinzu, um Ihr Spiel einzigartig zu machen.

Wer steckt hinter diesem Beitrag?

Das ist also Chipm0nk, ein Scratch-Spieleentwickler, der derzeit an einem Projekt arbeitet, um Geometry Dash zu einem Endless-Runner-Spiel zu machen. Wir sehen uns im Kommentarfeld!

Das obige ist der detaillierte Inhalt vonVom Konzept zum Code: Erstellen eines einfachen Endless-Runner-Spiels. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!