HTML5-Tutorium: Canvas: MiniPong 04: Unterschied zwischen den Versionen
Kowa (Diskussion | Beiträge) |
Kowa (Diskussion | Beiträge) |
||
| Zeile 39: | Zeile 39: | ||
„<code>init</code>“, die zunächst die wesentlichen Objekte erstellt und dann das Spiel startet. | „<code>init</code>“, die zunächst die wesentlichen Objekte erstellt und dann das Spiel startet. | ||
Im Klassendiagramm sind rote Pfeile zu den Modulen eingezeichnet, die das Init-Modul benötigt. | Im Klassendiagramm sind rote Pfeile zu den Modulen eingezeichnet, die das Init-Modul benötigt. | ||
Das sind die beiden Funktionsmodule „<code>minipong</code>“ und „<code> | Das sind die beiden Funktionsmodule „<code>logic/minipong</code>“ und „<code>control/keyboard</code>“ | ||
sowie diverse Model- und View-Klassen. Für jede dieser Klassen | sowie diverse Model- und View-Klassen. Für jede dieser Klassen – mit Ausnahme der Klasse „<code>ModelStage</code>“ – | ||
erzeugt <code>init</code> ein oder im Falle der Text-Klassen sogar jeweils zwei Objekte. | erzeugt <code>init</code> ein oder im Falle der Text-Klassen sogar jeweils zwei Objekte. Als Stage-Objekt kommt | ||
– wie im [[HTML5-Tutorium: Canvas: MiniPong 03|dritten Teil des Tutoriums]] – das in der HTML-Datei enthaltene | |||
Canvas-Element zum Einsatz. | |||
Die View-Objekte sind ausschließlich der Prozedur „<code>init</code>“ bekannt. Diese Objekte visualisieren | Die View-Objekte sind ausschließlich der Prozedur „<code>init</code>“ bekannt. Diese Objekte visualisieren | ||
| Zeile 61: | Zeile 63: | ||
den View-Objekten die entsprechenden Model-Objekte zu und übergibt dann ein Array mit allen View-Objekten der View-Loop. | den View-Objekten die entsprechenden Model-Objekte zu und übergibt dann ein Array mit allen View-Objekten der View-Loop. | ||
Sobald diese gestartet wird, aktualisiert sie regelmäßig die grafische Darstellung dieser Objekte im HTML-Dokument. | Sobald diese gestartet wird, aktualisiert sie regelmäßig die grafische Darstellung dieser Objekte im HTML-Dokument. | ||
Die Init-Prozedur lädt ein weiteres Modul: „<code>control/keyboard</code>“. Diese fängt alle Tastaturereignisse ab. | |||
Sobald auf der Tastatur eine entsprechende Taste gedrückt wird, ruft sie sie Methode „<code>start</code>“ des Schlägers | |||
auf und setzt ihn in Bewegung. Welcher Taste welche Bewegungsrichtung zugeordnet ist, wird in der Init-Datei „<code>init.json</code>“ festgelegt. | |||
==Neues Projekt anlegen== | ==Neues Projekt anlegen== | ||
Version vom 29. November 2016, 14:32 Uhr
Dieser Artikel erfüllt die GlossarWiki-Qualitätsanforderungen nur teilweise:
| Korrektheit: 3 (zu größeren Teilen überprüft) |
Umfang: 3 (einige wichtige Fakten fehlen) |
Quellenangaben: 5 (vollständig vorhanden) |
Quellenarten: 5 (ausgezeichnet) |
Konformität: 5 (ausgezeichnet) |
HTML-Tutorium: MiniPong
MiniPong: | Teil 1 | Teil 2 | Teil 3 | Teil 4 | Teil 5
Musterlösung: index.html
(WK_MiniPong04 (SVN))
Leeres Projekt: index.html
(WK_MiniPong04_empty (SVN))
Ziel: Das fertige Spiel „MiniPong“
Im vierten Teil des Tutoriums wird eine funktionsfähige Version von MiniPong erstellt.
Use Cases
MiniPongEin Spieler kann das Spiel starten (Startknopf) und vorzeitig beenden (Stopp-Knopf). Nach Spielstart kann der Spieler den Schläger am unteren Rand des Spielfeldes mit Hilfe der Richtungstasten des Keyboards nach links und rechts bewegen.
Nachdem das Spiel gestartet wurde, bewegt sich der Ball geradlinig im Spielfeld, wobei die Startrichtung zufällig gewählt wird. Kollisionen mit der linken, oberen oder rechten Wand haben eine Richtungsänderung des Balls zur Folge (Einfallswinkel = Ausfallwinkel). Eine Kollision mit der unteren Wand beendet das Spiel.
Ziel des Spiels sind möglichst viele Kollision des Balls mit dem Schläger. Eine derartige Kollision hat eine Richtungsänderung sowie einen Punktgewinn zur Folge. Der aktuelle Punktestand (Score) wird der Benutzer jederzeit angezeigt.
Wird der Schläger im Moment der Kollision bewegt, so wird der Ball abhängig von der Bewegungsrichtung und Geschwindigkeit des Schlägers abgelenkt (Simulation von Reibung).
Klassenmodell
Eine genauere Analyse der Use Cases zeigt, welche Module benötigt werden.
Das Modul „init“ hat die Aufgabe das Spiel zu initialisieren. Es definiert eine Prozedur
„init“, die zunächst die wesentlichen Objekte erstellt und dann das Spiel startet.
Im Klassendiagramm sind rote Pfeile zu den Modulen eingezeichnet, die das Init-Modul benötigt.
Das sind die beiden Funktionsmodule „logic/minipong“ und „control/keyboard“
sowie diverse Model- und View-Klassen. Für jede dieser Klassen – mit Ausnahme der Klasse „ModelStage“ –
erzeugt init ein oder im Falle der Text-Klassen sogar jeweils zwei Objekte. Als Stage-Objekt kommt
– wie im dritten Teil des Tutoriums – das in der HTML-Datei enthaltene
Canvas-Element zum Einsatz.
Die View-Objekte sind ausschließlich der Prozedur „init“ bekannt. Diese Objekte visualisieren
die Model-Objekte, d. h. den aktuellen Zustand des Spiels. Da sich der Zustand des Spiel häufig ändert,
erstellt init eine View-Loop, deren Aufgabe es ist, die Visualisierung möglichst häufig,
am Besten 60 mal pro Sekunde zu erneuern. Dazu ruft die View-Loop, sobald sie einmal gestartet wurde,
regelmäßig die Zeichenmethode „draw“ der einzelnen View-Objekte auf.
Die View umfasst sechs Elemente:
- einen Button (Start, Stopp)
- einen Ball
- einen Schläger
- zwei Textfelder (Score und allgemeine Informationen)
Die View-Loop muss diese sechs Objekte selbstverständlich kennen, damit sie sie darstellen kann. Die entsprechenden Beziehungspfeile werden allerdings nur der nebenstehenden Detailansicht des Klassendiagramms, aber nicht im Übersichtsdiagramm angezeigt (da das Übersichtsdiagramm anderenfalls etwas unübersichtlich werden würde). Die Init-Prozedur erzeugt diese View-Objekte sowie die zugehörigen Model-Objekte, ordnet den View-Objekten die entsprechenden Model-Objekte zu und übergibt dann ein Array mit allen View-Objekten der View-Loop. Sobald diese gestartet wird, aktualisiert sie regelmäßig die grafische Darstellung dieser Objekte im HTML-Dokument.
Die Init-Prozedur lädt ein weiteres Modul: „control/keyboard“. Diese fängt alle Tastaturereignisse ab.
Sobald auf der Tastatur eine entsprechende Taste gedrückt wird, ruft sie sie Methode „start“ des Schlägers
auf und setzt ihn in Bewegung. Welcher Taste welche Bewegungsrichtung zugeordnet ist, wird in der Init-Datei „init.json“ festgelegt.
Neues Projekt anlegen
Legen Sie ein neues Projekt mit dem Namen „MiniPong04“ an.
Kopieren Sie die Dateien des Projektes MiniPong03 in das neue Projekt.
Quellen
- Braun (2011): Herbert Braun; Webanimationen mit Canvas; in: c't Webdesign; Band: 2011; Seite(n): 44–48; Verlag: Heise Zeitschriften Verlag; Adresse: Hannover; 2011; Quellengüte: 5 (Artikel)
- Kowarschick (MMProg): Wolfgang Kowarschick; Vorlesung „Multimedia-Programmierung“; Hochschule: Hochschule Augsburg; Adresse: Augsburg; Web-Link; 2018; Quellengüte: 3 (Vorlesung)
