×
Outbyte PC Repair
Outbyte Driver Updater

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

2023/02/03
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, an denen Sie üben können, wenn Sie grundlegende Konzepte überarbeiten müssen.

Den vollständigen Quellcode finden Sie im GitHub-Repository dieses Projekts.

  1. Erstellen Sie eine neue Datei namens „index.html“.
  2. Öffnen Sie die Datei mit einem beliebigen Texteditor wie Visual Code oder Atom. Fügen Sie die grundlegende HTML-Codestruktur hinzu: <!doctype html>
    <html lang="en-US">
      <head>
        <title>Snake Game</title>
      </head>
      <body>

      </body>
    </html>

  3. Fügen Sie innerhalb des Body-Tags eine Leinwand hinzu, die das Spielbrett für die Schlange darstellt. <h2>Snake Game</h2>
    <div id="game">
      <canvas id="snake"></canvas>
    </div>
  4. Erstellen Sie im selben Ordner wie Ihre HTML-Datei eine neue Datei namens „styles.css“.
  5. Fügen Sie im Inneren etwas CSS für die gesamte Webseite hinzu. Sie können Ihre Website auch mit anderen wichtigen CSS-Tipps und Tricks gestalten. #game {
      width:400px;
      height:400px;
      margin:0 auto;
      background-color:#eee;
    }
    h2 {
      text-align:center;
      font-family:Arial;
      font-size:36px;
    }
  6. Fügen Sie in Ihrer HTML-Datei einen Link zum CSS im Head-Tag hinzu: <link rel="stylesheet" type="text/css" href="styles.css">
  7. Um die Leinwand anzuzeigen, öffnen Sie Ihre „index.html“-Datei in einem Webbrowser.
    Schlangenspiel mit leerer Leinwand

Wie man die Schlange zeichnet

Im folgenden Beispiel stellt die schwarze Linie die Schlange dar:

Schlangenspiel mit Schlangenbeispiel

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: <body>
      <!-- Your code here -->
      <script src="script.js"></script>
    </body>
  2. Erstellen Sie script.js und beginnen Sie damit, das DOM-Element der Leinwand abzurufen: var canvas = document.getElementById("snake");
  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 = false;
    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 snakeSegments = [];
    var snakeLength = 1;
  6. Geben Sie die anfängliche X- und Y-Position der Schlange an: var snakeX = 0;
    var snakeY = 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: function moveSnake() {
      snakeSegments.unshift({ x: snakeX, y: snakeY });
    }
  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: function drawSnake() {
      canvas2d.fillStyle = "black";
    }
  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:   for (var i = 0; i < snakeSegments.length; i++) {
        canvas2d.fillRect(snakeSegments[i].x, snakeSegments[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: function gameLoop() {
      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.
    Schlangenspiel mit Schlange in Ausgangsposition

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 directionX = 10;
    var directionY = 0;
  2. Fügen Sie einen Ereignishandler hinzu, der ausgelöst wird, wenn der Spieler eine Taste drückt: document.onkeydown = function(event) {

    };

  3. Ändern Sie innerhalb des Ereignishandlers die Richtung, in die sich die Schlange bewegt, basierend auf der gedrückten Taste: switch (event.keyCode) {
      case 37: // Left arrow
        directionX = -10;
        directionY = 0;
        break;
      case 38: // Up arrow
        directionX = 0;
        directionY = -10;
        break;
      case 39: // Right arrow
        directionX = 10;
        directionY = 0;
        break;
      case 40: // Down arrow
        directionX = 0;
        directionY = 10;
        break;
    }
  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: function moveSnake() {
      snakeSegments.unshift({ x: snakeX, y: snakeY });
      snakeX += directionX;
      snakeY += directionY;
    }
  5. Das Spiel entfernt derzeit keine vorherigen Segmente, während sich die Schlange bewegt. Dadurch sieht die Schlange so aus:
  6. Snake-Beispiel ohne Segmente zu löschen 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: while (snakeSegments.length > snakeLength) {
      snakeSegments.pop();
    }
  8. Öffnen Sie die Datei „index.html“ und drücken Sie die linke, rechte, obere oder untere Taste, um die Schlange zu bewegen.
    Einzelnes Schlangenstück, das sich um das Brett bewegt

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 dots = [];
  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: function spawnDots() {
      if(dots.length < 10) {
        var dotX = Math.floor(Math.random() * canvas.width);
        var dotY = Math.floor(Math.random() * canvas.height);
        dots.push({ x: dotX, y: dotY });
      }
    }
  3. Nachdem Sie die X- und Y-Koordinaten für das Essen generiert haben, zeichnen Sie sie mit roter Farbe auf die Leinwand: for (var i = 0; i < dots.length; i++) {
      canvas2d.fillStyle = "red";
      canvas2d.fillRect(dots[i].x, dots[i].y, 10, 10);
    }
  4. Rufen Sie die neue Funktion spawnDots() innerhalb der Spielschleife auf: function gameLoop() {
      moveSnake();
      drawSnake();
      spawnDots();
      if(!gameEnded) {
        setTimeout(gameLoop, 100);
      }
    }
  5. Öffnen Sie die Datei „index.html“, um das Essen auf dem Spielbrett anzuzeigen.
    Schlangenspiel mit Futterstücken an Bord

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: function checkCollision() {
      for (var i = 0; i < dots.length; 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: if (snakeX < dots[i].x + 10 &&
      snakeX + 10 > dots[i].x &&
      snakeY < dots[i].y + 10 &&
      snakeY + 10 > dots[i].y) {
        snakeLength++;
        dots.splice(i, 1);
    }
  3. Rufen Sie die neue Funktion checkCollision() in der Spielschleife auf: function gameLoop() {
      moveSnake();
      drawSnake();
      spawnDots();
      checkCollision();
      if(!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.
    Schlangenspiel mit finalem Spielbrett

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 zum Drucken einer „Game Over“-Warnung. function gameOver() {
      setTimeout(function() {
        alert("Game over!");
      }, 500);
      gameEnded = true
    }
  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: if (snakeX < -10 ||
      snakeY < -10 ||
      snakeX > canvas.width+10 ||
      snakeY > canvas.height+10) {
        gameOver();
    }
  3. Um zu überprüfen, ob der Kopf der Schlange mit einem der Schwanzsegmente kollidiert ist, schleifen Sie durch jedes Stück der Schlange: for (var i = 1; i < snakeSegments.length; 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: if (snakeX === snakeSegments[i].x && snakeY === snakeSegments[i].y) {
      gameOver();
    }
  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.
    Game over Alarm im Schlangenspiel

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.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert