Heim >Web-Frontend >CSS-Tutorial >Vom Konzept zum Code: Erstellen eines einfachen Endless-Runner-Spiels
Vom Konzept zum Code: Erstellen eines einfachen Endless-Runner-Spiels
- Patricia ArquetteOriginal
- 2024-11-07 01:51:02203Durchsuche
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>
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();
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>
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();
DrawPlayer() in der Spielschleife aufrufen:
const player = {
x: 50,
y: canvas.height - 60,
width: 50,
height: 50,
color: "blue",
velocityY: 0,
isJumping: false
};
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);
}
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);
}
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;
}
});
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;
}
}
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"
});
}
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);
});
}
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!