MMProg: Praktikum: WiSe 2018/19: Pong01: Unterschied zwischen den Versionen
Kowa (Diskussion | Beiträge) |
Kowa (Diskussion | Beiträge) |
||
Zeile 42: | Zeile 42: | ||
==Moduldiagramm== | ==Moduldiagramm== | ||
[[Datei:WK Pong01 ClassModel01 | [[Datei:WK Pong01 ClassModel01 2018 02.png|gerahmt|ohne|Klassendiagramm von <code>pong01</code> (ohne Properties)]] | ||
Dieses Klassendiagramm ist ebenfalls gegenüber dem Klassendiagramm von [[Pong/Modellierung]] weiterentwickelt worden. | |||
Anstelle eines HTML-Elements, gibt es jetzt einen kreisförmigen Start-Button. Die Klassen <code>ModelCircle</code> und | |||
<code>ViewCircle</code> werden auch für den Ball verwendet (Wiederverwendung). Die Klasse <code>ModelPaddle</code> | |||
wurde als Unterklasse einer (wiederverwendbaren) Klasse <code>ModelRectangle</code> definiert. Für die Punkteanzeige | |||
wurde eine eigene Klasse <code>ModelScore</code> definiert, dan in der Klasse <code>ModelText</code> keine Zahlen, | |||
sondern nur Text geespiechert werden können. Das ist für die Rechnung mit Punkten, die jeweils mittels <code>++</code> | |||
erhöht können werden müssen, etwas unpraktisch. Zu guter Letzt wurde noch ein Textfeld eingeführt, das dazu genutzt | |||
werden kann, bei Spielende die Spieler über den Sieger zu informieren. | |||
<!-- | <!-- | ||
==Aufgabe 1== | ==Aufgabe 1== | ||
Zeile 631: | Zeile 639: | ||
auf die Game-Loop zugreifen können. Daher ist auch dies ein Punkt, der erst in Pong02 behandelt wird. | auf die Game-Loop zugreifen können. Daher ist auch dies ein Punkt, der erst in Pong02 behandelt wird. | ||
--> | --> | ||
==Quellen== | ==Quellen== | ||
<references/> | <references/> |
Version vom 6. Dezember 2018, 16:42 Uhr
{MMProg:Praktikum:WiSe 2018/19:Menü}}
Musterlösung: Web-Auftritt (Git-Repository)
Ziel
Ziel dieser Praktikumsaufgabe ist es, das Spiel Pong zu implementieren.
Vorbereitung
Importieren Sie das leere Git-Projekt Pong01 in WebStorm.
Laden Sie anschließend mittels npm i
alle benötigten Node.js-Module in das Projekt.
Sie können Ihr Projekt zur Übung auch in Ihrem Git-Repository speichern. Das ist aber nicht so wichtig. Falls Sie das machen möchten, müssen Sie es zuvor von meinem (schreibgeschützten) Repository lösen:
git remote remove origin
git remote add origin https://gitlab.multimedia.hs-augsburg.de:8888/BENUTZER/Pong01.git
Aufgaben
In Ihrem Projekt finden Sie eine Web-Anwendung: src/index00.html
. Diese entspricht im Wesentlichen der Musterlösung der
Aufgabe 3 des Tutoriums Ball03. Allerdings wurde für die Spielbühne eine feste Größe gewählt,
das Bild des Balls sowie das CSS wurden verändert und ein Splashscreen wurde eingeführt. diese wird mittels CSS-Transitionen und
JavaScript await
-Befehlen in der Initfuktion der Datei app00/app.js
erreicht. Die await
-Befehle
sowie die zugehörigen Splaschscreen-Befehle ändern sich im Laufe des Tutoriums nicht. Sie sollten sie aber trotzdem studieren,
wenn Sie daran interessiert sind, wie sie funktionieren.
Use Cases
Der Aufgabe liegt das Modell Pong/Modellierung zugrunde. Allerdings wurden bei der Umsetzung einige Änderungen vorgenommen. Am Use-Case-Diagramm fällt auf, dass der Use Case „Spiel abbrechen“ fehlt. Es wurde darauf verzichtet, da nicht – wie ursprünglich geplant – ein Start-/Stopp-Knopf (als HTML-Button) außerhalb der Bühne platziert wird, sondern nun ein Start-Knopf innerhalb der Bühne. Dieser wird ausgeblendet, solange das Spiel läuft.
Ich habe das implementierte Modell ganz bewusst gegenüber der ursprünglichen Planung abgeändert, um den dynamischen Prozess zu verdeutlichen, den ein Modell durchläuft. Es ändert sich ständig: Elemente werden ergänzt, verfeinert, ersetzt oder auch ersazlos gestrichen. Ich kenne niemanden, der zu Beginn eines Projektes ein perfektes Modell aufstellt, dass nicht ein paar Dutzend mal geändert werden muss.
Moduldiagramm
Dieses Klassendiagramm ist ebenfalls gegenüber dem Klassendiagramm von Pong/Modellierung weiterentwickelt worden.
Anstelle eines HTML-Elements, gibt es jetzt einen kreisförmigen Start-Button. Die Klassen ModelCircle
und
ViewCircle
werden auch für den Ball verwendet (Wiederverwendung). Die Klasse ModelPaddle
wurde als Unterklasse einer (wiederverwendbaren) Klasse ModelRectangle
definiert. Für die Punkteanzeige
wurde eine eigene Klasse ModelScore
definiert, dan in der Klasse ModelText
keine Zahlen,
sondern nur Text geespiechert werden können. Das ist für die Rechnung mit Punkten, die jeweils mittels ++
erhöht können werden müssen, etwas unpraktisch. Zu guter Letzt wurde noch ein Textfeld eingeführt, das dazu genutzt
werden kann, bei Spielende die Spieler über den Sieger zu informieren.
Quellen
- Kowarschick (MMProg): Wolfgang Kowarschick; Vorlesung „Multimedia-Programmierung“; Hochschule: Hochschule Augsburg; Adresse: Augsburg; Web-Link; 2018; Quellengüte: 3 (Vorlesung)