HTML5-Tutorium: Canvas: MiniPong 05 - Versionsgeschichte

Kowa am 9. Dezember 2016 um 16:53 Uhr

2016-12-09T16:53:39Z

← Nächstältere Version		Version vom 9. Dezember 2016, 16:53 Uhr
Zeile 5:		Zeile 5:
	==Ziel: Das fertige Spiel „MiniPong“ verbessern==		==Ziel: Das fertige Spiel „MiniPong“ verbessern==
	Im fünften Teil des Tutoriums wird beschrieben, wie die funktionsfähige Version von MiniPong verbessert und erweitert werden kann.		Im fünften Teil des Tutoriums wird beschrieben, wie die funktionsfähige Version von MiniPong verbessert und erweitert werden kann.

			{{TBD}}

	===Klassenmodell===		===Klassenmodell===
	[[Datei:~~MiniPong04~~ ClassModel Overview.png\|gerahmt\|rechts\|Klassendiagramm]]		[[Datei:MiniPong05 ClassModel Overview.png\|gerahmt\|rechts\|Klassendiagramm]]
	~~{{TBD}}~~

	==Quellen==		==Quellen==
	# {{Quelle\|Kowarschick, W.: Multimedia-Programmierung}}		# {{Quelle\|Kowarschick, W.: Multimedia-Programmierung}}
	[[Kategorie: HTML5-Tutorium: Canvas: MiniPong]][[Kategorie: HTML5-Beispiel]][[Kategorie:Kapitel:Multimedia-Programmierung:Beispiele]]		[[Kategorie: HTML5-Tutorium: Canvas: MiniPong]][[Kategorie: HTML5-Beispiel]][[Kategorie:Kapitel:Multimedia-Programmierung:Beispiele]]

Kowa am 9. Dezember 2016 um 16:53 Uhr

2016-12-09T16:53:15Z

Änderungen zeigen

Kowa: Kowa verschob die Seite HTML5-Tutorium: Canvas: MiniPong 04 nach HTML5-Tutorium: Canvas: MiniPong 05

2016-11-02T10:46:28Z

Kowa verschob die Seite HTML5-Tutorium: Canvas: MiniPong 04 nach HTML5-Tutorium: Canvas: MiniPong 05

← Nächstältere Version	Version vom 2. November 2016, 10:46 Uhr
(kein Unterschied)

Kowa am 5. März 2014 um 16:50 Uhr

2014-03-05T16:50:26Z

← Nächstältere Version		Version vom 5. März 2014, 16:50 Uhr
Zeile 8:		Zeile 8:
	Es wird jeweils ein Objekt pro Klasse erstellt.		Es wird jeweils ein Objekt pro Klasse erstellt.

	[[~~Medium~~:MiniPong04Canvas.png\|miniatur\|ohne\|709px\|Das Datenmodell von MiniPong 04]]		[[Datei:MiniPong04Canvas.png\|miniatur\|ohne\|709px\|Das Datenmodell von MiniPong 04]]

	=Anwendung „<code>MiniPongCanvas04</code>“=		=Anwendung „<code>MiniPongCanvas04</code>“=
