So erstellen Sie ein Snake-Spiel mit HTML, CSS und JavaScript

Ein Schlangenspiel ist eine klassische Programmierübung, mit der Sie Ihre Programmier- und Problemlösungsfähigkeiten verbessern können. Sie können das Spiel in einem Webbrowser mit HTML, CSS und JavaScript erstellen.

Im Spiel steuerst du eine Schlange, die sich um ein Brett bewegt. Die Schlange wird größer, wenn Sie Nahrung sammeln. Das Spiel endet, wenn Sie mit Ihrem eigenen Schwanz oder einer der Wände kollidieren.

So erstellen Sie die Benutzeroberfläche für den Canvas

Verwenden Sie HTML und CSS, um die Leinwand hinzuzufügen, auf der sich die Schlange bewegen kann. Es gibt viele andere HTML- und CSS-Projekte Sie können weiter üben, wenn Sie grundlegende Konzepte überarbeiten müssen.

Sie können sich auf dieses Projekt beziehen GitHub-Repository für den vollständigen Quellcode.

1. Erstellen Sie eine neue Datei namens "index.html".
2. Öffnen Sie die Datei mit einem beliebigen Texteditor wie z Visual Code oder Atom. Fügen Sie die grundlegende HTML-Codestruktur hinzu:

   html>
   <htmllang="en-US">
   <Kopf>
   <Titel>SchlangenspielTitel>
   Kopf>
   <Körper>
   Körper>
   html>

3. Fügen Sie innerhalb des Body-Tags eine Leinwand hinzu, die das Spielbrett für die Schlange darstellt.

   <h2>Schlangenspielh2>
   <divAusweis="Spiel">
   <LeinwandAusweis="Schlange">Leinwand>
   div>

4. Erstellen Sie im selben Ordner wie Ihre HTML-Datei eine neue Datei mit dem Namen "styles.css".
5. Fügen Sie im Inneren etwas CSS für die gesamte Webseite hinzu. Sie können Ihre Website auch mit anderen gestalten wichtige CSS-Tipps und Tricks.

   #Spiel {
   Breite:400px;
   Höhe:400px;
   Rand:0Auto;
   Hintergrundfarbe:#eee;
   }
   h2 {
   Textausrichtung:Center;
   Schriftfamilie: Ariel;
   Schriftgröße:36px;
   } 
   

6. Fügen Sie in Ihrer HTML-Datei einen Link zum CSS im Head-Tag hinzu:

   <Verknüpfungrel="Stilvorlage"Typ="text/css"href="stile.css">

7. Um die Leinwand anzuzeigen, öffnen Sie Ihre Datei „index.html“ in einem Webbrowser.

Wie man die Schlange zeichnet

Im folgenden Beispiel stellt die schwarze Linie die Schlange dar:

Mehrere Quadrate oder "Segmente" bilden die Schlange. Wenn die Schlange wächst, nimmt auch die Anzahl der Quadrate zu. Zu Beginn des Spiels ist die Länge der Schlange ein Stück.

1. Verlinken Sie in Ihrer HTML-Datei am Ende des Body-Tags auf eine neue JavaScript-Datei:

   <Körper>
    Ihr Code hier 
   <SkriptQuelle="script.js">Skript>
   Körper>

2. Erstellen Sie script.js und beginnen Sie damit, das DOM-Element der Leinwand abzurufen:

   Var Leinwand = dokumentieren.getElementById("Schlange");

3. Legen Sie den Kontext für das Canvas-HTML-Element fest. In diesem Fall soll das Spiel eine 2D-Leinwand rendern. Dadurch können Sie mehrere Formen oder Bilder auf das HTML-Element zeichnen.

   Var canvas2d = canvas.getContext ("2d");

4. Legen Sie andere Variablen im Spiel fest, z. B. ob das Spiel beendet ist, und die Höhe und Breite der Leinwand:

   Var gameEnded = FALSCH;
   canvas.width = 400;
   canvas.height = 400;

5. Deklarieren Sie eine Variable namens "snakeSegments". Dies enthält die Anzahl der "Quadrate", die die Schlange einnehmen wird. Sie können auch eine Variable erstellen, um die Länge der Schlange zu verfolgen:

   Var SchlangeSegmente = [];
   Var Schlangenlänge = 1;
   

6. Geben Sie die anfängliche X- und Y-Position der Schlange an:

   Var SchlangeX = 0;
   Var SchlangeY = 0;

7. Erstellen Sie eine neue Funktion. Fügen Sie darin das Schlangen-Startstück mit seinen X- und Y-Startkoordinaten zum Array snakeSegments hinzu:

   FunktionmoveSnake() {
    snakeSegments.unshift({ X: SchlangeX, j: SchlangeY });
   }

8. Erstellen Sie eine neue Funktion. Legen Sie im Inneren den Füllstil auf Schwarz fest. Dies ist die Farbe, die zum Zeichnen der Schlange verwendet wird:

   FunktionSchlange zeichnen() {
    canvas2d.fillStyle = "Schwarz"; 
   }

9. Zeichnen Sie für jedes Segment, das die Größe der Schlange ausmacht, ein Quadrat mit einer Breite und Höhe von 10 Pixeln:

   für (Var ich = 0; i < SchlangeSegmente.Länge; i++) {
    canvas2d.fillRect (Schlangensegmente[i].x, Schlangensegmente[i].y, 10, 10);
    }

10. Erstellen Sie eine Spielschleife, die alle 100 Millisekunden ausgeführt wird. Dadurch zieht das Spiel die Schlange ständig in ihre neue Position, was sehr wichtig ist, wenn sich die Schlange zu bewegen beginnt:

    FunktionSpielLoop() {
     moveSnake();
     DrawSnake();

11. Öffnen Sie die Datei „index.html“ in einem Webbrowser, um die Schlange in ihrer kleinsten Größe in ihrer Ausgangsposition zu sehen.

Wie man die Schlange bewegt

Fügen Sie etwas Logik hinzu, um die Schlange in verschiedene Richtungen zu bewegen, je nachdem, welche Taste der Spieler auf der Tastatur drückt.

1. Geben Sie oben in der Datei die anfängliche Richtung der Schlange an:

   Var RichtungX = 10;
   Var Richtung Y = 0;
   

2. Fügen Sie einen Ereignishandler hinzu, der ausgelöst wird, wenn der Spieler eine Taste drückt:

   dokumentieren.onkeydown = Funktion(Fall) {
   };

3. Ändern Sie innerhalb des Ereignishandlers die Richtung, in die sich die Schlange bewegt, basierend auf der gedrückten Taste:

   schalten (event.keyCode) {
   Fall37: // Linker Pfeil
    RichtungX = -10;
    Richtung Y = 0;
   brechen;
   Fall38: // Aufwärtspfeil
    RichtungX = 0;
    Richtung Y = -10;
   brechen;
   Fall39: // Rechter Pfeil
    RichtungX = 10;
    Richtung Y = 0;
   brechen;
   Fall40: // Abwärtspfeil
    RichtungX = 0;
    Richtung Y = 10;
   brechen;
   }

4. Verwenden Sie in der Funktion moveSnake() die Richtung, um die X- und Y-Koordinaten der Schlange zu aktualisieren. Wenn sich die Schlange beispielsweise nach links bewegen muss, ist die X-Richtung "-10". Dadurch wird die X-Koordinate aktualisiert, um 10 Pixel für jeden Frame des Spiels zu entfernen:

   FunktionmoveSnake() {
    snakeSegments.unshift({ X: SchlangeX, j: SchlangeY });
    SchlangeX += RichtungX;
    SchlangeY += RichtungY;
   }

5. Das Spiel entfernt derzeit keine vorherigen Segmente, während sich die Schlange bewegt. Dadurch sieht die Schlange so aus:
6. Um dies zu beheben, löschen Sie die Leinwand, bevor Sie die neue Schlange in jedem Frame am Anfang der Funktion drawSnake() zeichnen:

   canvas2d.clearRect(0, 0, canvas.width, canvas.height);

7. Sie müssen auch das letzte Element des Arrays snakeSegments innerhalb der Funktion moveSnake() entfernen:

   während (snakeSegments.length > Schlangenlänge) {
    SchlangeSegmente.pop();
   }

8. Öffnen Sie die Datei „index.html“ und drücken Sie die linke, rechte, obere oder untere Taste, um die Schlange zu bewegen.

So fügen Sie Lebensmittel auf die Leinwand hinzu

Fügen Sie dem Brettspiel Punkte hinzu, um Futterstücke für die Schlange darzustellen.

1. Deklarieren Sie oben in der Datei eine neue Variable, um ein Array von Lebensmittelstücken zu speichern:

   Var Punkte = [];

2. Erstellen Sie eine neue Funktion. Generieren Sie im Inneren zufällige X- und Y-Koordinaten für die Punkte. Sie können auch sicherstellen, dass immer nur 10 Punkte auf dem Brett sind:

   FunktionspawnDots() {
   Wenn(Punkte.Länge < 10) {
   Var punktX = Mathematik.Boden(Mathematik.random() * canvas.width);
   Var dotY = Mathematik.Boden(Mathematik.random() * canvas.height);
    Punkte.push({ X: dotX, j: dotY });
    }
   }

3. Nachdem Sie die X- und Y-Koordinaten für das Essen generiert haben, zeichnen Sie sie mit roter Farbe auf die Leinwand:

   für (Var ich = 0; i < Punkte.Länge; i++) {
    canvas2d.fillStyle = "Rot";
    canvas2d.fillRect (Punkte[i].x, Punkte[i].y, 10, 10);
   }

4. Rufen Sie die neue Funktion spawnDots() innerhalb der Spielschleife auf:

   FunktionSpielLoop() {
    moveSnake();
    DrawSnake();
    spawnDots();
   Wenn(!gameEnded) {
    setTimeout (gameLoop, 100);
    }
   }

5. Öffnen Sie die Datei „index.html“, um das Essen auf dem Spielbrett anzuzeigen.

Wie man die Schlange wachsen lässt

Sie können die Schlange wachsen lassen, indem Sie ihre Länge erhöhen, wenn sie mit einem Futterpunkt kollidiert.

1. Erstellen Sie eine neue Funktion. Durchlaufen Sie darin jedes Element im Punkte-Array:

   FunktioncheckKollision() {
   für (Var ich = 0; i < Punkte.Länge; i++) {
   
    }
   }

2. Wenn die Position der Schlange mit den Koordinaten beliebiger Punkte übereinstimmt, erhöhen Sie die Länge der Schlange und löschen Sie den Punkt:

   Wenn (SchlangeX < Punkte[i].x + 10 && 
    SchlangeX + 10 > Punkte[i].x && 
    SchlangeY < Punkte[i].y + 10 && 
    SchlangeY + 10 > Punkte[i].y) {
    Schlangenlänge++;
    dots.spleiß (ich, 1);
   }

3. Rufen Sie die neue Funktion checkCollision() in der Spielschleife auf:

   FunktionSpielLoop() {
    moveSnake();
    DrawSnake();
    spawnDots();
    checkKollision();
   Wenn(!gameEnded) {
    setTimeout (gameLoop, 100);
    }
   }

4. Öffnen Sie die Datei „index.html“ in einem Webbrowser. Bewege die Schlange mit der Tastatur, um die Futterstücke einzusammeln und die Schlange wachsen zu lassen.

So beenden Sie das Spiel

Um das Spiel zu beenden, überprüfen Sie, ob die Schlange mit ihrem eigenen Schwanz oder einer der Wände kollidiert ist.

1. Erstellen Sie eine neue Funktion, um eine "Game Over"-Warnung zu drucken.

   FunktionSpiel ist aus() {
    setTimeout(Funktion() {
    Alarm("Spiel ist aus!");
    }, 500); 
    gameEnded = WAHR
   }

2. Überprüfen Sie in der Funktion checkCollision(), ob die Schlange eine der Wände der Leinwand getroffen hat. Rufen Sie in diesem Fall die Funktion gameOver() auf:

   Wenn (Schlange X < -10 || 
    SchlangeY < -10 || 
    SchlangeX > canvas.width+10 ||
    SchlangeY > Leinwand.Höhe+10) {
    Spiel ist aus();
   }

3. Um zu überprüfen, ob der Kopf der Schlange mit einem der Schwanzsegmente kollidiert ist, schleifen Sie durch jedes Stück der Schlange:

   für (Var ich = 1; i < SchlangeSegmente.Länge; i++) {
   }

4. Überprüfen Sie innerhalb der for-Schleife, ob die Position des Kopfes der Schlange mit einem der Schwanzsegmente übereinstimmt. Wenn ja, bedeutet dies, dass der Kopf mit einem Schwanz kollidiert ist, also beenden Sie das Spiel:

   Wenn (schlangeX Schlangensegmente[i].x && SchlangeY Schlangensegmente[i].y) {
    Spiel ist aus();
   }

5. Öffnen Sie die Datei „index.html“ in einem Webbrowser. Versuchen Sie, eine Wand oder Ihren eigenen Schwanz zu treffen, um das Spiel zu beenden.

Lernen von JavaScript-Konzepten durch Spiele

Das Erstellen von Spielen kann eine großartige Möglichkeit sein, Ihre Lernerfahrung angenehmer zu gestalten. Erstellen Sie weitere Spiele, um Ihre JavaScript-Kenntnisse weiter zu verbessern.