Snake ist eines der beliebtesten Spiele, das seit den ersten Mobiltelefonen zu uns gekommen ist. Dieser einfache, aber aufregende Taymkiller ist bis heute gefragt. Wenn Sie Ihre eigene Version des Spiels Snake mit JavaScript erstellen möchten, finden Sie hier eine Schritt-für-Schritt-Anleitung für Sie.
Schritt 1: Konfigurieren der Umgebung
Der erste Schritt beim Erstellen eines JavaScript-Spiels Snake besteht darin, die Entwicklungsumgebung anzupassen. Sie benötigen einen beliebigen Texteditor und einen Webbrowser. Es wird empfohlen, einen Code-Editor zu verwenden, der JavaScript-Syntaxhervorhebung unterstützt, um den Entwicklungsprozess zu erleichtern.
Erstellen Sie eine neue Datei mit der Erweiterung ".html" und öffnen Sie es in einem von Ihnen gewählten Texteditor. Sie müssen dieser Datei einige grundlegende HTML-Tags hinzufügen, z. B. und .
Schritt 2: Zeichnen des Spielfeldes
Der zweite Schritt besteht darin, ein Spielfeld zu erstellen, auf dem das Snake-Spiel stattfinden wird. Dazu müssen Sie ein Tag verwenden . Mit Hilfe von JavaScript werden wir eine Schlange und andere Objekte auf diesem Feld zeichnen.
Fügen Sie dem Textkörper Ihrer HTML-Datei den folgenden Code hinzu:
Dieser Code erstellt ein Feld mit der ID "game" und einer Größe von 400x400 Pixeln. Dies wird unser Spielfeld sein, auf dem wir eine Schlange anzeigen werden.
Auswählen einer Programmiersprache
Im Moment gibt es viele Programmiersprachen, von denen jede ihre eigenen Eigenschaften und Vorteile hat. Um das Spiel "Snake" in JavaScript zu erstellen, ist natürlich die JavaScript-Sprache die am besten geeignete Wahl.
JavaScript ist eine leistungsstarke und flexible Programmiersprache, die häufig für die Entwicklung interaktiver und dynamischer Webanwendungen verwendet wird. Es ermöglicht Ihnen, komplexe Algorithmen zu erstellen, mit Daten zu arbeiten, Ereignisse zu verarbeiten und vieles mehr.
Die Wahl von JavaScript zum Erstellen eines Snake-Spiels hat mehrere Vorteile. Erstens ist JavaScript eine der beliebtesten Programmiersprachen, was bedeutet, dass es für Sie einfacher ist, Ressourcen und eine Community zu finden, die Sie unterstützen können. Zweitens ist JavaScript eine clientseitige Sprache, dh es wird direkt im Browser des Benutzers ausgeführt, ohne dass zusätzliche Software installiert werden muss.
Daher ist die Auswahl von JavaScript optimal für die Erstellung eines JavaScript-Snake-Spiels. Die Schritt-für-Schritt-Anleitung hilft Ihnen, die Grundlagen zum Erstellen von Spielen und zur Entwicklung in JavaScript zu erlernen.
Es sollte auch beachtet werden, dass es neben JavaScript auch andere Programmiersprachen gibt, die zum Erstellen von Spielen geeignet sind. Zum Beispiel Python, C++, Java und andere. Jede dieser Sprachen hat ihre eigenen Besonderheiten und Anwendungsbereiche. Wenn Sie jedoch gerade erst mit dem Programmieren beginnen oder ein einfaches Snake-Spiel erstellen möchten, wird empfohlen, JavaScript zu wählen.
Installieren und Konfigurieren der Entwicklungsumgebung
Um mit der Entwicklung des JavaScript-Spiels Snake zu beginnen, müssen Sie die Entwicklungsumgebung konfigurieren. In diesem Abschnitt werden einige Schritte erläutert, mit denen Sie die erforderliche Software installieren und für Ihr Projekt konfigurieren können.
Schritt 1: Installieren des Code-Editors
Der erste Schritt besteht darin, einen Code-Editor zu installieren, der zum Schreiben des Snake-Spiels in JavaScript verwendet wird. Sie können einen beliebigen Code-Editor auswählen, den Sie mögen, aber für diesen Artikel empfehlen wir die Verwendung von Visual Studio Code.
Sie können Visual Studio Code von der offiziellen Website unter
Schritt 2: Erstellen eines neuen Projekts
Nachdem Sie Visual Studio Code ausgeführt haben, können Sie ein neues Projekt erstellen, indem Sie im oberen Menü die Option "Datei" und dann "Neue Datei" auswählen. Geben Sie der Datei den Namen "index.html", das als Hauptdatei Ihres Spiels verwendet wird.
Schritt 3: Konfigurieren der HTML-Datei
Öffnen Sie die erstellte Index-Datei.html" und fügen Sie den folgenden Code hinzu:
Игра Змейка Dieser Code definiert die Hauptstruktur der HTML-Datei und verbindet Stil- und JavaScript-Dateien für Ihr Spiel. Sie können "styles" -Dateien erstellen.css" und "game.js" später, im Moment existieren sie nicht.
Schritt 4: Anpassen von Stilen und JavaScript
Jetzt können Sie "styles" -Dateien erstellen.css" und "game.js" im selben Ordner, in dem sich die index-Datei befindet.html". In der Datei "styles.css" Sie können Stile zu Ihrem Spiel hinzufügen, während in der Game-Datei ".js" Sie werden die Logik des Spiels Snake in JavaScript entwickeln.
Jetzt ist Ihre Entwicklungsumgebung bereit, das Spiel Snake in JavaScript zu erstellen. In den folgenden Abschnitten erfahren Sie, wie Sie die Funktionalität des Spiels hinzufügen und Code schreiben, um die Schlange zu steuern.
Erstellen eines Spielfeldes
Bevor wir mit der Entwicklung eines Spielfeldes beginnen, müssen wir HTML-Elemente erstellen, die es auf der Seite darstellen.
Zuerst erstellen wir ein Tabellenelement und definieren dessen Größe:
Hier erstellen wir eine Tabelle mit der ID "game-board" und füllen sie mit Reihen und Zellen aus. Die Anzahl der Reihen und Zellen kann nach dem Zufallsprinzip ausgewählt werden, abhängig von den Abmessungen, die Sie für das Spielfeld verwenden möchten.
Um ein Feld programmgesteuert zu erstellen, können Sie den folgenden JavaScript-Code verwenden:
const gameBoard = document.getElementById("game-board");for (let i = 0; i < 20; i++) gameBoard.appendChild(row);>In diesem Code verwenden wir die Funktion getElementById, um einen Verweis auf eine Tabelle anhand ihrer ID abzurufen, und verwenden dann Schleifen, um die gewünschte Anzahl von Zeilen und Zellen zu erstellen.
Nachdem Sie diesen Code ausgeführt haben, sehen Sie ein Spielfeld auf der Seite, das als Tabelle mit der entsprechenden Anzahl von Zellen dargestellt ist.
Hinzufügen einer Schlange zu einem Feld
Jetzt, da wir das Spielfeld erstellt haben, ist es an der Zeit, eine Schlange darauf hinzuzufügen. Dafür brauchen wir:
1. Erstellen Sie eine Schlange. Eine Schlange kann als Array von Punkten (Koordinaten) auf dem Spielfeld dargestellt werden.
2. Zeigt eine Schlange auf dem Feld an. Um dies zu tun, werden wir jeden Schlangenpunkt und jeden Käfig des Spielfeldes durchlaufen, um die CSS-Klasse zu vergleichen, die die Schlange anzeigt.
3. Steuern Sie die Schlange. Wir werden auf die Ereignisse der Tastatur hören und die Richtung der Bewegung der Schlange entsprechend den gedrückten Tasten ändern.
Beginnen wir mit der Erstellung einer Schlange. Wir werden eine Snake-Variable haben, die ein Array von Point-Objekten darstellt. Jeder Punkt hat zwei Eigenschaften - x und y, die die Koordinaten eines Punktes auf dem Spielfeld darstellen.
Fügen Sie der Hauptdatei des Spiels den folgenden Code hinzu:
Die Schlange wurde jetzt erstellt und als ein Array von drei Punkten dargestellt. Aber um eine Schlange auf dem Feld anzuzeigen und zu verwalten, müssen wir zusätzliche Funktionen implementieren. Betrachten wir sie im nächsten Abschnitt.
Schlangenfunktionalität schreiben
Nachdem wir das Spielfeld erstellt und die Startposition der Schlange generiert haben, können wir mit dem Schreiben der Funktion beginnen, die für die Verwaltung der Schlange und die Verarbeitung ihrer Bewegung verantwortlich ist.
moveSnake-Funktion
Das Hauptsteuerelement der Schlange ist die Funktion moveSnake. In dieser Funktion bestimmen wir die Bewegung der Schlange in Abhängigkeit von der gewählten Richtung.
Beim Aufruf der Funktion moveSnake() werden wir die aktuelle Richtung der Schlange überprüfen und sie um eine Zelle in die entsprechende Richtung verschieben.
changeDirection-Funktion
Damit der Benutzer die Schlange über die Tastatur steuern kann, fügen wir eine Funktion hinzu changeDirection, die das Drücken der Pfeiltasten nach oben, unten, links und rechts verfolgen wird. Wenn Sie die Pfeiltaste drücken, ändert die Schlange ihre Bewegungsrichtung.
checkCollision-Funktion
Damit das Spiel fortgesetzt wird, bis die Schlange mit sich selbst oder den Grenzen des Feldes kollidiert, fügen wir eine Funktion hinzu checkCollision. In dieser Funktion werden wir prüfen, ob eine Kollision aufgetreten ist, und im Falle einer Kollision das Spiel beenden.
eatFood-Funktion
Es lohnt sich auch, eine Funktion hinzuzufügen eatFood, die für die Überprüfung verantwortlich sein wird, ob die Schlange Essen gegessen hat. Falls die Schlange eine Mahlzeit gegessen hat, werden wir ihre Länge erhöhen und eine neue Position zum Essen erzeugen.
gameOver-Funktion
Wenn wir all diese Funktionen in Kombination schreiben, können wir ein komplettes Snake-Spiel in JavaScript implementieren.
Hinzufügen von Nahrung zum Feld
Im Snake-Spiel ist das Essen ein zufälliges Feld auf dem Spielfeld, das die Schlange essen kann, um zu wachsen. Um dem Feld Nahrung hinzuzufügen, benötigen wir den folgenden Code:
function createFood()function drawFood()Die Funktion createFood() erzeugt zufällige Koordinaten für eine neue Mahlzeit auf dem Feld. Dann wird ein Objekt mit diesen Koordinaten erstellt und dem foodArray hinzugefügt. Die Funktion drawFood() zeichnet jede Essenseinheit auf dem Spielfeld.
Um die Funktion createFood() aufzurufen und dem Feld eine neue Mahlzeit hinzuzufügen, können wir das Keydown-Ereignis verwenden, wenn eine Schlange eine vorhandene Mahlzeit isst:
document.addEventListener("keydown", function(event) >);Jetzt, da die Schlange das Essen isst, wird dem Feld neues Essen hinzugefügt. Drücken Sie einfach die Leertaste, um die Funktion createFood() aufzurufen und dem Feld eine neue Mahlzeit hinzuzufügen.
