HTML5-Tutorium: Canvas: MiniPong 02 - Versionsgeschichte

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

2023-03-01T13:06:01Z

← Nächstältere Version		Version vom 1. März 2023, 13:06 Uhr
Zeile 29:		Zeile 29:
	Legen Sie ein neues Projekt mit dem Namen „<code>MiniPong02</code>“ an.		Legen Sie ein neues Projekt mit dem Namen „<code>MiniPong02</code>“ an.

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

Kowa: /* Caching der Ball-Textur */

2016-11-30T13:37:18Z

Caching der Ball-Textur

← Nächstältere Version		Version vom 30. November 2016, 13:37 Uhr
Zeile 329:		Zeile 329:
	function ViewBall(p_model, p_init, p_document)		function ViewBall(p_model, p_init, p_document)
	{		{
	this.model = p_model;		this.model = p_model;

			this.color = p_init.color;
			this.borderWidth = p_init.borderWidth;
			this.borderColor = p_init.borderWidth;

	// Define a local canvas containing the view of the ball.		// Define a local canvas containing the view of the ball.
	var l_center = this.v_center = p_model.r + ~~p_init~~.borderWidth + 1,		var l_center = this.v_center = p_model.r + this.borderWidth + 1,
	l_canvas = this.v_canvas = p_document.createElement("canvas"),		l_canvas = this.v_canvas = p_document.createElement("canvas"),
	l_context = l_canvas.getContext("2d");		l_context = l_canvas.getContext("2d");
Zeile 341:		Zeile 345:
	l_context.beginPath();		l_context.beginPath();
	l_context.arc(l_center, l_center, p_model.r, 0, 2*Math.PI);		l_context.arc(l_center, l_center, p_model.r, 0, 2*Math.PI);
	l_context.lineWidth = ~~p_init~~.borderWidth;		l_context.lineWidth = this.borderWidth;
	l_context.fillStyle = ~~p_init~~.color;		l_context.fillStyle = this.color;
	if (~~p_init~~.borderWidth > 0)		if (this.borderWidth > 0)
	{		{
	l_context.lineWidth = ~~p_init~~.borderWidth;		l_context.lineWidth = this.borderWidth;
	l_context.strokeStyle = ~~p_init~~.borderColor;		l_context.strokeStyle = this.borderColor;
	l_context.stroke(); // Draw the border.		l_context.stroke(); // Draw the border.
	}		}

Kowa am 30. November 2016 um 12:17 Uhr

2016-11-30T12:17:31Z

← Nächstältere Version		Version vom 30. November 2016, 12:17 Uhr
Zeile 186:		Zeile 186:

	==Trennung von Model-Klasse und View-Klasse==		==Trennung von Model-Klasse und View-Klasse==
	[[Datei:MiniPong02 ~~Model~~.png\|gerahmt\|rechts\|Klassendiagramm]]		[[Datei:MiniPong02 ClassModel.png\|gerahmt\|rechts\|Klassendiagramm]]

	Jetzt, nachdem die Berechnung der Animation erfolgreich in Model und View getrennt wurden,		Jetzt, nachdem die Berechnung der Animation erfolgreich in Model und View getrennt wurden,

Kowa: /* Erweiterung */

2016-11-25T17:29:25Z

Erweiterung

← Nächstältere Version		Version vom 25. November 2016, 17:29 Uhr
Zeile 406:		Zeile 406:
	nicht zu behandeln.		nicht zu behandeln.

	'''Musterlösung''': <code>[https://glossar.hs-augsburg.de/beispiel/tutorium/es5/minipong/WK_MiniPong02a/web/index1.html ~~index1a~~.html]</code>,		'''Musterlösung''': <code>[https://glossar.hs-augsburg.de/beispiel/tutorium/es5/minipong/WK_MiniPong02a/web/index1.html index1.html]</code>,
	<code>[https://glossar.hs-augsburg.de/beispiel/tutorium/es5/minipong/WK_MiniPong02a/web/index2.html ~~index2a~~.html]</code>,		<code>[https://glossar.hs-augsburg.de/beispiel/tutorium/es5/minipong/WK_MiniPong02a/web/index2.html index2.html]</code>,
	<code>[https://glossar.hs-augsburg.de/beispiel/tutorium/es5/minipong/WK_MiniPong02a/web/index2_many.html ~~index2a_many~~.html]</code>,		<code>[https://glossar.hs-augsburg.de/beispiel/tutorium/es5/minipong/WK_MiniPong02a/web/index2_many.html index2_many.html]</code>,
	<code>[https://glossar.hs-augsburg.de/beispiel/tutorium/es5/minipong/WK_MiniPong02a/web/index3.html ~~index3a~~.html]</code>,		<code>[https://glossar.hs-augsburg.de/beispiel/tutorium/es5/minipong/WK_MiniPong02a/web/index3.html index3.html]</code>,
	<code>[https://glossar.hs-augsburg.de/beispiel/tutorium/es5/minipong/WK_MiniPong02a/web/index3_many.html ~~index3a_many~~.html]</code>		<code>[https://glossar.hs-augsburg.de/beispiel/tutorium/es5/minipong/WK_MiniPong02a/web/index3_many.html index3_many.html]</code>,
			<code>[https://glossar.hs-augsburg.de/beispiel/tutorium/es5/minipong/WK_MiniPong02a/web/index4.html index4.html]</code>,
			<code>[https://glossar.hs-augsburg.de/beispiel/tutorium/es5/minipong/WK_MiniPong02a/web/index4_many.html index4_many.html]</code>
	([https://glossar.hs-augsburg.de/beispiel/tutorium/es5/minipong/WK_MiniPong02a/ WK_MiniPong02a (SVN)])		([https://glossar.hs-augsburg.de/beispiel/tutorium/es5/minipong/WK_MiniPong02a/ WK_MiniPong02a (SVN)])

Kowa: /* Caching der Ball-Textur */

2016-11-25T17:27:44Z

Caching der Ball-Textur

← Nächstältere Version		Version vom 25. November 2016, 17:27 Uhr
Zeile 347:		Zeile 347:
	l_context.lineWidth = p_init.borderWidth;		l_context.lineWidth = p_init.borderWidth;
	l_context.strokeStyle = p_init.borderColor;		l_context.strokeStyle = p_init.borderColor;
	l_context.stroke(); // Draw the border.		l_context.stroke(); // Draw the border.
	}		}
	l_context.fill(); // Fill the inner area of the ball with its color.		l_context.fill(); // Fill the inner area of the ball with its color.

Kowa am 25. November 2016 um 16:52 Uhr

2016-11-25T16:52:28Z

← Nächstältere Version		Version vom 25. November 2016, 16:52 Uhr
Zeile 186:		Zeile 186:

	==Trennung von Model-Klasse und View-Klasse==		==Trennung von Model-Klasse und View-Klasse==
	[[Datei:MiniPong02 Model.~~svg~~\|gerahmt\|rechts\|Klassendiagramm]]		[[Datei:MiniPong02 Model.png\|gerahmt\|rechts\|Klassendiagramm]]

	Jetzt, nachdem die Berechnung der Animation erfolgreich in Model und View getrennt wurden,		Jetzt, nachdem die Berechnung der Animation erfolgreich in Model und View getrennt wurden,

Kowa am 25. November 2016 um 16:32 Uhr

2016-11-25T16:32:39Z

← Nächstältere Version		Version vom 25. November 2016, 16:32 Uhr
Zeile 186:		Zeile 186:

	==Trennung von Model-Klasse und View-Klasse==		==Trennung von Model-Klasse und View-Klasse==
	[[Datei:MiniPong02 Model.~~png~~\|gerahmt\|rechts\|Klassendiagramm]]		[[Datei:MiniPong02 Model.svg\|gerahmt\|rechts\|Klassendiagramm]]

	Jetzt, nachdem die Berechnung der Animation erfolgreich in Model und View getrennt wurden,		Jetzt, nachdem die Berechnung der Animation erfolgreich in Model und View getrennt wurden,

Kowa: /* Caching der Ball-Textur */

2016-11-23T14:21:16Z

Caching der Ball-Textur

← Nächstältere Version		Version vom 23. November 2016, 14:21 Uhr
Zeile 329:		Zeile 329:
	function ViewBall(p_model, p_init, p_document)		function ViewBall(p_model, p_init, p_document)
	{		{
	this.model = p_model;		this.model = p_model;
	~~this.color = p_init.color;~~
	~~this.borderWidth = p_init.borderWidth;~~
	~~this.borderColor = p_init.borderColor~~;

	// Define a local canvas containing the view of the ball.		// Define a local canvas containing the view of the ball.
	var l_center = this.v_center = ~~this.model~~.r+~~this~~.borderWidth,		var l_center = this.v_center = p_model.r + p_init.borderWidth + 1,
	l_canvas = this.v_canvas = p_document.createElement("canvas"),		l_canvas = this.v_canvas = p_document.createElement("canvas"),
	l_context = l_canvas.getContext("2d");		l_context = l_canvas.getContext("2d");

	l_canvas.width = 2*l_center;		l_canvas.width = 2 * l_center;
	l_canvas.height = 2*l_center;		l_canvas.height = 2 * l_center;

	l_context.beginPath();		l_context.beginPath();
	l_context.arc(l_center, l_center, ~~this.model~~.r, 0, 2*Math.PI);		l_context.arc(l_center, l_center, p_model.r, 0, 2*Math.PI);
	l_context.~~fillStyle~~ = ~~this~~.~~color~~;		l_context.lineWidth = p_init.borderWidth;
	l_context.~~fill()~~; ~~// Fill the inner area of the ball with its color.~~		l_context.fillStyle = p_init.color;
	if (~~this~~.borderWidth > 0)		if (p_init.borderWidth > 0)
	{		{
	l_context.lineWidth = ~~this~~.borderWidth;		l_context.lineWidth = p_init.borderWidth;
	l_context.strokeStyle = ~~this~~.borderColor;		l_context.strokeStyle = p_init.borderColor;
	l_context.stroke(); // Draw the border.		l_context.stroke(); // Draw the border.
	}		}
			l_context.fill(); // Fill the inner area of the ball with its color.
	}		}

	ViewBall.prototype~~.draw~~ =		ViewBall.prototype =
	function(p_context)		{
	{		draw:
	// Instead of drawing the ball each time ~~this method is called~~,		function(p_context)
	// ~~just copy the~~ mini canvas the ball to the ~~main canvas~~ (at the right		{
	// position of course).		// Instead of drawing the ball each time, just copy the
	p_context.drawImage(this.v_canvas,		// mini canvas containing the image of the ball to the
	this.model.x-this.v_center,		// 2d context (at the right position of course).
	this.model.y-this.v_center		p_context.drawImage(this.v_canvas,
	);		this.model.x - this.v_center,
	};		this.model.y - this.v_center
			);
			}
			};
	</source>		</source>
			'''Anmerkung''': Es ist jetzt gar nicht mehr notwendig, die Attribute „<code>color</code>“, „<code>borderWidth</code>“ und „<code>borderColor</code>“ im Objekt
			zu speichern. Die drei im Initialisierungsobjekt „<code>p_init</code>“ enthaltenen Werte werden vom Konstruktor direkt verwendet, um ein Bild des Balls auf einem
			Mini-Canvas zu zeichnen. Die Draw-Methode benötigt nur noch einen Zugriff auf das Model „<code>this.model</code>“, das Bild des Balls „<code>this.v_canvas</code>“ und den Bildmittelpunkt „<code>this.v_center</code>“. Letzteres wird benötigt, da der Aufhängepunkt eine Canvas-Elements dessen linke obere Ecke ist. Der
			Aufhängepunkt des Balls ist jedoch dessen Mittelpunkt. Dieser befindet sich in der Mitte des Bildes.

	Man beachte, dass der Konstruktor jetzt noch einen dritten Parameter erwartet: <code>p_document</code>.		Man beachte, dass der Konstruktor jetzt noch einen dritten Parameter erwartet: <code>p_document</code>.
Zeile 372:		Zeile 377:

	Dieser Parameter muss beim Aufruf des Konstruktor natürlich mit einem geeigneten Argument bedacht werden.		Dieser Parameter muss beim Aufruf des Konstruktor natürlich mit einem geeigneten Argument bedacht werden.
	Dafür ~~sind~~ folgende ~~Änderungen~~ notwendig:		Dafür ist folgende Änderung in der Datei „<code>minipong.js</code>“ notwendig:

	~~'''<code>minipong.js</code>''': Definition eines neuen Parameters „<code>p_document</code>“ und Übergabe als Argument an den Konstruktor „<code>ViewBall</code>“.~~
	<source lang="javascript">		<source lang="javascript">
	...		...
	~~function MiniPong(p_init, p_context, p_document)~~		l_view_ball = new ViewBall(l_model_ball, p_init.view.ball, p_window.document),
	{
	~~var l_model_ball = new ModelBall(p_init.model.ball),~~
	l_view_ball = new ViewBall(l_model_ball, p_init.view.ball, ~~p_document~~),
	...		...
	</source>		</source>

	~~'''<code>init.js</code>''': Übergabe des Objektes~~ „<code>p_window.document</code>“ ~~als Argument an den Konstruktor~~ „<code>~~MiniPong~~</code>“.		Schöner ist es natürlich, wenn zunächst eine lokale Variable „<code>l_document = p_window.document</code>“ definiert wird,
	~~<source lang="javascript">~~		da in der Funktion „<code>minipong</code>“ mehrfach auf das Dokumentobjekt zugegriffen wird.
	~~...~~
	~~l_game = new MiniPong(p_init, l_canvas.getContext("2d"), p_window.document);~~
	~~...~~
	~~</source>~~

	'''Anmerkung''':		'''Anmerkung''':

Kowa am 23. November 2016 um 14:00 Uhr

2016-11-23T14:00:47Z

Änderungen zeigen

Kowa: /* Caching der Ball-Textur */

2016-11-14T16:34:46Z

Caching der Ball-Textur

← Nächstältere Version		Version vom 14. November 2016, 16:34 Uhr
Zeile 378:		Zeile 378:
	// position of course).		// position of course).
	p_context.drawImage(this.v_canvas,		p_context.drawImage(this.v_canvas,
	this.model.x-this.v_center,		this.model.x-this.v_center,
	this.model.y-this.v_center		this.model.y-this.v_center
	);		);
	};		};
	</source>		</source>