„Schlange“ in JavaScript: Ihr erstes Browser-Spielprojekt

Startbildschirm und Schnittstellenmarkup

Hier ist das minimale HTML, das drei Zustände erzeugt: Start, Spiel und "Spielende", plus Punktzahl und Spielfeld.

<div id="startScreen">
  <h1>🐍 Змейка</h1>
  <button onclick="startGame()">Начать игру</button>
</div>

<div id="gameOverScreen" style="display:none">
  <h1>💀 Игра окончена!</h1>
  <p id="finalScore"></p>
  <button onclick="location.reload()">Играть снова</button>
</div>

<h1 id="score">Очки: 0</h1>
<canvas id="game" width="320" height="320"></canvas>
    

Was hier passiert:

• #startScreen — Begrüßungsbildschirm. Die Schaltfläche ruft die Funktion startGame() auf.

• #gameOverScreen — erscheint, nachdem die Schlange mit sich selbst oder mit der Grenze kollidiert ist.

• #score — zeigt die aktuellen Punkte an.

• <canvas> - das Spielfeld, auf dem die Schlange und das Essen gezeichnet werden.

  

Kleines Wörterbuch der Begriffe 👇

• Canvas — HTML-Element für 2D-Zeichnungen. Mit JavaScript können Sie manuell Quadrate, Linien und Formen zeichnen.

• Raster (grid) - Das Feld ist in gleiche Quadrate unterteilt (z. B. 16 × 16 Pixel). Alle Koordinaten der Schlange und des Futters werden durch Zellen ausgedrückt.

• Spielzyklus (game loop) - eine Funktion, die den Status des Spiels regelmäßig aktualisiert und das Feld neu zeichnet.

• Kollisionen (collisions) - Überprüfen Sie, ob die Schlange in sich selbst oder in die Grenze gestoßen ist und ob sie das Essen gegessen hat.

• Zustand (state) — eine Reihe von Variablen: Koordinaten, Bewegungsrichtung, Punktzahl, Status (Spiel läuft oder ist beendet).

Wie man das Spiel belebt: Logik in JavaScript?

Fügen Sie ein Skript hinzu, das die Bewegung der Schlange steuert, Kollisionen überprüft und jedes Bild zeichnet:

1. Initialisierung: Erstellen Sie canvas und den Kontext 2d, definieren Sie die Größe der Zelle und des Arrays der Schlangen-Segmente.

2. Steuerung: Verfolgen Sie die Tastatureingaben ArrowUp, ArrowDown, ArrowLeft, ArrowRight.

3. Spielzyklus: Bewegen Sie die Schlange alle 150 ms, überprüfen Sie die Kollisionen, aktualisieren Sie die Punktzahl.

4. Zeichnung: das Feld und zeichnen Sie die Lebensmittel- und Schlangensegmente neu.

💡 Tipp: verwenden Sie requestAnimationFrame für die Laufruhe und stellen Sie die Bewegungsfrequenz über den akkumulierten Timer ein.

Ideen für Verbesserungen.

• Füge Beschleunigung hinzu - das Spiel wird mit jedem Level schwieriger.

• Erstellen Sie "Teleporter" an den Rändern des Feldes, damit die Schlange auf der anderen Seite herauskommt.

• Speichern Sie Datensätze in localStorage.

• Fügen Sie helle und dunkle Themen hinzu.

• Implementieren Sie eine Pause auf der Taste P oder Esc.

Das Erstellen des Snake-Spiels ist ein großartiger erster Schritt zum Erlernen von JavaScript. Sie lernen nicht nur, mit canvas und Schleifen zu arbeiten, sondern verstehen auch die Grundlagen der Spiellogik: Bewegung, Kollisionen, Status und Aktualisierung der Benutzeroberfläche.

Projekt „Schlange“ — Teil der Lern-Miniprojekte aus der App Kodik, speziell für Anfänger entwickelt. Es hilft dir, die Grundlagen von JavaScript zu verstehen, die Funktionsweise der Spiellogik zu verstehen und zu sehen, wie dein Code direkt im Browser zum Leben erweckt wird.

In Kodike Dutzende solcher Projekte warten auf Sie - von einfachen Spielen bis hin zu kleinen Anwendungen mit Schnittstelle und Logik. Jedes von ihnen ist ein Schritt nach vorn, um zu lernen, wie man sicher und mit Interesse Code schreibt.

Und wir haben auch gemütlich Telegram-Community, wo wir uns gegenseitig helfen, Ideen austauschen und einfach über Programmierung sprechen. Mach mit — es wird großartig! 🚀

👉 Unsere Community: https://t.me/coursme