1 Ssssnake
In diesem Kurs wollen wir gemeinsam den Spieleklassiker Snake programmieren. Es gibt natürlich wieder ein Erklärvideo, dass dich durch die einzelnen Schritte begleitet. Am meisten lernst du aber, wenn du es zunächst alleine versuchst. Die wichtigsten Informationen dazu erhältst du hier.
Spielregeln: Du bewegst mithilfe der Tastatur eine Schlange in einer 2D-Spielwelt. Es erscheint ein Apfel (in unserem Fall natürlich Kekse) an einer zufälligen Position, den du sammeln musst, indem du den Kopf der Schlange über den Apfel steuerst. Ist ein Apfel gesammelt erscheint ein neuer, dein Punktestand (Keksspeicher) wird erhöht und die Schlange wird länger. Um den Schwierigkeitsgrad zu erhöhen, steigert die Schlange ab einer gewissen Anzahl von Äpfeln ihre Geschwindigkeit. Du musst darauf achten, dass du nicht mit den Wänden oder dem Körper der Schlange kollidierst, sonst ist das Spiel vorbei.
In diesem Kurs wird auf die vorherigen Teile aufgebaut. Du benötigst also Kenntnisse über Variablen, Objekte und Arrays, Funktionen, Entscheidungen und Ereignisse.
Am Ende dieser Lektion kannst du...
... auf Tastatureingaben reagieren (Eventlistener, keydown, keycode)
... in ein HTML canvas-Element zeichnen
... eine Zählschleife einsetzen (for)
... eine bedingte Schleife verwenden (while)
2 Vorbereitung
Wie im letzten Kurs musst du auch diesmal deine HTML-Seite (index.html) und deine Stylesheets (default.css) anpassen. Dabei kannst du dich an den Dialogen der vorherigen Kurse (Tic-Tac-Toe und Stein-Schere-Papier) orientieren.
3 Malen nach Zahlen
In HTML gibt es ein sogenanntes canvas-Element. Canvas bedeutet so viel wie "Zeichenfläche" und ermöglicht es, ähnlich wie in einem Zeichenprogramm, Formen, Schriften und Bilder zu zeichnen. Dazu besitzt ein Canvas einen Context, der in unserem Fall 2D ist (3D gibt es natürlich auch). Innerhalb des Canvas könnt ihr Positionen mit x- und y-Koordinaten angeben.
Damit wir nicht nur einfache Formen und Texte zeichnen, sondern auch die Grafiken unseres Monsters nutzen können, müssen wir die zunächst aus den Bilddateien in ein Image-Objekt laden. Wie ein Bild in der HTML-Seite hat auch ein Image-Objekt ein src-Attribut, in dem du den Dateinamen angeben kannst. Bei größeren Grafiken ist es sinnvoll einen Mechanismus einzubauen, der prüft, wann der Interpreter die Grafik komplett geladen hat. In unserem Fall ist das aber nicht notwendig.
In einem Spiel, dass in "Echtzeit" abläuft müssen sogenannte Frames gezeichnet werden (vielleicht kennst du die Bezeichnung fps - Frames per Second). Das bedeutet unser Spielfeld wird in regelmäßigen Zeitabständen aktualisiert und neu gezeichnet. In Computerspielen übernimmt diesen Vorgang meistens eine Game-Loop, also ein Code, der immer wieder ausgeführt wird. Da die Game-Loop in jedem Frame ähnliche Dinge macht, eignet sich dafür eine Funktion, die einmal zu Beginn und anschließend über die Funktion setTimeout() zeitgesteuert aufgerufen wird.
4 Hau in die Tasten
Unsere Schlange soll den Tastatureingaben des Benutzers folgen. Dazu benötigst du ein paar Informationen.
Zunächst ist eine Tastatureingabe ein Event (Ereignis). Das kennst du schon von den Event-Attributen in HTML z.B. bei Klicks. Das Ereignis wird vom Browser erkannt, aber dein Code muss auch darauf reagieren. Dazu gibt es die sogenannten Eventlistener. Wenn du weißt, wie ein Event heißt, dann kannst du über dein DOM angeben, welche Funktion bei einem solchen Event aufgerufen werden soll. Diese Technik bzw. Funktion nennt sich eine Callback-Funktion und in diesem Fall spricht man von einem Eventhandler, weil die Funktion auf ein Event reagiert.
Jedem Eventhandler wird als Übergabeparameter das Event selbst als Objekt übergeben. Die Attribute des Objekts geben z.B. an, auf welches target (Ziel) geklickt wurde, an welche Position auf der Seite (x-/y-Koordinaten) oder welche Taste gedrückt wurde.
Die Taste im Attribut keycode gespeichert. Welche Taste es auf der Tastatur war zeigt der keycode in Form einer Zahl an. Die Leertaste entspricht z.B. dem keycode 32.
5 Bewegung in die Schlange bringen (Schleifen)
Nun da unsere Steuerung funktioniert, ist es an der Zeit die Schlange zu bewegen und zu zeichnen. Dazu musst du erstmal definieren wie dein Spielfeld aufgebaut ist. In unserem Fall teilen wir das Spielfeld in quadratische Kacheln (Tiles) ein. Das Spielfeld ist 20x20 Kacheln groß.
Das macht uns die Positionierung des Schlangenkopfs, der Äpfel und des Schwanzes einfacher, weil wir uns nicht um Pixel-Werte kümmern, sondern nur sagen, auf welcher Kachel sich das Teil befindet.
Um Programmabläufe wiederholt auszuführen, gibt es in fast allen höheren Programmiersprachen eine eigene Kontrollstruktur. Kontrollstrukturen steuern den Ablauf eines Programmes z.B. durch Entscheidungen. Gleich zwei unterschiedliche sogenannte Schleifen schauen wir uns jetzt etwas genauer an.
Wenn vor Beginn der Schleife bekannt ist, wie viele Wiederholungen gemacht werden sollen, dann eignet sich Zählschleife sehr gut. Sie wird in fast allen Programmiersprachen mit dem Schlüsselwort for gekennzeichnet und darum oft for-Schleife genannt.
Eine for-Schleife benötigt zur Steuerung drei Dinge.
Zählvariable: eine lokale Variable, die im Schleifenkopf deklariert und initialisiert wird. Ihr Wert wird nach jeder Wiederholung verändert und sie kann im Codeblock der wiederholt wird wie eine normale Variable verwendet werden. z.B. let i = 2
Schleifenbedingung: eine Bedingung, die angibt, wann der Codeblock ausgeführt bzw. wiederholt werden kann. z.B. i <= 8
Schrittweite: die Veränderung der Zählvariable nach jeder Wiederholung z.B. i = i +2
for (let i = 2; i <= 8; i = i + 2){
console.log(i)
} Das Beispiel würde von 2 bis 8 zählen und nach jeder Wiederholung die Zählvariable um 2 erhöhen. In jeder Wiederholung wird der Wert der Zählvariable ausgegeben. Was wird ausgegeben?
Manchmal kann vorab nicht bestimmt werden, wie oft eine Schleife wiederholt werden muss. Dann ist eine Zählschleife nicht flexibel genug.
Zu diesem Zweck gibt es eine bedingte Schleife (manchmal auch kopfgesteuerte Schleife genannt). In den meisten Programmiersprachen, die von der Programmiersprache C abstammen, wird sie mit dem Signalwort while definiert und darum oft auch while-Schleife genannt.
Im Kopf einer while-Schleife wird lediglich eine Schleifenbedingung angegeben. Ist die Bedingung wahr (true), dann wird der Codeblock ausgeführt bzw. wiederholt. Die Bedingung kann dabei, wie bei einer Entscheidung (if), das Ergebnis eines Vergleichs oder ein Wert sein.
Im folgende Beispiel siehst du zwei while-Schleifen. Versuch zu verstehen, was das Programm macht.
let fahren = true
let tank = 50
while (fahren){
if(tank < 10){
console.log("Reserve!")
fahren = false
}
tank = tank - 2
}
while(tank < 100){
tank += 0.5
}
Wenn du mehr Informationen zum Thema Schleifen haben möchtest, findest du hier noch jede Menge zusätzliche Informationen:
