HTML5-Tutorium: Canvas: MiniPong 03 - Versionsgeschichte

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

2023-03-01T13:19:11Z

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

	Kopieren Sie die Dateien der App3 des ~~Projektes~~ [https://glossar.hs-augsburg.de/beispiel/tutorium/es5/minipong/WK_MiniPong02/ MiniPong02 (App3)]		Kopieren Sie die Dateien der App3 des Projekts [https://glossar.hs-augsburg.de/beispiel/tutorium/es5/minipong/WK_MiniPong02/ MiniPong02 (App3)]
	in das neue Projekt.		in das neue Projekt.

Kowa am 7. Dezember 2016 um 08:11 Uhr

2016-12-07T08:11:41Z

← Nächstältere Version		Version vom 7. Dezember 2016, 08:11 Uhr
Zeile 291:		Zeile 291:
	this.color = p_init.color;		this.color = p_init.color;
	this.borderWidth = p_init.borderWidth;		this.borderWidth = p_init.borderWidth;
	this.borderColor = p_init.~~borderWidth~~;		this.borderColor = p_init.borderColor;

	// Define a local canvas containing the view of the paddle.		// Define a local canvas containing the view of the paddle.

Kowa am 30. November 2016 um 14:19 Uhr

2016-11-30T14:19:14Z

← Nächstältere Version		Version vom 30. November 2016, 14:19 Uhr
Zeile 96:		Zeile 96:
	Wenn der Benutzer durch Tastendruck den Schläger in Bewegung setzt, bewegt er sich zunächst		Wenn der Benutzer durch Tastendruck den Schläger in Bewegung setzt, bewegt er sich zunächst
	mit eine Geschwindigkeit von 100 Pixeln pro Sekunde entlang der $x$-Achse. Je länger der		mit eine Geschwindigkeit von 100 Pixeln pro Sekunde entlang der $x$-Achse. Je länger der
	Benutzer die Taste ~~drück~~, desto schneller wird der Schläger. Er wird mit 500 Pixeln pro Sekunde beschleunigt.		Benutzer die Taste drückt, desto schneller wird der Schläger. Er wird mit 500 Pixeln pro Sekunde beschleunigt.

	In das Objekt „<code>view</code>“ werden folgende Daten eingefügt:		In das Objekt „<code>view</code>“ werden folgende Daten eingefügt:

Kowa am 30. November 2016 um 14:18 Uhr

2016-11-30T14:18:57Z

← Nächstältere Version		Version vom 30. November 2016, 14:18 Uhr
Zeile 283:		Zeile 283:
	# Der Aufhängepunkt eines Rechtecks ist im Canvas-2D-Kontext die linke obere Ecke des Rechtecks ohne Rand. Der Aufhängepunkt eines Kreise ist dagegen dessen Mittelpunkt. Das muss bei Platzieren des Mini-Canvas, der die visuelle Darstellung des Paddels enthält, auf die Bühne berücksichtigt werden. Das heißt, die Draw-Methoden der beiden Objekte unterscheiden sich in dieser Hinsicht.		# Der Aufhängepunkt eines Rechtecks ist im Canvas-2D-Kontext die linke obere Ecke des Rechtecks ohne Rand. Der Aufhängepunkt eines Kreise ist dagegen dessen Mittelpunkt. Das muss bei Platzieren des Mini-Canvas, der die visuelle Darstellung des Paddels enthält, auf die Bühne berücksichtigt werden. Das heißt, die Draw-Methoden der beiden Objekte unterscheiden sich in dieser Hinsicht.

	~~Der~~ Konstruktor:		'''Konstruktor'''
	<source lang="javascript">		<source lang="javascript">
	function ViewPaddle(p_model, p_init, p_document)		function ViewPaddle(p_model, p_init, p_document)
Zeile 315:		Zeile 315:
	</source>		</source>

	~~Die~~ Draw-Methode:		'''Draw-Methode'''
	<source lang="javascript">		<source lang="javascript">
	ViewPaddle.prototype.draw =		ViewPaddle.prototype.draw =

Kowa: /* Modell des Schlägers */

2016-11-30T14:16:10Z

Modell des Schlägers

← Nächstältere Version		Version vom 30. November 2016, 14:16 Uhr
Zeile 150:		Zeile 150:
	function ModelPaddle(p_init)		function ModelPaddle(p_init)
	{		{
	~~// model~~		this.width = p_init.width;
	~~var l_pos~~ = p_init.~~pos,~~		this.height = p_init.height;
	~~l_vel = p_init~~.~~vel,~~
	~~l_acc~~ = p_init.~~acc~~;

	this.~~width~~ = p_init.~~width~~;		this.x = p_init.pos.x;
	this.~~height~~ = p_init.~~height~~;		this.y = p_init.pos.y;

	this.x = ~~l_pos~~.x;		this.vx_start = p_init.vel.x;
	this.y = ~~l_pos~~.y;		this.vy_start = p_init.vel.y;

	this.~~vx_start = l_vel.x;~~		this.ax_start = p_init.acc.x;
	~~this.vy_start~~ = ~~l_vel~~.y;		this.ay_start = p_init.acc.y;

	~~this.ax_start = l_acc~~.x;
	this.ay_start = ~~l_acc~~.y;

	this.stop(); // By default, the paddle does not move.		this.stop(); // By default, the paddle does not move.

Kowa: /* View des Schlägers */

2016-11-30T13:33:18Z

View des Schlägers

← Nächstältere Version		Version vom 30. November 2016, 13:33 Uhr
Zeile 293:		Zeile 293:
	{		{
	this.model = p_model;		this.model = p_model;

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

	// Define a local canvas containing the view of the paddle.		// Define a local canvas containing the view of the paddle.
Zeile 299:		Zeile 302:
	l_context = l_canvas.getContext("2d");		l_context = l_canvas.getContext("2d");

	l_canvas.width = p_model.width + 2*~~p_init~~.borderWidth + 2;		l_canvas.width = p_model.width + 2*this.borderWidth + 2;
	l_canvas.height = p_model.height + 2*~~p_init~~.borderWidth + 2;		l_canvas.height = p_model.height + 2*this.borderWidth + 2;

	l_context.beginPath();		l_context.beginPath();
	l_context.rect(~~p_init~~.borderWidth, ~~p_init~~.borderWidth,		l_context.rect(this.borderWidth, this.borderWidth,
	p_model.width, p_model.height		p_model.width, p_model.height
	);		);
	l_context.fillStyle = ~~p_init~~.color;		l_context.fillStyle = this.color;
	l_context.fill();		l_context.fill();
	if (this.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();		l_context.stroke();
	}		}

Kowa am 30. November 2016 um 12:18 Uhr

2016-11-30T12:18:42Z

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

	==Ziel: Interaktion mit dem Schläger==		==Ziel: Interaktion mit dem Schläger==
	[[Datei:MiniPong03 ~~Model~~.png\|gerahmt\|rechts\|Klassendiagramm]]		[[Datei:MiniPong03 ClassModel.png\|gerahmt\|rechts\|Klassendiagramm]]

	Im dritten Teil des Tutoriums wird beschrieben, wie man die Interaktion mit dem Schläger realisiert.		Im dritten Teil des Tutoriums wird beschrieben, wie man die Interaktion mit dem Schläger realisiert.

Kowa: /* Ziel: Interaktion mit dem Schläger */

2016-11-25T17:26:10Z

Ziel: Interaktion mit dem Schläger

← Nächstältere Version		Version vom 25. November 2016, 17:26 Uhr
Zeile 47:		Zeile 47:

	Zu guter Letzt ist es notwendig die Benutzerinteraktion mit dem Schläger zu ermöglichen. Das ist die Aufgabe des Moduls „<code>keyboardController.js</code>“.		Zu guter Letzt ist es notwendig die Benutzerinteraktion mit dem Schläger zu ermöglichen. Das ist die Aufgabe des Moduls „<code>keyboardController.js</code>“.
	In diesem Modul wird eine Funktion mit dem Namen „<code>keyboardController</code>“ definiert.		In diesem Modul wird eine Funktion mit dem Namen „<code>keyboardController</code>“ definiert, welche je nach Benutzernutzer die Start- oder die Stoppmethode
			des Paddles aufruft.

	==Neues Projekt anlegen==		==Neues Projekt anlegen==

Kowa am 25. November 2016 um 16:53 Uhr

2016-11-25T16:53:10Z

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

	==Ziel: Interaktion mit dem Schläger==		==Ziel: Interaktion mit dem Schläger==
	[[Datei:MiniPong03 Model.~~svg~~\|gerahmt\|rechts\|Klassendiagramm]]		[[Datei:MiniPong03 Model.png\|gerahmt\|rechts\|Klassendiagramm]]

	Im dritten Teil des Tutoriums wird beschrieben, wie man die Interaktion mit dem Schläger realisiert.		Im dritten Teil des Tutoriums wird beschrieben, wie man die Interaktion mit dem Schläger realisiert.

Kowa am 25. November 2016 um 16:33 Uhr

2016-11-25T16:33:30Z

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

	==Ziel: Interaktion mit dem Schläger==		==Ziel: Interaktion mit dem Schläger==
	[[Datei:MiniPong03 Model.~~png~~\|gerahmt\|rechts\|Klassendiagramm]]		[[Datei:MiniPong03 Model.svg\|gerahmt\|rechts\|Klassendiagramm]]

	Im dritten Teil des Tutoriums wird beschrieben, wie man die Interaktion mit dem Schläger realisiert.		Im dritten Teil des Tutoriums wird beschrieben, wie man die Interaktion mit dem Schläger realisiert.