Mission 2: Snake - Ullmannmedien

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 den Code
CODE SKILLS:Das Spielfeld
Mit einem Canvas, einem Array und mit den Methoden split und forEach erzeugst du die Grafik für das Spielfeld.
Hole den Code
CODE SKILLS:Das Spielfeld organisieren
Verwende Objektliterale, um zusammengehörige Programmstücke zusammenzufassen.
Hole den Code
CODE SKILLS:Die Schlange hinzufügen
Erstelle eine Schlange und definiere eine Funktion, die die Schlange auf das Spielfeld zeichnet.
Hole 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 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 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 den Code
CODE SKILLS:Wände und Kollisionen
Gib dem Spiel eine Kollisionserkennung, sodass die Schlange nicht mehr durch Wände gehen kann.
Hole den Code
CODE SKILLS:Game Over
Das Spiel soll enden, wenn die Schlange gegen eine Wand stößt.
Hole den Code
CODE SKILLS:Eine Frucht hinzufügen
Setze eine Frucht auf das Spielfeld.
Hole 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 den Code
CODE SKILLS:Weitere Früchte hinzufügen
Setze weitere Früchte an Zufallspositionen.
Hole den Code
CODE SKILLS:Fehler beseitigen
Beseitige die letzten Fehler und stelle das Spiel fertig.
Hole den Code

SUPER SKILLS: Entwickle dein Spiel weiter!

Hole den kompletten Quellcode für dein Spiel und entwickle es weiter.

Hole den Code

Name	Borlabs Cookie
Anbieter	Eigentümer dieser Website, Impressum
Zweck	Speichert die Einstellungen der Besucher, die in der Cookie Box von Borlabs Cookie ausgewählt wurden.
Cookie Name	borlabs-cookie
Cookie Laufzeit	1 Jahr

Akzeptieren	Google Analytics
Name	Google Analytics
Anbieter	Google Ireland Limited, Gordon House, Barrow Street, Dublin 4, Ireland
Zweck	Cookie von Google für Website-Analysen. Erzeugt statistische Daten darüber, wie der Besucher die Website nutzt.
Datenschutzerklärung	https://policies.google.com/privacy?hl=de
Cookie Name	_ga,_gat,_gid
Cookie Laufzeit	2 Jahre

CODE SKILLS:Grafiken erstellen

CODE SKILLS:Das Spielfeld

CODE SKILLS:Das Spielfeld organisieren

CODE SKILLS:Die Schlange hinzufügen

CODE SKILLS:Das Spiel zum Ticken bringen

CODE SKILLS:Die Schlange in Bewegung setzen

CODE SKILLS:Die Schlange steuern

CODE SKILLS:Wände und Kollisionen

CODE SKILLS:Game Over

CODE SKILLS:Eine Frucht hinzufügen

CODE SKILLS:Früchte verspeisen

CODE SKILLS:Weitere Früchte hinzufügen

CODE SKILLS:Fehler beseitigen

SUPER SKILLS: Entwickle dein Spiel weiter!