MMProg: Praktikum: WiSe 2018/19: Pong01 - Versionsgeschichte

Kowa am 1. März 2023 um 12:49 Uhr

2023-03-01T12:49:38Z

← Nächstältere Version		Version vom 1. März 2023, 12:49 Uhr
Zeile 77:		Zeile 77:
	um den dynamischen Prozess zu verdeutlichen, den ein Modell durchläuft. Es ändert sich ständig:		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,		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.		der zu Beginn eines Projekts ein perfektes Modell aufstellt, dass nicht ein paar Dutzend mal geändert werden muss.

	===Klassendiagramm (Moduldiagramm)===		===Klassendiagramm (Moduldiagramm)===

Kowa am 2. Oktober 2019 um 06:32 Uhr

2019-10-02T06:32:00Z

← Nächstältere Version		Version vom 2. Oktober 2019, 06:32 Uhr
Zeile 1:		Zeile 1:
	{{MMProg:Praktikum:WiSe 2018/19:Menü}}		{{MMProg:Praktikum:WiSe 2018/19:Menü}}

	'''Musterlösung''': [https://glossar.hs-augsburg.de/beispiel/tutorium/2018/pong/WK_Pong01/web/ Web-Auftritt] ([https://gitlab.multimedia.hs-augsburg.de~~:8888~~/kowa/WK_Pong01.git Git-Repository])		'''Musterlösung''': [https://glossar.hs-augsburg.de/beispiel/tutorium/2018/pong/WK_Pong01/web/ Web-Auftritt] ([https://gitlab.multimedia.hs-augsburg.de/kowa/WK_Pong01.git Git-Repository])

	==Ziel==		==Ziel==
Zeile 8:		Zeile 8:

	==Vorbereitung==		==Vorbereitung==
	Importieren Sie das leere Git-Projekt [https://gitlab.multimedia.hs-augsburg.de~~:8888~~/kowa/Pong01.git Pong01] in WebStorm.		Importieren Sie das leere Git-Projekt [https://gitlab.multimedia.hs-augsburg.de/kowa/Pong01.git Pong01] in WebStorm.
	Laden Sie anschließend mittels <code>npm i</code> alle benötigten Node.js-Module in das Projekt.		Laden Sie anschließend mittels <code>npm i</code> alle benötigten Node.js-Module in das Projekt.

Zeile 16:		Zeile 16:
	<source lang="javascript">		<source lang="javascript">
	git remote remove origin		git remote remove origin
	git remote add origin https://gitlab.multimedia.hs-augsburg.de~~:8888~~/BENUTZER/Pong01.git		git remote add origin https://gitlab.multimedia.hs-augsburg.de/BENUTZER/Pong01.git
	</source>		</source>

Zeile 100:		Zeile 100:

	===Aufgabe 1===		===Aufgabe 1===
	(Musterlösung: [https://gitlab.multimedia.hs-augsburg.de~~:8888~~/kowa/WK_Pong01.git Gitlab: <code>WK_Pong01</code>, <code>app01</code>], [https://glossar.hs-augsburg.de/beispiel/tutorium/2018/pong/WK_Pong01/web/index01.html index01.html])		(Musterlösung: [https://gitlab.multimedia.hs-augsburg.de/kowa/WK_Pong01.git Gitlab: <code>WK_Pong01</code>, <code>app01</code>], [https://glossar.hs-augsburg.de/beispiel/tutorium/2018/pong/WK_Pong01/web/index01.html index01.html])

	Sie sollten zunächst eine Kopie Ihrer Web-App erstellen:		Sie sollten zunächst eine Kopie Ihrer Web-App erstellen:
Zeile 251:		Zeile 251:

	===Aufgabe 2===		===Aufgabe 2===
	(Musterlösung: [https://gitlab.multimedia.hs-augsburg.de~~:8888~~/kowa/WK_Pong01.git Gitlab: <code>WK_Pong01</code>, <code>app02</code>], [https://glossar.hs-augsburg.de/beispiel/tutorium/2018/pong/WK_Pong01/web/index02.html index02.html])		(Musterlösung: [https://gitlab.multimedia.hs-augsburg.de/kowa/WK_Pong01.git Gitlab: <code>WK_Pong01</code>, <code>app02</code>], [https://glossar.hs-augsburg.de/beispiel/tutorium/2018/pong/WK_Pong01/web/index02.html index02.html])

	Sorgen Sie jetzt dafür, dass die Kollisionen der Paddle mit dem Ball und der Bühne erkannt und behandelt werden.		Sorgen Sie jetzt dafür, dass die Kollisionen der Paddle mit dem Ball und der Bühne erkannt und behandelt werden.
Zeile 304:		Zeile 304:

	===Aufgabe 3===		===Aufgabe 3===
	(Musterlösung: [https://gitlab.multimedia.hs-augsburg.de~~:8888~~/kowa/WK_Pong01.git Gitlab: <code>WK_Pong01</code>, <code>app03</code>], [https://glossar.hs-augsburg.de/beispiel/tutorium/2018/pong/WK_Pong01/web/index03.html index03.html])		(Musterlösung: [https://gitlab.multimedia.hs-augsburg.de/kowa/WK_Pong01.git Gitlab: <code>WK_Pong01</code>, <code>app03</code>], [https://glossar.hs-augsburg.de/beispiel/tutorium/2018/pong/WK_Pong01/web/index03.html index03.html])

	Als nächstes sollten Sie eine Contoller für die Schäger einbauen:		Als nächstes sollten Sie eine Contoller für die Schäger einbauen:
Zeile 355:		Zeile 355:

	===Aufgabe 4===		===Aufgabe 4===
	(Musterlösung: [https://gitlab.multimedia.hs-augsburg.de~~:8888~~/kowa/WK_Pong01.git Gitlab: <code>WK_Pong01</code>, <code>app04</code>], [https://glossar.hs-augsburg.de/beispiel/tutorium/2018/pong/WK_Pong01/web/index04.html index04.html])		(Musterlösung: [https://gitlab.multimedia.hs-augsburg.de/kowa/WK_Pong01.git Gitlab: <code>WK_Pong01</code>, <code>app04</code>], [https://glossar.hs-augsburg.de/beispiel/tutorium/2018/pong/WK_Pong01/web/index04.html index04.html])

	Nun ist es an der Zeit, die Spiellogik zu implementieren.		Nun ist es an der Zeit, die Spiellogik zu implementieren.
Zeile 496:		Zeile 496:

	===Aufgabe 5===		===Aufgabe 5===
	(Musterlösung: [https://gitlab.multimedia.hs-augsburg.de~~:8888~~/kowa/WK_Pong01.git Gitlab: <code>WK_Pong01</code>, <code>app05</code>], [https://glossar.hs-augsburg.de/beispiel/tutorium/2018/pong/WK_Pong01/web/index05.html index05.html])		(Musterlösung: [https://gitlab.multimedia.hs-augsburg.de/kowa/WK_Pong01.git Gitlab: <code>WK_Pong01</code>, <code>app05</code>], [https://glossar.hs-augsburg.de/beispiel/tutorium/2018/pong/WK_Pong01/web/index05.html index05.html])

	Verfeinern Sie das Spiel weiter, indem Sie einen Startbutton integrieren, der das Spiel startet, sobald Sie auf		Verfeinern Sie das Spiel weiter, indem Sie einen Startbutton integrieren, der das Spiel startet, sobald Sie auf
Zeile 619:		Zeile 619:

	===Aufgabe 6===		===Aufgabe 6===
	(Musterlösung: [https://gitlab.multimedia.hs-augsburg.de~~:8888~~/kowa/WK_Pong01.git Gitlab: <code>WK_Pong01</code>, <code>app06</code>], [https://glossar.hs-augsburg.de/beispiel/tutorium/2018/pong/WK_Pong01/web/index06.html index06.html])		(Musterlösung: [https://gitlab.multimedia.hs-augsburg.de/kowa/WK_Pong01.git Gitlab: <code>WK_Pong01</code>, <code>app06</code>], [https://glossar.hs-augsburg.de/beispiel/tutorium/2018/pong/WK_Pong01/web/index06.html index06.html])

	Erweitern Sie das Spiel so, dass bei Spielende der Name des Siegers		Erweitern Sie das Spiel so, dass bei Spielende der Name des Siegers

Kowa am 23. Januar 2019 um 08:39 Uhr

2019-01-23T08:39:35Z

← Nächstältere Version		Version vom 23. Januar 2019, 08:39 Uhr
Zeile 1:		Zeile 1:
	{{MMProg:Praktikum:WiSe 2018/19:Menü}}		{{MMProg:Praktikum:WiSe 2018/19:Menü}}

	'''Musterlösung''': [https://glossar.hs-augsburg.de/beispiel/tutorium/2018/~~ball~~/WK_Pong01/web/ Web-Auftritt] ([https://gitlab.multimedia.hs-augsburg.de:8888/kowa/WK_Pong01.git Git-Repository])		'''Musterlösung''': [https://glossar.hs-augsburg.de/beispiel/tutorium/2018/pong/WK_Pong01/web/ Web-Auftritt] ([https://gitlab.multimedia.hs-augsburg.de:8888/kowa/WK_Pong01.git Git-Repository])

	==Ziel==		==Ziel==

Kowa: /* Aufgabe 2 */

2018-12-13T18:35:01Z

Aufgabe 2

← Nächstältere Version		Version vom 13. Dezember 2018, 18:35 Uhr
Zeile 256:		Zeile 256:

	* Fügen Sie in die Klassen <code>ModelCircle</code> und <code>ModelRectangle</code> Setter-Methoden für die Attribute <code>left</code>, <code>right</code>, <code>top</code> und <code>bottom</code> ein. Diese sollen dafür sorgen, dass jeweils die $x$- bzw. die $y$-Koordinate des Objektes so gesetzt wird, dass die Getter-Methode des modifizierten Randattriutes den gewünschten Wert als Ergebnis liefert.		* Fügen Sie in die Klassen <code>ModelCircle</code> und <code>ModelRectangle</code> Setter-Methoden für die Attribute <code>left</code>, <code>right</code>, <code>top</code> und <code>bottom</code> ein. Diese sollen dafür sorgen, dass jeweils die $x$- bzw. die $y$-Koordinate des Objektes so gesetzt wird, dass die Getter-Methode des modifizierten Randattriutes den gewünschten Wert als Ergebnis liefert.
	* Definieren Sie die Klasse <code>ModelPaddle</code> als Subklasse der Klasse <code>ModelRectangle</code>. Der Konstruktor <code>constructor(p_config)</code> übergibt das ~~Konfigurationsobject~~ <code>p_config</code> einfach an seine Superklasse: <code>super(p_config);</code>. Überschreiben Sie anschließend die Resetfunktion. Diese soll die Breite, Höhe und Position des Schlägers genauso wie die Klasse <code>ModelRectangle</code> auf die im Konfigurationsobjekt übergebenen Werte zurücksetzen. Die Geschwindigkeit und die ~~Beschluenigung~~ soll sie allerdings jeweils auf <code>0</code> setzen, da die Schläger sich zu Beginn nicht bewegen.		* Definieren Sie die Klasse <code>ModelPaddle</code> als Subklasse der Klasse <code>ModelRectangle</code>. Der Konstruktor <code>constructor(p_config)</code> übergibt das Konfigurationsobjekt <code>p_config</code> einfach an seine Superklasse: <code>super(p_config);</code>. Überschreiben Sie anschließend die Resetfunktion. Diese soll die Breite, Höhe und Position des Schlägers genauso wie die Klasse <code>ModelRectangle</code> auf die im Konfigurationsobjekt übergebenen Werte zurücksetzen. Die Geschwindigkeit und die Beschleunigung soll sie allerdings jeweils auf <code>0</code> setzen, da die Schläger sich zu Beginn nicht bewegen.
	* Verwenden Sie im Modul <code>app</code> die Klasse <code>ModelPaddle</code> anstelle der Klasse <code>ModelRectangle</code> zum Erzeugen der beiden Schläger-Models.		* Verwenden Sie im Modul <code>app</code> die Klasse <code>ModelPaddle</code> anstelle der Klasse <code>ModelRectangle</code> zum Erzeugen der beiden Schläger-Models.
	* Fügen Sie in die Klasse <code>ModelPaddle</code> drei Methoden <code>down</code>, <code>up</code> und <code>stop</code> ein.		* Fügen Sie in die Klasse <code>ModelPaddle</code> drei Methoden <code>down</code>, <code>up</code> und <code>stop</code> ein.

Kowa: /* Aufgabe 2 */

2018-12-13T18:34:00Z

Aufgabe 2

← Nächstältere Version		Version vom 13. Dezember 2018, 18:34 Uhr
Zeile 256:		Zeile 256:

	* Fügen Sie in die Klassen <code>ModelCircle</code> und <code>ModelRectangle</code> Setter-Methoden für die Attribute <code>left</code>, <code>right</code>, <code>top</code> und <code>bottom</code> ein. Diese sollen dafür sorgen, dass jeweils die $x$- bzw. die $y$-Koordinate des Objektes so gesetzt wird, dass die Getter-Methode des modifizierten Randattriutes den gewünschten Wert als Ergebnis liefert.		* Fügen Sie in die Klassen <code>ModelCircle</code> und <code>ModelRectangle</code> Setter-Methoden für die Attribute <code>left</code>, <code>right</code>, <code>top</code> und <code>bottom</code> ein. Diese sollen dafür sorgen, dass jeweils die $x$- bzw. die $y$-Koordinate des Objektes so gesetzt wird, dass die Getter-Methode des modifizierten Randattriutes den gewünschten Wert als Ergebnis liefert.
	* Definieren Sie die Klasse <code>ModelPaddle</code> als Subklasse der Klasse <code>ModelRectangle</code>. Der Konstruktor <code>constructor(p_config)</code> übergibt das Konfigurationsobject <code>p_config</code> einfach an seine Superklasse: <code>super(p_config);</code>. Überschreiben Sie anschließend die Resetfunktion. Diese soll die Breite, Höhe und Position des Schlägers genauso wie die Klasse<code>ModelRectangle</code> auf die im Konfigurationsobjekt übergebenen Werte zurücksetzen. Die Geschwindigkeit und die Beschluenigung soll sie allerdings jeweils auf <code>0</code> setzen, da die Schläger sich zu Beginn nicht bewegen.		* Definieren Sie die Klasse <code>ModelPaddle</code> als Subklasse der Klasse <code>ModelRectangle</code>. Der Konstruktor <code>constructor(p_config)</code> übergibt das Konfigurationsobject <code>p_config</code> einfach an seine Superklasse: <code>super(p_config);</code>. Überschreiben Sie anschließend die Resetfunktion. Diese soll die Breite, Höhe und Position des Schlägers genauso wie die Klasse <code>ModelRectangle</code> auf die im Konfigurationsobjekt übergebenen Werte zurücksetzen. Die Geschwindigkeit und die Beschluenigung soll sie allerdings jeweils auf <code>0</code> setzen, da die Schläger sich zu Beginn nicht bewegen.
	* Verwenden Sie im Modul <code>app</code> die Klasse <code>ModelPaddle</code> anstelle der Klasse <code>ModelRectangle</code> zum Erzeugen der beiden Schläger-Models.		* Verwenden Sie im Modul <code>app</code> die Klasse <code>ModelPaddle</code> anstelle der Klasse <code>ModelRectangle</code> zum Erzeugen der beiden Schläger-Models.
	* Fügen Sie in die Klasse <code>ModelPaddle</code> drei Methoden <code>down</code>, <code>up</code> und <code>stop</code> ein.		* Fügen Sie in die Klasse <code>ModelPaddle</code> drei Methoden <code>down</code>, <code>up</code> und <code>stop</code> ein.

Kowa: /* Aufgabe 2 */

2018-12-13T18:33:15Z

Aufgabe 2

← Nächstältere Version		Version vom 13. Dezember 2018, 18:33 Uhr
Zeile 255:		Zeile 255:
	Sorgen Sie jetzt dafür, dass die Kollisionen der Paddle mit dem Ball und der Bühne erkannt und behandelt werden.		Sorgen Sie jetzt dafür, dass die Kollisionen der Paddle mit dem Ball und der Bühne erkannt und behandelt werden.

	* Fügen Sie in die Klassen <code>ModelCircle</code> und <code>ModelRectangle</code> Setter-Methoden für die Attribute <code>left</code>, <code>right</code>, <code>top</code> und <code>bottom</code> ein. Diese sollen dafür sorgen, dass jeweils die $x$- bzw. die $y$-Koordinate des Objektes so gesetzt wird, dass die Getter-Methode des modifizierten Randattriutes den ~~geünschten~~ Wert als Ergebnis liefert.		* Fügen Sie in die Klassen <code>ModelCircle</code> und <code>ModelRectangle</code> Setter-Methoden für die Attribute <code>left</code>, <code>right</code>, <code>top</code> und <code>bottom</code> ein. Diese sollen dafür sorgen, dass jeweils die $x$- bzw. die $y$-Koordinate des Objektes so gesetzt wird, dass die Getter-Methode des modifizierten Randattriutes den gewünschten Wert als Ergebnis liefert.
	* Definieren Sie die Klasse <code>ModelPaddle</code> als Subklasse der Klasse <code>ModelRectangle</code>. Der Konstruktor <code>constructor(p_config)</code> übergibt das Konfigurationsobject <code>p_config</code> einfach an seine Superklasse: <code>super(p_config);</code>. Überschreiben Sie anschließend die Resetfunktion. Diese soll die Breite, Höhe und Position des Schlägers genauso wie die Klasse<code>ModelRectangle</code> auf die im Konfigurationsobjekt übergebenen Werte zurücksetzen. Die Geschwindigkeit und die Beschluenigung soll sie allerdings jeweils auf <code>0</code> setzen, da die Schläger sich zu Beginn nicht bewegen.		* Definieren Sie die Klasse <code>ModelPaddle</code> als Subklasse der Klasse <code>ModelRectangle</code>. Der Konstruktor <code>constructor(p_config)</code> übergibt das Konfigurationsobject <code>p_config</code> einfach an seine Superklasse: <code>super(p_config);</code>. Überschreiben Sie anschließend die Resetfunktion. Diese soll die Breite, Höhe und Position des Schlägers genauso wie die Klasse<code>ModelRectangle</code> auf die im Konfigurationsobjekt übergebenen Werte zurücksetzen. Die Geschwindigkeit und die Beschluenigung soll sie allerdings jeweils auf <code>0</code> setzen, da die Schläger sich zu Beginn nicht bewegen.
	* Verwenden Sie im Modul <code>app</code> die Klasse <code>ModelPaddle</code> anstelle der Klasse <code>ModelRectangle</code> zum Erzeugen der beiden Schläger-Models.		* Verwenden Sie im Modul <code>app</code> die Klasse <code>ModelPaddle</code> anstelle der Klasse <code>ModelRectangle</code> zum Erzeugen der beiden Schläger-Models.

Kowa: /* config.json und Modul app.js */

2018-12-13T18:31:49Z

config.json und Modul app.js

← Nächstältere Version		Version vom 13. Dezember 2018, 18:31 Uhr
Zeile 233:		Zeile 233:
	]		]
	</source></div>		</source></div>
	* Diese Views müssen vom Renderer regelmäßig neu gezeichnet werden (hier kommt wieder ES-6-Destructuring-Syntax zum Einsatz, um den Inhalt des ~~Arraya~~ <code>c_views_paddle</code> in ein anderes Array einzugügen; in ES 5 müssten Sie <code>initRenderer([c_view_ball].concat(c_views_paddle));</code> schreiben)		* Diese Views müssen vom Renderer regelmäßig neu gezeichnet werden (hier kommt wieder ES-6-Destructuring-Syntax zum Einsatz, um den Inhalt des Arrays <code>c_views_paddle</code> in ein anderes Array einzugügen; in ES 5 müssten Sie <code>initRenderer([c_view_ball].concat(c_views_paddle));</code> schreiben)
	<div style="margin-left: 1.5em;"><source lang="javascript">		<div style="margin-left: 1.5em;"><source lang="javascript">
	initRenderer([c_view_ball, ...c_views_paddle]);		initRenderer([c_view_ball, ...c_views_paddle]);

Kowa: /* Konfiguration des Balls */

2018-12-13T18:29:45Z

Konfiguration des Balls

← Nächstältere Version		Version vom 13. Dezember 2018, 18:29 Uhr
Zeile 123:		Zeile 123:
	====Konfiguration des Balls====		====Konfiguration des Balls====

	Platzieren Sie den Ball zu Beginn des Spiels ~~inter~~ Mitte der Bühne, indem Sie die Konfigurationsdatei		Platzieren Sie den Ball zu Beginn des Spiels in der Mitte der Bühne, indem Sie die Konfigurationsdatei
	entsprechend abändern. Sie können auch noch die Ballgröße anpassen, indem Sie ein beispielsweise einen		entsprechend abändern. Sie können auch noch die Ballgröße anpassen, indem Sie ein beispielsweise einen
	Radius von nur 12 Pixeln wählen:		Radius von nur 12 Pixeln wählen:

Kowa: /* Aufgabe 6 */

2018-12-13T18:25:28Z

Aufgabe 6

← Nächstältere Version		Version vom 13. Dezember 2018, 18:25 Uhr
Zeile 620:		Zeile 620:
	===Aufgabe 6===		===Aufgabe 6===
	(Musterlösung: [https://gitlab.multimedia.hs-augsburg.de:8888/kowa/WK_Pong01.git Gitlab: <code>WK_Pong01</code>, <code>app06</code>], [https://glossar.hs-augsburg.de/beispiel/tutorium/2018/pong/WK_Pong01/web/index06.html index06.html])		(Musterlösung: [https://gitlab.multimedia.hs-augsburg.de:8888/kowa/WK_Pong01.git Gitlab: <code>WK_Pong01</code>, <code>app06</code>], [https://glossar.hs-augsburg.de/beispiel/tutorium/2018/pong/WK_Pong01/web/index06.html index06.html])

			Erweitern Sie das Spiel so, dass bei Spielende der Name des Siegers
			(„linker Spieler“ oder „rechter Spieler“) in einem Textfeld ausgegeben wird, bevor der Startbutton
			wieder eingeblendet wird:
			<br/>https://glossar.hs-augsburg.de/beispiel/tutorium/2018/pong/WK_Pong01/web/index06.html

	==Quellen==		==Quellen==

Kowa: /* Aufgabe 5 */

2018-12-13T18:23:12Z

Aufgabe 5

@@ Zeile 497: / Zeile 497: @@
 ===Aufgabe 5===
 (Musterlösung: [https://gitlab.multimedia.hs-augsburg.de:8888/kowa/WK_Pong01.git Gitlab: <code>WK_Pong01</code>, <code>app05</code>], [https://glossar.hs-augsburg.de/beispiel/tutorium/2018/pong/WK_Pong01/web/index05.html index05.html])
 ===Aufgabe 6===