HTML5-Tutorium: Canvas: MiniPong 01 - Versionsgeschichte

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

2023-03-01T13:19:43Z

← Nächstältere Version		Version vom 1. März 2023, 13:19 Uhr
Zeile 85:		Zeile 85:
	==Die CSS-Datei==		==Die CSS-Datei==

	Die CSS-Datei „<code>main.css</code>“ des ~~Projektes~~ sieht folgendermaßen aus:		Die CSS-Datei „<code>main.css</code>“ des Projekts sieht folgendermaßen aus:

	<source lang="css">		<source lang="css">
Zeile 108:		Zeile 108:
	==Die JSON-Datei==		==Die JSON-Datei==

	Die JSON-Datei „<code>init.json</code>“ des ~~Projektes~~ sieht folgendermaßen aus:		Die JSON-Datei „<code>init.json</code>“ des Projekts sieht folgendermaßen aus:
	<source lang="javascript">		<source lang="javascript">
	{		{

Kowa am 30. November 2016 um 12:15 Uhr

2016-11-30T12:15:52Z

← Nächstältere Version		Version vom 30. November 2016, 12:15 Uhr
Zeile 493:		Zeile 493:
	nicht zu behandeln.		nicht zu behandeln.

	[[Datei:MiniPong01a ~~Model~~.png]]		[[Datei:MiniPong01a ClassModel.png]]

	Beachten Sie die Änderung des Klassenmodells: Im [[:Datei:MiniPong01_Model.png\|ursprünglichen Klassenmodell]] ist an der Spitze des Pfeils von		Beachten Sie die Änderung des Klassenmodells: Im [[:Datei:MiniPong01_Model.png\|ursprünglichen Klassenmodell]] ist an der Spitze des Pfeils von

Kowa am 30. November 2016 um 12:14 Uhr

2016-11-30T12:14:33Z

Kowa am 30. November 2016 um 12:10 Uhr

2016-11-30T12:10:58Z

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

	==Ziel: Animation des Balls==		==Ziel: Animation des Balls==
	[[Datei:MiniPong01 ~~Model~~.png\|gerahmt\|rechts\|Klassendiagramm]]		[[Datei:MiniPong01 ClassModel.png\|gerahmt\|rechts\|Klassendiagramm]]
	Im ersten Teil des Tutoriums wird beschrieben, wie man eine einfache Ball-Animation mit Hilfe eines [[Canvas]]-Elements erstellt.		Im ersten Teil des Tutoriums wird beschrieben, wie man eine einfache Ball-Animation mit Hilfe eines [[Canvas]]-Elements erstellt.
	Diese Element gibt es seit HTML5. Es dient dazu dynamisch Pixelgrafiken zu erzeugen und im zugehörigen HTML-Dokuement darzustellen.		Diese Element gibt es seit HTML5. Es dient dazu dynamisch Pixelgrafiken zu erzeugen und im zugehörigen HTML-Dokuement darzustellen.

Kowa: /* Ziel: Animation des Balls */

2016-11-28T17:19:17Z

Ziel: Animation des Balls

← Nächstältere Version		Version vom 28. November 2016, 17:19 Uhr
Zeile 31:		Zeile 31:
	auf die es mit einem roten Pfeil verweist. Das heißt in diesem Fall muss das Modul „<code>minipong</code>“ die Module		auf die es mit einem roten Pfeil verweist. Das heißt in diesem Fall muss das Modul „<code>minipong</code>“ die Module
	„<code>collision</code>“ sowie „<code>Ball</code>“ laden. Alle anderen Module benötigen keine weiteren Module, um ihre Aufgaben erledigen zu können.		„<code>collision</code>“ sowie „<code>Ball</code>“ laden. Alle anderen Module benötigen keine weiteren Module, um ihre Aufgaben erledigen zu können.

			'''Achtung''': Im UML-Standard gibt es keine Farbmarkierung der Beziehungspfeile. Das heißt, die Diagramme sind nicht ganz standard-konform.

	Jedes Modul dieser Web-Anwendung definert genau		Jedes Modul dieser Web-Anwendung definert genau

Kowa: /* Ziel: Animation des Balls */

2016-11-28T16:54:43Z

Ziel: Animation des Balls

@@ Zeile 27: / Zeile 27: @@
 Da als Bühne ein Canvas-Objekt zum Einsatz kommt, welches insbesondere diese beiden Attribute bereits hat, ist es nicht notwendig,
 eine eigene Klasse „<code>Stage</code>“ zu implementieren. Es gibt also keine Modul „<code>stage.js</code>“.
 ==Ein neues Projekt anlegen==

Kowa am 25. November 2016 um 16:51 Uhr

2016-11-25T16:51:32Z

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

	==Ziel: Animation des Balls==		==Ziel: Animation des Balls==
	[[Datei:MiniPong01 Model.~~svg~~\|gerahmt\|rechts\|Klassendiagramm]]		[[Datei:MiniPong01 Model.png\|gerahmt\|rechts\|Klassendiagramm]]
	Im ersten Teil des Tutoriums wird beschrieben, wie man eine einfache Ball-Animation mit Hilfe eines [[Canvas]]-Elements erstellt.		Im ersten Teil des Tutoriums wird beschrieben, wie man eine einfache Ball-Animation mit Hilfe eines [[Canvas]]-Elements erstellt.
	Diese Element gibt es seit HTML5. Es dient dazu dynamisch Pixelgrafiken zu erzeugen und im zugehörigen HTML-Dokuement darzustellen.		Diese Element gibt es seit HTML5. Es dient dazu dynamisch Pixelgrafiken zu erzeugen und im zugehörigen HTML-Dokuement darzustellen.
Zeile 473:		Zeile 473:
	nicht zu behandeln.		nicht zu behandeln.

	[[Datei:MiniPong01a Model.~~svg~~]]		[[Datei:MiniPong01a Model.png]]

	Beachten Sie die Änderung des Klassenmodells: Im [[:Datei:MiniPong01_Model.png\|ursprünglichen Klassenmodel]] ist an der Spitze des Pfeils von		Beachten Sie die Änderung des Klassenmodells: Im [[:Datei:MiniPong01_Model.png\|ursprünglichen Klassenmodel]] ist an der Spitze des Pfeils von

Kowa am 25. November 2016 um 16:32 Uhr

2016-11-25T16:32:03Z

← Nächstältere Version		Version vom 25. November 2016, 16:32 Uhr
Zeile 473:		Zeile 473:
	nicht zu behandeln.		nicht zu behandeln.

	[[Datei:MiniPong01a Model.~~png~~]]		[[Datei:MiniPong01a Model.svg]]

	Beachten Sie die Änderung des Klassenmodells: Im [[:Datei:MiniPong01_Model.png\|ursprünglichen Klassenmodel]] ist an der Spitze des Pfeils von		Beachten Sie die Änderung des Klassenmodells: Im [[:Datei:MiniPong01_Model.png\|ursprünglichen Klassenmodel]] ist an der Spitze des Pfeils von

Kowa am 25. November 2016 um 16:31 Uhr

2016-11-25T16:31:41Z

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

	==Ziel: Animation des Balls==		==Ziel: Animation des Balls==
	[[Datei:MiniPong01 Model.~~png~~\|gerahmt\|rechts\|Klassendiagramm]]		[[Datei:MiniPong01 Model.svg\|gerahmt\|rechts\|Klassendiagramm]]
	Im ersten Teil des Tutoriums wird beschrieben, wie man eine einfache Ball-Animation mit Hilfe eines [[Canvas]]-Elements erstellt.		Im ersten Teil des Tutoriums wird beschrieben, wie man eine einfache Ball-Animation mit Hilfe eines [[Canvas]]-Elements erstellt.
	Diese Element gibt es seit HTML5. Es dient dazu dynamisch Pixelgrafiken zu erzeugen und im zugehörigen HTML-Dokuement darzustellen.		Diese Element gibt es seit HTML5. Es dient dazu dynamisch Pixelgrafiken zu erzeugen und im zugehörigen HTML-Dokuement darzustellen.

Kowa: /* Das Ball-Modul */

2016-11-24T17:08:15Z

Das Ball-Modul

← Nächstältere Version		Version vom 24. November 2016, 17:08 Uhr
Zeile 245:		Zeile 245:
	p_context.fill(); // Fill the inner area of the ball with its color.		p_context.fill(); // Fill the inner area of the ball with its color.
	}		}
	};		};
	</source>		</source>

← Nächstältere Version		Version vom 30. November 2016, 12:14 Uhr
Zeile 14:		Zeile 14:
	[[Datei:MiniPong01 ClassModel.png\|gerahmt\|rechts\|Klassendiagramm]]		[[Datei:MiniPong01 ClassModel.png\|gerahmt\|rechts\|Klassendiagramm]]
	Im ersten Teil des Tutoriums wird beschrieben, wie man eine einfache Ball-Animation mit Hilfe eines [[Canvas]]-Elements erstellt.		Im ersten Teil des Tutoriums wird beschrieben, wie man eine einfache Ball-Animation mit Hilfe eines [[Canvas]]-Elements erstellt.
	Diese Element gibt es seit HTML5. Es dient dazu dynamisch Pixelgrafiken zu erzeugen und im zugehörigen HTML-~~Dokuement~~ darzustellen.		Diese Element gibt es seit HTML5. Es dient dazu dynamisch Pixelgrafiken zu erzeugen und im zugehörigen HTML-Dokument darzustellen.

	Das Spiel besteht aus insgesamt vier Modulen:		Das Spiel besteht aus insgesamt vier Modulen:
Zeile 32:		Zeile 32:
	„<code>collision</code>“ sowie „<code>Ball</code>“ laden. Alle anderen Module benötigen keine weiteren Module, um ihre Aufgaben erledigen zu können.		„<code>collision</code>“ sowie „<code>Ball</code>“ laden. Alle anderen Module benötigen keine weiteren Module, um ihre Aufgaben erledigen zu können.

	'''Achtung''': Im UML-Standard gibt es keine Farbmarkierung der Beziehungspfeile. Das heißt, die Diagramme sind nicht ganz ~~standard-konform~~.		'''Achtung''': Im UML-Standard gibt es keine Farbmarkierung der Beziehungspfeile. Das heißt, die Diagramme sind nicht ganz standardkonform.

	Jedes Modul dieser Web-Anwendung ~~definert~~ genau		Jedes Modul dieser Web-Anwendung definiert genau
	eine Funktion, die es an den Aufrufer des Modul in einem Parameter der zugehörigen Callback-Funktion übergibt. Es gibt zwei Arten von Funktionen:		eine Funktion, die es an den Aufrufer des Modul in einem Parameter der zugehörigen Callback-Funktion übergibt. Es gibt zwei Arten von Funktionen:
	* Reguläre Prozeduren oder Funktionen, die beim Aufruf irgendwelche Aufgaben erledigen bzw. irgendwelche Berechnungen durchführen. Zumeist handelt es sich um Prozeduren ohne Ergebnis. In JavaScript wird allerdings nicht zwischen Prozeduren und Funktionen unterschieden. In beiden Fällen wird das Schlüsselwort „<code>function</code>“ verwendet. Daher wird dieses Schlüsselwort auch im Diagramm verwendet.		* Reguläre Prozeduren oder Funktionen, die beim Aufruf irgendwelche Aufgaben erledigen bzw. irgendwelche Berechnungen durchführen. Zumeist handelt es sich um Prozeduren ohne Ergebnis. In JavaScript wird allerdings nicht zwischen Prozeduren und Funktionen unterschieden. In beiden Fällen wird das Schlüsselwort „<code>function</code>“ verwendet. Daher wird dieses Schlüsselwort auch im Diagramm verwendet.
Zeile 70:		Zeile 70:
	Wenn Sie jetzt Ihre Anwendung (<code>index.html</code>) starten, sollte der Browser eine leere Seite anzeigen. Das is OK, denn in der HTML-Datei		Wenn Sie jetzt Ihre Anwendung (<code>index.html</code>) starten, sollte der Browser eine leere Seite anzeigen. Das is OK, denn in der HTML-Datei
	ist bislang nur eine leerer Body enthalten. Wichtig ist, dass im HTML-Konsolfenster, das sie erst noch öffnen müssen, kein Fehler gemeldet wird.		ist bislang nur eine leerer Body enthalten. Wichtig ist, dass im HTML-Konsolfenster, das sie erst noch öffnen müssen, kein Fehler gemeldet wird.
	~~Anderengfalls~~ haben Sie bei der Umbenennungsaktion irgendetwas falsch gemacht.		Anderenfalls haben Sie bei der Umbenennungsaktion irgendetwas falsch gemacht.

	==Die HTML-Datei==		==Die HTML-Datei==
Zeile 222:		Zeile 222:
	im Prototyp-Objekt „<code>Ball.prototype</code>“ des Konstruktors gespeichert, damit nicht für jedes Ballobjekt eine eigen Methode erzeugt wird.		im Prototyp-Objekt „<code>Ball.prototype</code>“ des Konstruktors gespeichert, damit nicht für jedes Ballobjekt eine eigen Methode erzeugt wird.

	* <code>move</code> bewegt den Ball an seine neue Position; diese wird aus der aktuellen Position, dem Geschwindigkeitsvektor und der Zeitspanne, die seit dem ~~letzen~~ Aufruf des <code>move</code>-Befehls vergangen ist, berechnet.		* <code>move</code> bewegt den Ball an seine neue Position; diese wird aus der aktuellen Position, dem Geschwindigkeitsvektor und der Zeitspanne, die seit dem letzten Aufruf des <code>move</code>-Befehls vergangen ist, berechnet.
	* <code>draw</code> visualisiert das (zweidimensionale) Ballobjekt auf dem 2D-Kontext einer Bühne (Canvas).		* <code>draw</code> visualisiert das (zweidimensionale) Ballobjekt auf dem 2D-Kontext einer Bühne (Canvas).

Zeile 276:		Zeile 276:
	dann bewegt er sich in $0,01\bar{6}$ Sekunden um <code>vx * 0,0166666666667</code> (<code>=== this.vx * p_seconds</code>)		dann bewegt er sich in $0,01\bar{6}$ Sekunden um <code>vx * 0,0166666666667</code> (<code>=== this.vx * p_seconds</code>)
	Pixel in x-Richtung und um <code>vy * 0,0166666666667</code> (<code>=== this.vy * p_seconds</code>) Pixel in y-Richtung. Diese Beträge müssen		Pixel in x-Richtung und um <code>vy * 0,0166666666667</code> (<code>=== this.vy * p_seconds</code>) Pixel in y-Richtung. Diese Beträge müssen
	also zu den $x$- und $y$-Koordinaten der aktuellen Ballposition ~~hinzugezählt~~ werden.		also zu den $x$- und $y$-Koordinaten der aktuellen Ballposition addiert werden.

	Die Methode „<code>draw</code>“ wird ebenfalls alle paar Millisekunden aufgerufen. Wie häufig das passiert ist allerdings unwesentlich.		Die Methode „<code>draw</code>“ wird ebenfalls alle paar Millisekunden aufgerufen. Wie häufig das passiert ist allerdings unwesentlich.
Zeile 376:		Zeile 376:

	Die Draw-Methode wird '''innerhalb''' der Funktion „<code>minipong</code>“ definiert.		Die Draw-Methode wird '''innerhalb''' der Funktion „<code>minipong</code>“ definiert.
	Dies hat den Vorteil, dass sie auf die lokalen ~~Varaiblen~~ „<code>l_ball</code>“, „<code>l_seconds</code>“		Dies hat den Vorteil, dass sie auf die lokalen Variablen „<code>l_ball</code>“, „<code>l_seconds</code>“
	etc. zugreifen kann, die ebenfalls innerhalb dieser Funktion definiert wurden und auch nur dort zugänglich sind.		etc. zugreifen kann, die ebenfalls innerhalb dieser Funktion definiert wurden und auch nur dort zugänglich sind.
	Von außen kann auf diese Variablen nicht zugegriffen werden. ~~Direk~~ im Anschluss an die Funktionsdefinition wird		Von außen kann auf diese Variablen nicht zugegriffen werden. Direkt im Anschluss an die Funktionsdefinition wird
	ein Timer-Objekt erstellt, das die Draw-Funktion alle <code>l_milliseconds</code> aufruft. Dazu wird die		ein Timer-Objekt erstellt, das die Draw-Funktion alle <code>l_milliseconds</code> aufruft. Dazu wird die
	JavaScript-Funktion „<code>setInterval</code>“ verwendet. Diese Funktion ist als Methode im Window-Objekt		JavaScript-Funktion „<code>setInterval</code>“ verwendet. Diese Funktion ist als Methode im Window-Objekt
	der Web-Anwendung enthalten. Allerdings ist sie relativ ungenau. Sie bemüht sich zwar, zwischen zwei Aufrufen		der Web-Anwendung enthalten. Allerdings ist sie relativ ungenau. Sie bemüht sich zwar, zwischen zwei Aufrufen
	der Draw-Funktion jeweils <code>l_milliseconds</code> Millisekunden vergehen zu lassen, aber das klappt nur		der Draw-Funktion jeweils <code>l_milliseconds</code> Millisekunden vergehen zu lassen, aber das klappt nur
	dann einigermaßen, wenn das Betriebssystem oder der ~~Bowser~~ nicht gerade anderweitig beschäftigt ist.		dann einigermaßen, wenn das Betriebssystem oder der Browser nicht gerade anderweitig beschäftigt ist.
	Bei einem gut ausgelasteten Rechner wird das Spiel daher öfters ruckeln. Diese Problem und mögliche Problemlösungen		Bei einem gut ausgelasteten Rechner wird das Spiel daher öfters ruckeln. Diese Problem und mögliche Problemlösungen
	sollen aber hier nicht weiter thematisiert werden.		sollen aber hier nicht weiter thematisiert werden.
Zeile 495:		Zeile 495:
	[[Datei:MiniPong01a Model.png]]		[[Datei:MiniPong01a Model.png]]

	Beachten Sie die Änderung des Klassenmodells: Im [[:Datei:MiniPong01_Model.png\|ursprünglichen ~~Klassenmodel~~]] ist an der Spitze des Pfeils von		Beachten Sie die Änderung des Klassenmodells: Im [[:Datei:MiniPong01_Model.png\|ursprünglichen Klassenmodell]] ist an der Spitze des Pfeils von
	der Funktion „<code>minipong</code>“ zur Klasse „<code>Ball</code>“ die Vielfachheit „<code>1</code>“ angegeben. In diesem ~~Diagram~~ steht dort die		der Funktion „<code>minipong</code>“ zur Klasse „<code>Ball</code>“ die Vielfachheit „<code>1</code>“ angegeben. In diesem Diagramm steht dort die
	„<code>0..*</code>“. Das heißt, die Funktion „<code>minipong</code>“ muss beliebig viele Bälle erzeugen und animieren können.		„<code>0..*</code>“. Das heißt, die Funktion „<code>minipong</code>“ muss beliebig viele Bälle erzeugen und animieren können.
	Wie viele Bälle das sind, sollte in der JSON-Datei festgelegt werden. Die erzeugten Bälle sollten – wie zuvor das einzelne Ballobjekt – '''innerhalb''' der Funktion „<code>minipong</code>“ gespeichert werden. Als Container für die Speicherung der Bälle verwenden Sie am Besten ein Array.		Wie viele Bälle das sind, sollte in der JSON-Datei festgelegt werden. Die erzeugten Bälle sollten – wie zuvor das einzelne Ballobjekt – '''innerhalb''' der Funktion „<code>minipong</code>“ gespeichert werden. Als Container für die Speicherung der Bälle verwenden Sie am Besten ein Array.