HTML5-Tutorium: Canvas: MiniPong 03: Unterschied zwischen den Versionen
Kowa (Diskussion | Beiträge) Keine Bearbeitungszusammenfassung |
Kowa (Diskussion | Beiträge) Keine Bearbeitungszusammenfassung |
||
Zeile 1: | Zeile 1: | ||
{{HTML5-Tutorium:Canvas:MiniPong:Menü}} | {{HTML5-Tutorium:Canvas:MiniPong:Menü}} | ||
'''Musterlösung''': <code>[http://glossar.hs-augsburg.de/beispiel/tutorium/html5_canvas/minipong/html5_canvas_minipong_02/WebContent/index.html Minipong]</code> | '''Musterlösung''': <code>[http://glossar.hs-augsburg.de/beispiel/tutorium/html5_canvas/minipong/html5_canvas_minipong_02/WebContent/index.html Minipong]</code> | ||
([http://glossar.hs-augsburg.de/beispiel/tutorium/html5_canvas/minipong/html5_canvas_minipong_02 | ([http://glossar.hs-augsburg.de/beispiel/tutorium/html5_canvas/minipong/html5_canvas_minipong_02 SVN-Repository]) | ||
=Ziel= | =Ziel= | ||
Zeile 11: | Zeile 10: | ||
==Neues Projekt anlegen== | ==Neues Projekt anlegen== | ||
Legen Sie ein neues Projekt | Legen Sie ein neues Projekt <code>MiniPong02</code> an | ||
und speichern Sie dieses Projekt auf die [[HTML5-Tutorium:_Canvas:_Hello_World_01#Neues_Projekt_anlegen|bekannte Weise]] in Ihrem | |||
SVN-Repository. | |||
==Dateien erstellen== | ==Dateien erstellen== | ||
Kopieren Sie die Dateien <code>css/Main.css</code> von [[HTML5-Tutorium: Canvas: MiniPong 01|Teil 1]] des Tutoriums | Kopieren Sie die Dateien <code>index.html</code> und <code>css/Main.css</code> von [[HTML5-Tutorium: Canvas: MiniPong 01|Teil 1]] des Tutoriums, | ||
und erstellen Sie die | passen Sie den Projekttitel in der Datei <code>index.html</code> an | ||
und erstellen Sie die Dateien <code>js/Constant.js</code> <code>js/Main.js</code> neu. | |||
===<code> | ===<code>CONSTANT.js</code>=== | ||
<source lang="javascript"> | <source lang="javascript"> | ||
"use strict"; | |||
var FPS = 50; | |||
var CANVAS_WIDTH = 400; | |||
var CANVAS_HEIGHT = 300; | |||
var FPS = 50; // Frames Per Second | |||
var KEY_LEFT = 37; | var KEY_LEFT = 37; | ||
var KEY_RIGHT = 39; | var KEY_RIGHT = 39; | ||
var | var PADDLE_WIDTH = 50; | ||
var PADDLE_HEIGHT = 8; | |||
var PADDLE_VX_START = 100; // pixels per second | |||
var PADDLE_AX = 10; // pixels per second | |||
var | var PADDLE_COLOR = "#666666"; | ||
var PADDLE_PADDING = 5; | |||
</source> | |||
// | ===<code>main.js</code>=== | ||
var | |||
<source lang="javascript"> | |||
"use strict"; | |||
// the paddle | |||
var v_paddle = | |||
{ width: PADDLE_WIDTH, | |||
height: PADDLE_HEIGHT, | |||
x: (CANVAS_WIDTH - PADDLE_WIDTH)/2, | |||
y: CANVAS_HEIGHT - PADDLE_HEIGHT - PADDLE_PADDING, | |||
vx_start: PADDLE_VX_START, // pixels per second | |||
vx: 0, // pixels per second | |||
ax: PADDLE_AX, // pixels per second | |||
move: function() | |||
{ this.x += this.vx; | |||
this.vx += this.ax/FPS *(this.vx > 0 ? 1 : -1); | |||
}, | |||
draw: function(p_context) | |||
// Draw the paddle at its current position onto a 2d context. | |||
{ p_context.beginPath(); | |||
p_context.fillStyle = PADDLE_COLOR; | |||
p_context.rect (this.x, this.y, this.width, this.height); | |||
p_context.fill(); | |||
} | |||
}; | |||
// the 2d context of the canvas | |||
var v_context; | var v_context; | ||
// | // the "physics engine" timer | ||
var | var v_interval; | ||
// | // Execute the init function after the HTML page has been loaded. | ||
var | window.onload = m_init; | ||
// Has to be called after the HTML page has been loaded. | |||
function m_init() | |||
{ var l_canvas = document.getElementById("d_canvas"); | |||
// | // Initialize the canvas. | ||
l_canvas.width = CANVAS_WIDTH; | |||
l_canvas.height = CANVAS_HEIGHT; | |||
v_context = l_canvas.getContext("2d"); | |||
v_context = | |||
document.onkeydown = | // React to key down and key up events. | ||
document.onkeyup = | document.onkeydown = o_start_paddle_moving; | ||
document.onkeyup = o_stop_paddle_moving; | |||
// Draw the paddle on the canvas for the first time. | |||
v_paddle.draw(v_context); | |||
// Start the timer for redrawing the canvas every 1000/FPS seconds. | |||
v_interval = window.setInterval("o_redraw()", 1000/FPS); | v_interval = window.setInterval("o_redraw()", 1000/FPS); | ||
} | } | ||
// An event observer: | |||
// It is called every 1000/FPS seconds. | |||
function o_redraw() | function o_redraw() | ||
{ | { // Move the paddle, if possible (collision detection and response) | ||
if ( (v_paddle.vx < 0 && v_paddle.x > 0) | |||
if ( ( | || (v_paddle.vx > 0 && v_paddle.x + v_paddle.width < CANVAS_WIDTH) | ||
|| ( | |||
) | ) | ||
v_paddle.move(); | |||
// | // Clear and redraw the canvas. | ||
v_context.clearRect(0,0, | v_context.clearRect(0,0,CANVAS_WIDTH, CANVAS_HEIGHT); | ||
v_paddle.draw(v_context); | |||
} | } | ||
function | // An event observer: | ||
{ | // It is called whenever a "start paddle moving event" is signalled. | ||
function o_start_paddle_moving(p_event) | |||
{ | { if (v_paddle.vx == 0) // react only if the paddle is not allready moving | ||
{ if (p_event.keyCode == KEY_LEFT) | |||
v_paddle.vx = -v_paddle.vx_start/FPS; | |||
else if (p_event.keyCode == KEY_RIGHT) | else if (p_event.keyCode == KEY_RIGHT) | ||
v_paddle.vx = +v_paddle.vx_start/FPS; | |||
}; | }; | ||
} | } | ||
function | // An event observer: | ||
{ | // It is called whenever a "stop paddle moving event" is signalled. | ||
function o_stop_paddle_moving(p_event) | |||
} | { v_paddle.vx = 0; } | ||
</source> | </source> | ||
==Anwendung testen== | ==Anwendung testen und sichern== | ||
Testen Sie Ihre Anwendung in gewohnter Weise. | Testen Sie Ihre Anwendung in gewohnter Weise. | ||
Vergessen Sie nicht, sie im SVN-Repository zu sichern. | |||
=Erweiterung= | |||
Erweitern Sie die Anwendung so, dass Sie zwei Schläger unabhängig voneinander | |||
links und rechts am Bühnenrand bewegeen können. Beachten Sie wieder das | |||
[[Programmierprinzip#Don.27t_repeat_yourself.2C_DRY.5B4.5D|Programmierprinzip „Don't repeat yourself“ (Dry)]]. | |||
=Quellen= | =Quellen= | ||
# {{Quelle|Braun, H. (2011): Webanimationen mit Canvas}} | # {{Quelle|Braun, H. (2011): Webanimationen mit Canvas}} | ||
# {{Quelle|Kowarschick, W.: Multimedia-Programmierung}} | # {{Quelle|Kowarschick, W.: Multimedia-Programmierung}} | ||
# [http://glossar.hs-augsburg.de/beispiel/tutorium/html5_canvas/minipong/html5_canvas_minipong_02 Musterlösungen], [http://glossar.hs-augsburg.de/webdav/tutorium/html5_canvas/minipong/html5_canvas_minipong_02 Musterlösungen (SVN)] | # [http://glossar.hs-augsburg.de/beispiel/tutorium/html5_canvas/minipong/html5_canvas_minipong_02 Musterlösungen], [http://glossar.hs-augsburg.de/webdav/tutorium/html5_canvas/minipong/html5_canvas_minipong_02 Musterlösungen (SVN)] | ||
[[Kategorie: HTML5-Tutorium: Canvas: MiniPong]][[Kategorie: HTML5-Beispiel]][[Kategorie:Kapitel:Multimedia-Programmierung:Beispiele]] | |||
Version vom 12. Oktober 2012, 12:42 Uhr
Dieser Artikel erfüllt die GlossarWiki-Qualitätsanforderungen nur teilweise:
Korrektheit: 3 (zu größeren Teilen überprüft) |
Umfang: 3 (einige wichtige Fakten fehlen) |
Quellenangaben: 5 (vollständig vorhanden) |
Quellenarten: 5 (ausgezeichnet) |
Konformität: 5 (ausgezeichnet) |
HTML-Tutorium: MiniPong
MiniPong: | Teil 1 | Teil 2 | Teil 3 | Teil 4 | Teil 5
Musterlösung: Minipong
(SVN-Repository)
Ziel
Im zweiten Teil des Tutoriums wird beschrieben, wie man die Interaktion mit dem Schläger realisiert.
Vorgehensweise
Neues Projekt anlegen
Legen Sie ein neues Projekt MiniPong02
an
und speichern Sie dieses Projekt auf die bekannte Weise in Ihrem
SVN-Repository.
Dateien erstellen
Kopieren Sie die Dateien index.html
und css/Main.css
von Teil 1 des Tutoriums,
passen Sie den Projekttitel in der Datei index.html
an
und erstellen Sie die Dateien js/Constant.js
js/Main.js
neu.
CONSTANT.js
"use strict";
var CANVAS_WIDTH = 400;
var CANVAS_HEIGHT = 300;
var FPS = 50; // Frames Per Second
var KEY_LEFT = 37;
var KEY_RIGHT = 39;
var PADDLE_WIDTH = 50;
var PADDLE_HEIGHT = 8;
var PADDLE_VX_START = 100; // pixels per second
var PADDLE_AX = 10; // pixels per second
var PADDLE_COLOR = "#666666";
var PADDLE_PADDING = 5;
main.js
"use strict";
// the paddle
var v_paddle =
{ width: PADDLE_WIDTH,
height: PADDLE_HEIGHT,
x: (CANVAS_WIDTH - PADDLE_WIDTH)/2,
y: CANVAS_HEIGHT - PADDLE_HEIGHT - PADDLE_PADDING,
vx_start: PADDLE_VX_START, // pixels per second
vx: 0, // pixels per second
ax: PADDLE_AX, // pixels per second
move: function()
{ this.x += this.vx;
this.vx += this.ax/FPS *(this.vx > 0 ? 1 : -1);
},
draw: function(p_context)
// Draw the paddle at its current position onto a 2d context.
{ p_context.beginPath();
p_context.fillStyle = PADDLE_COLOR;
p_context.rect (this.x, this.y, this.width, this.height);
p_context.fill();
}
};
// the 2d context of the canvas
var v_context;
// the "physics engine" timer
var v_interval;
// Execute the init function after the HTML page has been loaded.
window.onload = m_init;
// Has to be called after the HTML page has been loaded.
function m_init()
{ var l_canvas = document.getElementById("d_canvas");
// Initialize the canvas.
l_canvas.width = CANVAS_WIDTH;
l_canvas.height = CANVAS_HEIGHT;
v_context = l_canvas.getContext("2d");
// React to key down and key up events.
document.onkeydown = o_start_paddle_moving;
document.onkeyup = o_stop_paddle_moving;
// Draw the paddle on the canvas for the first time.
v_paddle.draw(v_context);
// Start the timer for redrawing the canvas every 1000/FPS seconds.
v_interval = window.setInterval("o_redraw()", 1000/FPS);
}
// An event observer:
// It is called every 1000/FPS seconds.
function o_redraw()
{ // Move the paddle, if possible (collision detection and response)
if ( (v_paddle.vx < 0 && v_paddle.x > 0)
|| (v_paddle.vx > 0 && v_paddle.x + v_paddle.width < CANVAS_WIDTH)
)
v_paddle.move();
// Clear and redraw the canvas.
v_context.clearRect(0,0,CANVAS_WIDTH, CANVAS_HEIGHT);
v_paddle.draw(v_context);
}
// An event observer:
// It is called whenever a "start paddle moving event" is signalled.
function o_start_paddle_moving(p_event)
{ if (v_paddle.vx == 0) // react only if the paddle is not allready moving
{ if (p_event.keyCode == KEY_LEFT)
v_paddle.vx = -v_paddle.vx_start/FPS;
else if (p_event.keyCode == KEY_RIGHT)
v_paddle.vx = +v_paddle.vx_start/FPS;
};
}
// An event observer:
// It is called whenever a "stop paddle moving event" is signalled.
function o_stop_paddle_moving(p_event)
{ v_paddle.vx = 0; }
Anwendung testen und sichern
Testen Sie Ihre Anwendung in gewohnter Weise.
Vergessen Sie nicht, sie im SVN-Repository zu sichern.
Erweiterung
Erweitern Sie die Anwendung so, dass Sie zwei Schläger unabhängig voneinander links und rechts am Bühnenrand bewegeen können. Beachten Sie wieder das Programmierprinzip „Don't repeat yourself“ (Dry).
Quellen
- Braun (2011): Herbert Braun; Webanimationen mit Canvas; in: c't Webdesign; Band: 2011; Seite(n): 44–48; Verlag: Heise Zeitschriften Verlag; Adresse: Hannover; 2011; Quellengüte: 5 (Artikel)
- Kowarschick (MMProg): Wolfgang Kowarschick; Vorlesung „Multimedia-Programmierung“; Hochschule: Hochschule Augsburg; Adresse: Augsburg; Web-Link; 2018; Quellengüte: 3 (Vorlesung)
- Musterlösungen, Musterlösungen (SVN)