Zeile 854:		Zeile 854:

	{{TBD}}		{{TBD}}
	[[~~Medium~~:MiniPong04aCanvas.png\|miniatur\|ohne\|945px\|Das Objektmodell von MiniPong 04a]]		[[Datei:MiniPong04aCanvas.png\|miniatur\|ohne\|945px\|Das Objektmodell von MiniPong 04a]]

	'''Musterlösung''': <code>[http://glossar.hs-augsburg.de/beispiel/tutorium/html5_canvas/minipong/html5_canvas_minipong_04a/WebContent/index.html Minipong 4a]</code>		'''Musterlösung''': <code>[http://glossar.hs-augsburg.de/beispiel/tutorium/html5_canvas/minipong/html5_canvas_minipong_04a/WebContent/index.html Minipong 4a]</code>

Kowa: /* Methoden */

2013-11-12T10:32:54Z

Methoden

← Nächstältere Version		Version vom 12. November 2013, 10:32 Uhr
Zeile 187:		Zeile 187:
	{ this.v_context.beginPath();		{ this.v_context.beginPath();
	this.v_context.arc(this.x, this.y, this.r, 0, 2*Math.PI, true);		this.v_context.arc(this.x, this.y, this.r, 0, 2*Math.PI, true);
	this.v_context.lineWidth = BALL_BORDER_WIDTH;		this.v_context.lineWidth = BALL_BORDER_WIDTH;
	this.v_context.~~lineStyle~~ = BALL_BORDER_COLOR;		this.v_context.strokeStyle = BALL_BORDER_COLOR;
	this.v_context.fillStyle = BALL_COLOR;		this.v_context.fillStyle = BALL_COLOR;
	this.v_context.stroke();		this.v_context.stroke();
	this.v_context.fill();		this.v_context.fill();

Kowa am 7. November 2013 um 10:25 Uhr

2013-11-07T10:25:26Z

← Nächstältere Version		Version vom 7. November 2013, 10:25 Uhr
Zeile 543:		Zeile 543:
	<source lang="javascript">		<source lang="javascript">
	// An event observer:		// An event observer:
	// It is called whenever a "start paddle moving event" is ~~signalled~~.		// It is called whenever a "start paddle moving event" is signaled.
	function o_start_paddle_moving(p_event)		function o_start_paddle_moving(p_event)
	{ if (p_event.keyCode == KEY_LEFT)		{ if (p_event.keyCode == KEY_LEFT)
Zeile 552:		Zeile 552:

	// An event observer:		// An event observer:
	// It is called whenever a "stop paddle moving event" is ~~signalled~~.		// It is called whenever a "stop paddle moving event" is signaled.
	function o_stop_paddle_moving(p_event)		function o_stop_paddle_moving(p_event)
	{ g_paddle.stop(); }		{ g_paddle.stop(); }
Zeile 731:		Zeile 731:

	// An event observer:		// An event observer:
	// It is called whenever a "start paddle moving event" is ~~signalled~~.		// It is called whenever a "start paddle moving event" is signaled.
	o_start_paddle_moving:		o_start_paddle_moving:
	function(p_event)		function(p_event)
Zeile 742:		Zeile 742:

	// An event observer:		// An event observer:
	// It is called whenever a "stop paddle moving event" is ~~signalled~~.		// It is called whenever a "stop paddle moving event" is signaled.
	o_stop_paddle_moving:		o_stop_paddle_moving:
	function(p_event)		function(p_event)

Kowa: /* Methoden */

2013-11-05T16:35:05Z

Methoden

← Nächstältere Version		Version vom 5. November 2013, 16:35 Uhr
Zeile 685:		Zeile 685:
	function(p_event){ self.o_stop_paddle_moving(p_event); };		function(p_event){ self.o_stop_paddle_moving(p_event); };

	// Start the timer for redrawing the canvas every 1000/FPS ~~seconds~~.		// Start the timer for redrawing the canvas every 1000/FPS milliseconds.
	this.v_timer =		this.v_timer =
	window.setInterval(function(){ self.o_redraw(); }, 1000/FPS);		window.setInterval(function(){ self.o_redraw(); }, 1000/FPS);
Zeile 767:		Zeile 767:

	// An event observer:		// An event observer:
	// It is called every 1000/FPS ~~seconds~~, but only when the game has been started.		// It is called every 1000/FPS milliseconds, but only when the game has been started.
	o_redraw:		o_redraw:
	function()		function()

Kowa: /* Methoden */

2013-10-24T17:01:38Z

Methoden

← Nächstältere Version		Version vom 24. Oktober 2013, 17:01 Uhr
Zeile 662:		Zeile 662:
	<source lang="javascript">		<source lang="javascript">
	Main.prototype =		Main.prototype =
	{ //~~////////////////////////////////////////////////////////////////////////////~~		{ //----------------------------------------------------------------------------
	// ~~logic~~		// Methods (Logic)
	//~~////////////////////////////////////////////////////////////////////////////~~		//----------------------------------------------------------------------------

	// Has to be called when the game is to be started.		// Has to be called when the game is to be started.
Zeile 678:		Zeile 678:

	// React to key down and key up events.		// React to key down and key up events.
	~~// The following code does not work due to dynamic binding of "this" :-(((~~
	// document.onkeydown = this.o_start_paddle_moving;		// document.onkeydown = this.o_start_paddle_moving;
	// document.onkeyup = this.o_stop_paddle_moving;		// document.onkeyup = this.o_stop_paddle_moving;
Zeile 685:		Zeile 684:
	document.onkeyup =		document.onkeyup =
	function(p_event){ self.o_stop_paddle_moving(p_event); };		function(p_event){ self.o_stop_paddle_moving(p_event); };

	// Start the timer for redrawing the canvas every 1000/FPS seconds.		// Start the timer for redrawing the canvas every 1000/FPS seconds.
	this.v_timer =		this.v_timer =
Zeile 737:		Zeile 736:
	{ // console.log(this);		{ // console.log(this);
	if (p_event.keyCode == KEY_LEFT)		if (p_event.keyCode == KEY_LEFT)
	this.v_paddle.startLeft();		{ this.v_paddle.startLeft(); }
	else if (p_event.keyCode == KEY_RIGHT)		else if (p_event.keyCode == KEY_RIGHT)
	this.v_paddle.startRight();		{ this.v_paddle.startRight(); }
	},		},

Zeile 749:		Zeile 748:
	},		},

	//~~////////////////////////////////////////////////////////////////////////////~~		//----------------------------------------------------------------------------
	// ~~view~~		// Methods (View)
	//~~////////////////////////////////////////////////////////////////////////////~~		//----------------------------------------------------------------------------

	// Clears the canvas and redraws all sprites (ball and paddle).		// Clears the canvas and redraws all sprites (ball and paddle).
Zeile 764:		Zeile 763:
	// Displays information on the HTML page.		// Displays information on the HTML page.
	m_info:		m_info:
	function (p_info)		function(p_info)
	{ document.getElementById("d_info").firstChild.nodeValue = p_info; },		{ document.getElementById("d_info").firstChild.nodeValue = p_info; },

Zeile 793:		Zeile 792:
	},		},

	//~~////////////////////////////////////////////////////////////////////////////~~		//----------------------------------------------------------------------------
	// ~~end~~ of ~~prototype~~		// End of Methods
	//~~////////////////////////////////////////////////////////////////////////////~~		//----------------------------------------------------------------------------
	};		};
	</source>		</source>

Kowa: /* Konstruktor */

2013-10-24T16:20:09Z

Konstruktor

← Nächstältere Version		Version vom 24. Oktober 2013, 16:20 Uhr
Zeile 577:		Zeile 577:
	die API dieser Klasse automatisch zu generieren.		die API dieser Klasse automatisch zu generieren.

	<source>		<source lang="javascript">
	// The singleton class Main.		// The singleton class Main.
	function Main()		function Main()

Kowa: /* Konstruktor */

2013-10-24T16:19:18Z

Konstruktor

← Nächstältere Version		Version vom 24. Oktober 2013, 16:19 Uhr
Zeile 577:		Zeile 577:
	die API dieser Klasse automatisch zu generieren.		die API dieser Klasse automatisch zu generieren.

	<~~soource~~>		<source>
	// The singleton class Main.		// The singleton class Main.
	function Main()		function Main()