HTML5-Tutorium: Canvas: MiniPong 04 - Versionsgeschichte

Kowa am 1. März 2023 um 13:18 Uhr

2023-03-01T13:18:51Z

← Nächstältere Version		Version vom 1. März 2023, 13:18 Uhr
Zeile 149:		Zeile 149:
	* <code>web/js/app/view</code>		* <code>web/js/app/view</code>

	Kopieren Sie folgende Dateien des ~~Projektes~~ [https://glossar.hs-augsburg.de/beispiel/tutorium/es5/minipong/WK_MiniPong03/ MiniPong03]		Kopieren Sie folgende Dateien des Projekts [https://glossar.hs-augsburg.de/beispiel/tutorium/es5/minipong/WK_MiniPong03/ MiniPong03]
	in das neue Projekt:		in das neue Projekt:

Kowa am 6. Dezember 2016 um 15:37 Uhr

2016-12-06T15:37:15Z

← Nächstältere Version		Version vom 6. Dezember 2016, 15:37 Uhr
Zeile 74:		Zeile 74:
	mittels derer sie die Objekte auf dem Canvas (oder evtl. auch im HTML-Dokument selbst) visualisieren kann.		mittels derer sie die Objekte auf dem Canvas (oder evtl. auch im HTML-Dokument selbst) visualisieren kann.
	Das heißt, die View-Klassen, deren Objekte von der View-Loop visualisiert werden sollen, müssen das		Das heißt, die View-Klassen, deren Objekte von der View-Loop visualisiert werden sollen, müssen das
	[[Interface]] „<code>View</code>“ implementieren.		[[Schnittstelle_(OOP)#Schnittstelle_.28Interface.29\|Interface]] „<code>View</code>“ implementieren.

	Die Init-Prozedur erzeugt die sechs View-Objekte sowie die zugehörigen Model-Objekte, ordnet		Die Init-Prozedur erzeugt die sechs View-Objekte sowie die zugehörigen Model-Objekte, ordnet
Zeile 113:		Zeile 113:

	Für die Model-Loop gilt diesselbe Aussage wie für die View-Loop: Es ist gleichgültig, um welche Art von Model-Objekte es sich handelt.		Für die Model-Loop gilt diesselbe Aussage wie für die View-Loop: Es ist gleichgültig, um welche Art von Model-Objekte es sich handelt.
	Es muss nur sichergestellt sein, dass sie das [[Interface]] „<code>Movable</code>“ implementieren. Das heißt, sie müssen		Es muss nur sichergestellt sein, dass sie das [[Schnittstelle_(OOP)#Schnittstelle_.28Interface.29\|Interface]] „<code>Movable</code>“ implementieren. Das heißt, sie müssen
	eine Methode „<code>move(p_seconds)</code>“ bestzen. Model-Objekte, für die dies nicht gilt, können ihre Position nicht		eine Methode „<code>move(p_seconds)</code>“ bestzen. Model-Objekte, für die dies nicht gilt, können ihre Position nicht
	kontinuierlich ändern und werden daher der Model-Loop auch nicht zur Behandlung übergeben.		kontinuierlich ändern und werden daher der Model-Loop auch nicht zur Behandlung übergeben.

Kowa: /* Klassenmodell */

2016-12-06T15:35:46Z

Klassenmodell

← Nächstältere Version		Version vom 6. Dezember 2016, 15:35 Uhr
Zeile 111:		Zeile 111:
	# Reaktion auf Aktionen des Benutzers.		# Reaktion auf Aktionen des Benutzers.
	# Reaktion auf Aktionen des Balls.		# Reaktion auf Aktionen des Balls.

			Für die Model-Loop gilt diesselbe Aussage wie für die View-Loop: Es ist gleichgültig, um welche Art von Model-Objekte es sich handelt.
			Es muss nur sichergestellt sein, dass sie das [[Interface]] „<code>Movable</code>“ implementieren. Das heißt, sie müssen
			eine Methode „<code>move(p_seconds)</code>“ bestzen. Model-Objekte, für die dies nicht gilt, können ihre Position nicht
			kontinuierlich ändern und werden daher der Model-Loop auch nicht zur Behandlung übergeben.

	In diesem Spiel gibt es nur eine Benutzeraktion, auf die <code>minipong</code> direkt reagieren muss: „Klick auf den Start-Stopp-Button“ .		In diesem Spiel gibt es nur eine Benutzeraktion, auf die <code>minipong</code> direkt reagieren muss: „Klick auf den Start-Stopp-Button“ .

Kowa: /* Klassenmodell */

2016-12-06T15:30:44Z

Klassenmodell

← Nächstältere Version		Version vom 6. Dezember 2016, 15:30 Uhr
Zeile 69:		Zeile 69:
	* einen Schläger		* einen Schläger
	* zwei Textfelder (Score und allgemeine Informationen)		* zwei Textfelder (Score und allgemeine Informationen)
	Die View-Loop muss diese sechs Objekte selbstverständlich kennen, damit sie sie darstellen kann.		Die View-Loop muss diese sechs Objekte selbstverständlich kennen, damit sie sie darstellen kann. Allerdings
	Die ~~entsprechenden Beziehungspfeile~~ (~~blau markiert~~) ~~werden allerdings nur der nebenstehenden Detailansicht des Klassendiagramms~~,		reicht es, wenn ihr eine Liste von View-Objekten übergeben wird. Die einzige Forderung, die die die View-Loop
	~~aber nicht~~ im ~~Übersichtsdiagramm angezeigt (da~~ das ~~Übersichtsdiagramm anderenfalls etwas unübersichtlich werden würde)~~.		an diese Objekte stellt, ist, dass für sie eine Zeichenmethode „<code>draw(p_context)</code>“ defiert wurde,
	Die Init-Prozedur erzeugt ~~diese~~ View-Objekte sowie die zugehörigen Model-Objekte, ordnet		mittels derer sie die Objekte auf dem Canvas (oder evtl. auch im HTML-Dokument selbst) visualisieren kann.
			Das heißt, die View-Klassen, deren Objekte von der View-Loop visualisiert werden sollen, müssen das
			[[Interface]] „<code>View</code>“ implementieren.

			Die Init-Prozedur erzeugt die sechs 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.		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.

Kowa: Änderung 42028 von Kowa (Diskussion) rückgängig gemacht.

2016-12-06T06:59:58Z

Änderung 42028 von Kowa (Diskussion) rückgängig gemacht.

← Nächstältere Version		Version vom 6. Dezember 2016, 06:59 Uhr
Zeile 311:		Zeile 311:
	ModelText, ViewText,		ModelText, ViewText,
	ViewLoop,		ViewLoop,
	~~control~~,		controlKeyboard,
	minipong		minipong
	)		)
Zeile 1.338:		Zeile 1.338:

	* <code>ViewLoop</code>: alle View-Objekte		* <code>ViewLoop</code>: alle View-Objekte
	* <code>~~control~~</code>: das Paddle-Model		* <code>controlKeyboard</code>: das Paddle-Model
	* <code>minipong</code>: alle Model-Objekte		* <code>minipong</code>: alle Model-Objekte

	<source lang="javascript">		<source lang="javascript">
	new ViewLoop(p_window, l_canvas, l_views).start();		new ViewLoop(p_window, l_canvas, l_views).start();
	~~control~~(p_window, p_init.control.player, l_model_paddle);		controlKeyboard(p_window, p_init.control.player, l_model_paddle);
	minipong(p_init.game, l_models);		minipong(p_init.game, l_models);
	</source>		</source>

Kowa am 5. Dezember 2016 um 15:42 Uhr

2016-12-05T15:42:52Z

← Nächstältere Version		Version vom 5. Dezember 2016, 15:42 Uhr
Zeile 311:		Zeile 311:
	ModelText, ViewText,		ModelText, ViewText,
	ViewLoop,		ViewLoop,
	~~controlKeyboard~~,		control,
	minipong		minipong
	)		)
Zeile 1.338:		Zeile 1.338:

	* <code>ViewLoop</code>: alle View-Objekte		* <code>ViewLoop</code>: alle View-Objekte
	* <code>~~controlKeyboard~~</code>: das Paddle-Model		* <code>control</code>: das Paddle-Model
	* <code>minipong</code>: alle Model-Objekte		* <code>minipong</code>: alle Model-Objekte

	<source lang="javascript">		<source lang="javascript">
	new ViewLoop(p_window, l_canvas, l_views).start();		new ViewLoop(p_window, l_canvas, l_views).start();
	~~controlKeyboard~~(p_window, p_init.control.player, l_model_paddle);		control(p_window, p_init.control.player, l_model_paddle);
	minipong(p_init.game, l_models);		minipong(p_init.game, l_models);
	</source>		</source>

Kowa: /* Text */

2016-12-02T17:35:45Z

Text

← Nächstältere Version		Version vom 2. Dezember 2016, 17:35 Uhr
Zeile 792:		Zeile 792:
	* <code>font</code> (Textfont, analog zu CSS-Fonts)		* <code>font</code> (Textfont, analog zu CSS-Fonts)
	* <code>textAlign</code> ([http://www.w3schools.com/tags/canvas_textalign.asp Aufhängepunkt]: <code>left</code>, <code>center</code>, <code>right</code>)		* <code>textAlign</code> ([http://www.w3schools.com/tags/canvas_textalign.asp Aufhängepunkt]: <code>left</code>, <code>center</code>, <code>right</code>)
	* <code>textBaseline</code> ([http://www.w3schools.com/tags/canvas_textbaseline.as Baseline]: <code>top</code>, <code>bottom</code>, <code>middle</code>, <code>alphabetic</code>, <code>hanging</code>)		* <code>textBaseline</code> ([http://www.w3schools.com/tags/canvas_textbaseline.asp Baseline]: <code>top</code>, <code>bottom</code>, <code>middle</code>, <code>alphabetic</code>, <code>hanging</code>)

	Damit sollte eigentlich klar sein, wie die Model- und die View-Klasse aussehen-		Damit sollte eigentlich klar sein, wie die Model- und die View-Klasse aussehen-

Kowa: /* Text */

2016-12-02T17:34:35Z

Text

← Nächstältere Version		Version vom 2. Dezember 2016, 17:34 Uhr
Zeile 791:		Zeile 791:
	* <code>color</code> (Textfarbe)		* <code>color</code> (Textfarbe)
	* <code>font</code> (Textfont, analog zu CSS-Fonts)		* <code>font</code> (Textfont, analog zu CSS-Fonts)
	* <code>textAlign</code> ([http://www.w3schools.com/tags/canvas_textalign.asp Aufhängepunkt}: <code>left</code>, <code>center</code>, <code>right</code>)		* <code>textAlign</code> ([http://www.w3schools.com/tags/canvas_textalign.asp Aufhängepunkt]: <code>left</code>, <code>center</code>, <code>right</code>)
	* <code>textBaseline</code> ([http://www.w3schools.com/tags/canvas_textbaseline.as Baseline}: <code>top</code>, <code>bottom</code>, <code>middle</code>, <code>alphabetic</code>, <code>hanging</code>)		* <code>textBaseline</code> ([http://www.w3schools.com/tags/canvas_textbaseline.as Baseline]: <code>top</code>, <code>bottom</code>, <code>middle</code>, <code>alphabetic</code>, <code>hanging</code>)

	Damit sollte eigentlich klar sein, wie die Model- und die View-Klasse aussehen-		Damit sollte eigentlich klar sein, wie die Model- und die View-Klasse aussehen-

Kowa: /* Paddle */

2016-12-02T17:33:46Z

Paddle

← Nächstältere Version		Version vom 2. Dezember 2016, 17:33 Uhr
Zeile 764:		Zeile 764:
	...		...
	</source>		</source>

			Die Paddle-View ändert sich wiederum nur in einem Aspekt gegenüber der Version aus dem zweiten und dritten Teil des Tutoriums.
			Die Draw-Funktion darf den Schläger nur zeichnen, wenn er sichtbar ist. Kopieren Sie also den Inhalt der Datei
			[https://glossar.hs-augsburg.de/beispiel/tutorium/es5/minipong/WK_MiniPong03/web/js/app/view/paddle.js <code>view/paddle.js</code>]
			aus dem dritten Teil des Tutoriums in die neue Datei <code>view/paddle.js</code> und fügen Sie die If-Anweisung
			<source lang="javascript">
			if (this.model.visible === true)
			</source>
			vor den eigentlichen Zeichenbefehl „<code>p_context.drawImage</code>“ ein.

	===Text===		===Text===

Kowa: /* MiniPong */

2016-12-02T11:21:02Z

MiniPong

← Nächstältere Version		Version vom 2. Dezember 2016, 11:21 Uhr
Zeile 1.393:		Zeile 1.393:
	Ganz wichtig für die Spiellogik ist die Definition einer geeigneten Kollisionsprozedur,		Ganz wichtig für die Spiellogik ist die Definition einer geeigneten Kollisionsprozedur,
	die der Model-Loop übergeben wird, um die Kollisionserkennung und -behandlung damit durchzuführen.		die der Model-Loop übergeben wird, um die Kollisionserkennung und -behandlung damit durchzuführen.
	Diese Prozedur verwendet die drei Hilfsprozeduren „<code>collisionBallPaddle</code>“, „<code>~~collisionCanvasBall~~</code>“ und „<code> collisionStagePaddle</code>“,		Diese Prozedur verwendet die drei Hilfsprozeduren „<code>collisionBallPaddle</code>“, „<code>collisionStageBall</code>“ und „<code> collisionStagePaddle</code>“,
	die einfach nacheinander aufgerufen werden.		die einfach nacheinander aufgerufen werden.

Zeile 1.405:		Zeile 1.405:
	Sobald ein neues Spiel gestartet wird, wird dieser Vert auf <code>0</code> gesetzt.		Sobald ein neues Spiel gestartet wird, wird dieser Vert auf <code>0</code> gesetzt.

	Die Prozedur „<code>~~collisionCanvasBall~~</code>“ informiert <code>minipong</code> mittels Callback, wenn der Ball die Bühne verlässt.		Die Prozedur „<code>collisionStageBall</code>“ informiert <code>minipong</code> mittels Callback, wenn der Ball die Bühne verlässt.
	Als Callback-Funktion wird dieser Prozedur die Prozedur „<code>f_stop</code>“ (siehe unten) übergeben, um das Spiel zu beenden.		Als Callback-Funktion wird dieser Prozedur die Prozedur „<code>f_stop</code>“ (siehe unten) übergeben, um das Spiel zu beenden.

Zeile 1.413:		Zeile 1.413:
	{		{
	collisionBallPaddle(l_ball, l_paddle, function(){ l_score.value++; });		collisionBallPaddle(l_ball, l_paddle, function(){ l_score.value++; });
	~~collisionCanvasBall~~(l_stage, l_ball, f_stop);		collisionStageBall(l_stage, l_ball, f_stop);
	collisionStagePaddle(l_stage, l_paddle);		collisionStagePaddle(l_stage, l_paddle);
	}		}