Open Lehrwerkstatt 2024! Diese Veranstaltung fördert den Austausch von Wissen, die kreative Zusammenarbeit und das praktische Lernen. In diesem Jahr haben wir uns für ein klassisches Projekt entschieden: die Entwicklung eines Snake-Spiels.
Das Snake-Spiel dient mehreren pädagogischen und praktischen Zwecken:
-
Einführung in die Programmierung:
- Das Snake-Spiel ist ein hervorragendes Beispiel, um grundlegende Programmierkonzepte wie Schleifen, Bedingungen, Funktionen und Arrays zu vermitteln. Es bietet eine praxisnahe Möglichkeit, diese Konzepte zu erlernen und anzuwenden.
-
Verständnis der Spielentwicklung:
- Durch die Entwicklung dieses Spiels erhalten die Teilnehmer Einblicke in die Mechaniken und Logiken, die hinter der Erstellung von Videospielen stehen. Dazu gehören die Spiellogik, die Kollisionserkennung, die Steuerung und die grafische Darstellung.
-
Förderung von Kreativität und Problemlösung:
- Die Teilnehmer werden ermutigt, kreative Lösungen zu entwickeln und das Spiel nach ihren eigenen Vorstellungen zu erweitern. Dies kann das Hinzufügen neuer Funktionen, die Anpassung des Designs oder das Verbessern der Benutzeroberfläche umfassen.
-
Teamarbeit und Zusammenarbeit:
- Das Projekt ist darauf ausgelegt, die Zusammenarbeit und den Austausch zwischen den Teilnehmern zu fördern. Durch Teamarbeit lernen die Teilnehmer, wie man effektiv kommuniziert, Probleme gemeinsam löst und zusammen an einem gemeinsamen Ziel arbeitet.
-
Anwendung moderner Webtechnologien:
- Das Snake-Spiel wird unter Verwendung moderner Webtechnologien wie HTML, CSS und JavaScript entwickelt. Dies gibt den Teilnehmern praktische Erfahrungen mit Technologien, die in der heutigen Webentwicklung weit verbreitet sind.
Das Snake-Spiel wurde aufgrund seiner Einfachheit und seines hohen Lernwerts ausgewählt. Es ist leicht verständlich, bietet jedoch genügend Tiefe, um verschiedene Programmier- und Designkonzepte zu erkunden. Es stellt eine ideale Plattform dar, um die Grundlagen der Spielentwicklung und der Programmierung zu erlernen.
Das Projekt ist offen und jeder ist eingeladen, daran teilzunehmen. Ob Anfänger oder Fortgeschrittener, jeder kann zum Projekt beitragen, neue Ideen einbringen und das Spiel weiterentwickeln. Das Ziel ist es, ein gemeinschaftliches Lernumfeld zu schaffen, in dem Wissen frei geteilt und angewendet wird.
Das Sprite Image ist ein Image aus 5 Spalten x 4 Reihen mit 64px x 64p x Sprite Images.
Quelle: Sprit Image rembound / Snake-Game-HTML5
Mit diesen Indizes wird der Schlangen Teil aus dem Sprite geladen.
[3, 0]: Kopf nach oben
[4, 0]: Kopf nach rechts
[3, 1]: Kopf nach links
[4, 1]: Kopf nach unten
[1, 0]: Gerade horizontale Linie
[2, 0]: Rechtskurve von Horizontal zu Vertikal (links nach unten)
[2, 1]: Gerade vertikale Linie
[2, 2]: Linkskurve von Vertikal zu Horizontal (oben nach links)
[0, 1]: Linkskurve von Horizontal zu Vertikal (rechts nach oben)
[0, 0]: Rechtskurve von Vertikal zu Horizontal (unten nach rechts)
Am Beispiel des Schlangen Kopfes, wird gezeigt wie die Sprite Images auf das Canvas gezeichnet werden.
context.drawImage(tileImage, tx * 64, ty * 64, 64, 64, tilex, tiley, level.tilewidth, level.tileheight);
-
Segment finden: Der Kopf der Schlange ist immer das erste Segment in der
snake.segments
-Liste. Wir holen uns seine Koordinatensegx
undsegy
. -
Kopf-Position bestimmen:
tilex
undtiley
berechnen die Position des Kopfes auf dem Canvas. Dies geschieht durch Multiplizieren der Segment-Koordinaten (segx
undsegy
) mit der Breite und Höhe einer Kachel (level.tilewidth
undlevel.tileheight
).- Beispiel: Wenn der Kopf an Position (2, 3) ist und jede Kachel 36 Pixel groß ist, dann ist
tilex = 2 * 36 = 72
undtiley = 3 * 36 = 108
.
-
Aussehen des Kopfes festlegen:
tx
undty
bestimmen, welcher Teil des BildestileImage
als Kopf der Schlange verwendet wird. Dies hängt davon ab, in welche Richtung die Schlange schaut (oben, rechts, unten, links).- Beispiel: Wenn die Schlange nach oben schaut, könnte
tx = 3
undty = 0
sein.
-
Kopf zeichnen:
context.drawImage(tileImage, tx * 64, ty * 64, 64, 64, tilex, tiley, level.tilewidth, level.tileheight)
:tileImage
ist das Bild, das verschiedene Teile der Schlange enthält.tx * 64
undty * 64
legen die Position des Kopfes im Bild fest.64, 64
ist die Größe des Kopfes im Bild.tilex
undtiley
sind die Positionen auf dem Canvas, wo der Kopf gezeichnet wird.level.tilewidth
undlevel.tileheight
bestimmen die Größe, in der der Kopf auf dem Canvas gezeichnet wird.
- Der Kopf der Schlange wird gezeichnet, indem die Position des ersten Segments der Schlange bestimmt wird.
- Abhängig von der Richtung der Schlange wird der richtige Teil des Bildes (
tileImage
) ausgewählt. - Dieser Teil des Bildes wird an der berechneten Position auf dem Canvas gezeichnet.