MMProg: Praktikum: WiSe 2017/18: Ball03b - Versionsgeschichte

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

2023-03-01T12:51:32Z

← Nächstältere Version		Version vom 1. März 2023, 12:51 Uhr
Zeile 6:		Zeile 6:

	In diesem Praktikum wird die im [[MMProg: Praktikum: WiSe 2017/18: Ball03\|dritten Teils des Tutoriums]] begonnene Modularisierung		In diesem Praktikum wird die im [[MMProg: Praktikum: WiSe 2017/18: Ball03\|dritten Teils des Tutoriums]] begonnene Modularisierung
	des ~~Projektes~~ aus dem [[MMProg: Praktikum: WiSe 2017/18: Ball02\|zweiten Teils des Tutoriums]] weitergeführt.		des Projekts aus dem [[MMProg: Praktikum: WiSe 2017/18: Ball02\|zweiten Teils des Tutoriums]] weitergeführt.

	==Aufgaben==		==Aufgaben==
Zeile 15:		Zeile 15:

	Erstellen Sie ein neues Projekt <code>praktikum03b</code> und kopieren Sie die Ordner <code>src</code> und <code>web</code> (samt Inhalt)		Erstellen Sie ein neues Projekt <code>praktikum03b</code> und kopieren Sie die Ordner <code>src</code> und <code>web</code> (samt Inhalt)
	sowie alle Dateien, die Sie im Wurzelverzeichnis des ~~Projektes~~ <code>WK_Ball03b_Empty</code>		sowie alle Dateien, die Sie im Wurzelverzeichnis des Projekts <code>WK_Ball03b_Empty</code>
	finden, mittels <code>Ctrl-/Apfel-C</code> <code>Ctrl-/Apfel-V</code> in Ihr eigenes Projekt. (Die Frage, ob WebStorm seinen eigenen File Watcher zum		finden, mittels <code>Ctrl-/Apfel-C</code> <code>Ctrl-/Apfel-V</code> in Ihr eigenes Projekt. (Die Frage, ob WebStorm seinen eigenen File Watcher zum
	Übersetzen von ES6-Code in ES5-Code verwenden soll, beantworten Sie bitte mit „No“. Das erledigt Webpack für Sie.)		Übersetzen von ES6-Code in ES5-Code verwenden soll, beantworten Sie bitte mit „No“. Das erledigt Webpack für Sie.)

Kowa am 23. Januar 2018 um 16:34 Uhr

2018-01-23T16:34:58Z

← Nächstältere Version		Version vom 23. Januar 2018, 16:34 Uhr
Zeile 90:		Zeile 90:
	<source lang="javascript">v_ball_view		<source lang="javascript">v_ball_view
	= new ViewCircle(p_pixi, p_canvas, v_ball,		= new ViewCircle(p_pixi, p_canvas, v_ball,
	{		{ border: 5,
	border: 5,
	borderColor: 0xAAAAAA,		borderColor: 0xAAAAAA,
	color: 0xFFAA00		color: 0xFFAA00
Zeile 127:		Zeile 126:
	<source lang="javascript">		<source lang="javascript">
	constructor(p_config = {})		constructor(p_config = {})
	{		{ mixin
	mixin
	( // Default values		( // Default values
	{ x: 0, y: 0,		{ x: 0, y: 0,
Zeile 153:		Zeile 151:

	update(p_dt = 1/60)		update(p_dt = 1/60)
	{		{ this.x += this.vx * p_dt;
	this.x += this.vx * p_dt;
	this.y += this.vy * p_dt;		this.y += this.vy * p_dt;

Zeile 176:		Zeile 173:
	<source lang="javascript">		<source lang="javascript">
	for (let l_key of Object.keys(p_config))		for (let l_key of Object.keys(p_config))
	this[l_key] = p_config[l_key];		this[l_key] = p_config[l_key];
	</source>		</source>
	in das neu erstellte Objekt <code>this</code> kopiert. Diese Aufgabe		in das neu erstellte Objekt <code>this</code> kopiert. Diese Aufgabe
Zeile 190:		Zeile 187:
	<source lang="javascript">		<source lang="javascript">
	function mixin(p_source, p_target, p_replace = false)		function mixin(p_source, p_target, p_replace = false)
	{		{ for (let l_key of Object.keys(p_source))
	for (let l_key of Object.keys(p_source))
	if (p_replace \|\| !p_target[l_key])		if (p_replace \|\| !p_target[l_key])
	p_target[l_key] = p_source[l_key];		p_target[l_key] = p_source[l_key];
Zeile 238:		Zeile 234:
	<source lang="javascript">		<source lang="javascript">
	constructor(p_config = {})		constructor(p_config = {})
	{		{ this.type = 'Movable';
	this.type = 'Movable';

	this. x = 0; this.y = 0;		this. x = 0; this.y = 0;
Zeile 258:		Zeile 253:
	<source lang="javascript">		<source lang="javascript">
	class MovableCircle extends Movable		class MovableCircle extends Movable
	{		{ constructor(p_config = {})
	constructor(p_config = {})		{ super
	{
	super
	( mixin		( mixin
	( // circle standard values (which may not be replaced)		( // circle standard values (which may not be replaced)
Zeile 288:		Zeile 281:
	<source lang="javascript">		<source lang="javascript">
	class MovableCircle extends Movable		class MovableCircle extends Movable
	{		{ constructor(p_config = {})
	constructor(p_config = {})		{ super(p_config);
	{
	super(p_config);

	this.r = p_config.r \|\| 0;		this.r = p_config.r \|\| 0;
Zeile 321:		Zeile 312:
	<source lang="javascript">		<source lang="javascript">
	function modelUpdate(p_models, p_dt = 1/60)		function modelUpdate(p_models, p_dt = 1/60)
	{		{ const
	const
	c_stage = p_models.stage,		c_stage = p_models.stage,
	c_ball = p_models.ball;		c_ball = p_models.ball;
Zeile 338:		Zeile 328:
	<source lang="javascript">		<source lang="javascript">
	function viewUpdate(p_views)		function viewUpdate(p_views)
	{		{ p_views.ball.update(); }
	p_views.ball.update();
	}
	</source>		</source>

Zeile 359:		Zeile 347:
	<source lang="javascript">		<source lang="javascript">
	function modelUpdates(p_dt = 1/60)		function modelUpdates(p_dt = 1/60)
	{		{ modelUpdate(v_models, p_dt); }
	modelUpdate(v_models, p_dt);
	}

	function viewUpdates()		function viewUpdates()
	{		{ viewUpdate(v_views); }
	viewUpdate(v_views);
	}
	</source>		</source>

Kowa am 13. Dezember 2017 um 10:46 Uhr

2017-12-13T10:46:50Z

← Nächstältere Version		Version vom 13. Dezember 2017, 10:46 Uhr
Zeile 16:		Zeile 16:
	Erstellen Sie ein neues Projekt <code>praktikum03b</code> und kopieren Sie die Ordner <code>src</code> und <code>web</code> (samt Inhalt)		Erstellen Sie ein neues Projekt <code>praktikum03b</code> und kopieren Sie die Ordner <code>src</code> und <code>web</code> (samt Inhalt)
	sowie alle Dateien, die Sie im Wurzelverzeichnis des Projektes <code>WK_Ball03b_Empty</code>		sowie alle Dateien, die Sie im Wurzelverzeichnis des Projektes <code>WK_Ball03b_Empty</code>
	finden, mittels <code>~~Crtl~~-/Apfel-C</code> <code>~~Crtl~~-/Apfel-V</code> in Ihr eigenes Projekt. (Die Frage, ob WebStorm seinen eigenen File Watcher zum		finden, mittels <code>Ctrl-/Apfel-C</code> <code>Ctrl-/Apfel-V</code> in Ihr eigenes Projekt. (Die Frage, ob WebStorm seinen eigenen File Watcher zum
	Übersetzen von ES6-Code in ES5-Code verwenden soll, beantworten Sie bitte mit „No“. Das erledigt Webpack für Sie.)		Übersetzen von ES6-Code in ES5-Code verwenden soll, beantworten Sie bitte mit „No“. Das erledigt Webpack für Sie.)

Kowa am 24. November 2017 um 13:52 Uhr

2017-11-24T13:52:30Z

← Nächstältere Version		Version vom 24. November 2017, 13:52 Uhr
Zeile 29:		Zeile 29:
	Sie können zur Lösung der nachfolgenden Aufgaben natürlich auch auf IHre eigene Lösung der letzten PRaktikumsaufgabe zurückgreifen.		Sie können zur Lösung der nachfolgenden Aufgaben natürlich auch auf IHre eigene Lösung der letzten PRaktikumsaufgabe zurückgreifen.

	Schreiben Sie Ihre Lösungen der Aufgabe $i$ in die Ordner <code>game</code>$i$<code>.js</code>.		Schreiben Sie Ihre Lösungen der Aufgabe <math>i</math> in die Ordner <code>game</code><math>i</math><code>.js</code>.
	Versuchen Sie möglichst viele Module der jeweils vorangegangenen Aufgabe wiederzuverwenden.		Versuchen Sie möglichst viele Module der jeweils vorangegangenen Aufgabe wiederzuverwenden.

Kowa am 24. November 2017 um 10:49 Uhr

2017-11-24T10:49:19Z

← Nächstältere Version		Version vom 24. November 2017, 10:49 Uhr
Zeile 81:		Zeile 81:

	Ersetzen Sie in der <code>let</code>-Anweisung die Definition		Ersetzen Sie in der <code>let</code>-Anweisung die Definition
	<source lang="javascript">v_ball = new ModelCircle({ r: 75, ...}),</source>		<source lang="javascript">v_ball = new ModelCircle({ r: 75, ... }),</source>
	durch		durch
	<source lang="javascript">v_ball = null,</source>		<source lang="javascript">v_ball = null,</source>

Kowa am 24. November 2017 um 10:48 Uhr

2017-11-24T10:48:43Z

← Nächstältere Version		Version vom 24. November 2017, 10:48 Uhr
Zeile 81:		Zeile 81:

	Ersetzen Sie in der <code>let</code>-Anweisung die Definition		Ersetzen Sie in der <code>let</code>-Anweisung die Definition
	<source lang="javascript">v_ball = new ModelCircle(...)</source>		<source lang="javascript">v_ball = new ModelCircle({ r: 75, ...}),</source>
	durch		durch
	<source lang="javascript">v_ball = null</source>		<source lang="javascript">v_ball = null,</source>
	und fügen Sie dafür den Befehl		und fügen Sie dafür den Befehl
	<source lang="javascript">v_ball = new ModelCircle(p_config.model.ball)</source>		<source lang="javascript">v_ball = new ModelCircle(p_config.model.ball)</source>
	in die Initfunktion ein. Ersetzen Sie außerdem in der Initfunktion		in die Initfunktion ein. Ersetzen Sie außerdem in der Initfunktion
	den Befehl		den Befehl

Kowa am 24. November 2017 um 10:13 Uhr

2017-11-24T10:13:27Z

← Nächstältere Version		Version vom 24. November 2017, 10:13 Uhr
Zeile 96:		Zeile 96:
	}		}
	);</source>		);</source>
	~~und fügen Sie dafür~~ den Befehl		durch den Befehl
	<source lang="javascript">v_ball_view = new ViewCircle(p_pixi, p_canvas, v_ball, p_config.view.ball);</source>		<source lang="javascript">v_ball_view = new ViewCircle(p_pixi, p_canvas, v_ball, p_config.view.ball);</source>

Kowa am 24. November 2017 um 10:12 Uhr

2017-11-24T10:12:42Z

← Nächstältere Version		Version vom 24. November 2017, 10:12 Uhr
Zeile 81:		Zeile 81:

	Ersetzen Sie in der <code>let</code>-Anweisung die Definition		Ersetzen Sie in der <code>let</code>-Anweisung die Definition
	<source lang="javascript">v_ball = new ModelCircle(...)</source>		<source lang="javascript">v_ball = new ModelCircle(...)</source>
	durch		durch
	<source lang="javascript">v_ball = null</source>		<source lang="javascript">v_ball = null</source>
	und fügen Sie dafür den Befehl		und fügen Sie dafür den Befehl
	<source lang="javascript">v_ball = new ModelCircle(p_config.model.ball)</source>		<source lang="javascript">v_ball = new ModelCircle(p_config.model.ball)</source>
	in die Initfunktion ein. Ersetzen Sie außerdem in der Initfunktion		in die Initfunktion ein. Ersetzen Sie außerdem in der Initfunktion
	den Befehl		den Befehl
	<source lang="javascript">v_ball ~~= null~~</source>		<source lang="javascript">v_ball_view
			= new ViewCircle(p_pixi, p_canvas, v_ball,
			{
			border: 5,
			borderColor: 0xAAAAAA,
			color: 0xFFAA00
			}
			);</source>
	und fügen Sie dafür den Befehl		und fügen Sie dafür den Befehl
	<source lang="javascript">v_ball_view = new ViewCircle(p_pixi, p_canvas, v_ball, p_config.view.ball);</source>		<source lang="javascript">v_ball_view = new ViewCircle(p_pixi, p_canvas, v_ball, p_config.view.ball);</source>

Kowa am 24. November 2017 um 06:59 Uhr

2017-11-24T06:59:22Z

← Nächstältere Version		Version vom 24. November 2017, 06:59 Uhr
Zeile 225:		Zeile 225:
	da <code>p_replace</code> standardmäßig den Wert <code>false</code> hat.		da <code>p_replace</code> standardmäßig den Wert <code>false</code> hat.

			Sie können den Konstruktor aber auch auf die schon bekannte Art und Weise definieren. Sie
			initialisieren zunächst alle Attribute mit <code>0</code> und überschreiben dann diese Defaultwerte
			mit den übergebenen Werten aus <code>p_config</code>.

			<source lang="javascript">
			constructor(p_config = {})
			{
			this.type = 'Movable';

			this. x = 0; this.y = 0;
			this.vx = 0; this.vy = 0;
			this.ax = 0; this.ay = 0;
			this.width = 0; this.height = 0;
			this.xPivot = 0; this.yPivot = 0;

			mixin(p_config, this, true);
			}
			</source>

			Beachten Sie, dass hier den Mixin-Befehl mit dem Parameter <code>true</code> aufgerufen werden muss,
			da er ansonsten die zuvor definierten Defaultwerte nicht überschreiben würde.

	Die Klasse <code>MovableCircle</code> vereinfacht sich nun:		Die Klasse <code>MovableCircle</code> vereinfacht sich nun:

Kowa am 23. November 2017 um 19:21 Uhr

2017-11-23T19:21:53Z

← Nächstältere Version		Version vom 23. November 2017, 19:21 Uhr
Zeile 358:		Zeile 358:
	künftig ausgenutzt, um eine beliebige Anzahl von gleichartigen Objekten		künftig ausgenutzt, um eine beliebige Anzahl von gleichartigen Objekten
	(wie {{zB}} eine Menge von Moorhühnern) verwalten zu können.		(wie {{zB}} eine Menge von Moorhühnern) verwalten zu können.

			Wenn Sie sich die Datei <code>game.js</code> ansehen, nimmt sie jetzt nur noch eine
			Aufgabe wahr. Sie erstellt alle Spielobjekte. Für die Verwaltng der Objekte nimmt sie diverse
			andere Module zur Hilfe.

	==Quellen==		==Quellen==