Mission 2: Snake

In Mission 2 programmierst du deine eigene Version des bekannten Computerspiels Snake. Mit JavaScript bringst du die Schlange in Bewegung und lässt Früchte auf dem Spielfeld erscheinen. Du lernst ein neues HTML-Element namens canvas kennen, mit dem du 2D-Grafiken erstellen kannst. Du definierst Objektliterale und bringst dein Spiel zum „Ticken“. Du findest heraus, wie man Tastatureingaben verarbeitet, sodass du die Schlange steuern kannst.

Am Ende der Mission kannst du mit deiner eigenen Snake-App spielen.

CODE SKILLS

Grafiken erstellen

Lerne, wie man mit JavaScript das canvas-Element nutzt.

Hole dir den Code

CODE SKILLS

Das Spielfeld

Mit einem Canvas, einem Array und mit den Methoden

Hole dir den Code

CODE SKILLS

Das Spielfeld organisieren

Verwende Objektliterale, um zusammengehörige Programmstücke zusammenzufassen.

Hole dir den Code

CODE SKILLS

Die Schlange hinzufügen

Erstelle eine Schlange und definiere eine Funktion, die die Schlange auf das Spielfeld zeichnet.

Hole dir den Code

CODE SKILLS

Das Spiel zum Ticken bringen

Verwende die Funktion setTimeout um die Schlange in Bewegung zu versetzen. Wir werden später den neuen Funktionen noch weitere Anweisungen hinzufügen.

Hole dir den Code

CODE SKILLS

Die Schlange in Bewegung setzen

Verwende die Array-Methoden unshift und pop, um die Schlange über den Bildschirm kriechen zu lassen.

Hole dir den Code

CODE SKILLS

Die Schlange steuern

Mit der Funktion addEventListener sorgst du dafür, dass die Bewegung der Schlange über die WASD-Tasten auf der Tastatur gesteuert werden kann.

Hole dir den Code

CODE SKILLS

Wände und Kollisionen

Gib dem Spiel eine Kollisionserkennung, sodass die Schlange nicht mehr durch Wände gehen kann.

Hole dir den Code

CODE SKILLS

Game Over

Das Spiel soll enden, wenn die Schlange gegen eine Wand stößt.

Hole dir den Code

CODE SKILLS

Eine Frucht hinzufügen

Setze eine Frucht auf das Spielfeld.

Hole dir den Code

CODE SKILLS

Früchte verspeisen

Lasse die Schlange die Früchte verspeisen. Wenn eine Frucht getroffen worden ist, soll sie vom Spielfeld verschwinden und die Schlange soll um ein Quadrat länger werden.

Hole dir den Code

CODE SKILLS