HTML5-Tutorium: Canvas: MiniPong 03: Unterschied zwischen den Versionen
aus GlossarWiki, der Glossar-Datenbank der Fachhochschule Augsburg
Kowa (Diskussion | Beiträge) Keine Bearbeitungszusammenfassung |
Kowa (Diskussion | Beiträge) (→Ziel) |
||
Zeile 6: | Zeile 6: | ||
=Ziel= | =Ziel= | ||
Im zweiten Teil des Tutoriums wird beschrieben, wie man die Interaktion mit dem Schläger realisiert. | 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 an: | |||
# <code>Datei</code> → <code>Neu</code> → <code>Statisches Web-Projekt</code> | |||
# Project name: <code>MiniPong02</code> → <code>Fertigstellen</code> | |||
==Dateien erstellen== | |||
Kopieren Sie die Dateien <code>css/Main.css</code> von [[HTML5-Tutorium: Canvas: MiniPong 01|Teil 1]] des Tutoriums | |||
und erstellen Sie die Datei <code>js/Main.js</code> neu. | |||
<source lang="javascript"> | |||
// constants | |||
var FPS = 50; | |||
var KEY_LEFT = 37; | |||
var KEY_RIGHT = 39; | |||
var PADDLE_COLOR = "#666666"; | |||
var PADDING = 5; | |||
// canvas | |||
var v_canvas; | |||
var v_context; | |||
var v_width = 400; | |||
var v_height = 300; | |||
// paddle | |||
var v_paddle_width = 50; | |||
var v_paddle_height = 8; | |||
var v_paddle_dx = 0; | |||
var v_paddle_dx_start = 100; // pixel per seconds | |||
var v_paddle_ax = 10; // pixel per seconds | |||
var v_paddle_x = (v_width - v_paddle_width)/2; | |||
var v_paddle_y = v_height - v_paddle_height - PADDING; | |||
// timer | |||
var v_interval; | |||
// initialization | |||
function init() | |||
{ | |||
v_canvas = document.getElementById("d_canvas"); | |||
v_canvas.width = v_width; | |||
v_canvas.height = v_height; | |||
v_context = v_canvas.getContext("2d"); | |||
document.onkeydown = m_move_paddle; | |||
document.onkeyup = m_stop_paddle; | |||
m_draw(); | |||
v_interval = window.setInterval("m_redraw()", 1000/FPS); | |||
} | |||
function m_draw() | |||
{ | |||
v_context.beginPath(); | |||
v_context.fillStyle = PADDLE_COLOR; | |||
v_context.rect (v_paddle_x, v_paddle_y, v_paddle_width, v_paddle_height); | |||
v_context.fill(); | |||
} | |||
function m_redraw() | |||
{ | |||
// move paddle | |||
if ( (v_paddle_dx < 0 && v_paddle_x > 0) | |||
|| (v_paddle_dx > 0 && v_paddle_x + v_paddle_width < v_width) | |||
) | |||
{ | |||
v_paddle_x += v_paddle_dx; | |||
v_paddle_dx += v_paddle_ax/FPS *(v_paddle_dx > 0 ? 1 : -1); | |||
}; | |||
// Clear and draw canvas | |||
v_context.clearRect(0,0,v_width,v_height); | |||
m_draw(); | |||
} | |||
function m_move_paddle(p_event) | |||
{ | |||
if (v_paddle_dx == 0) | |||
{ | |||
if (p_event.keyCode == KEY_LEFT) | |||
v_paddle_dx = -v_paddle_dx_start/FPS; | |||
else if (p_event.keyCode == KEY_RIGHT) | |||
v_paddle_dx = +v_paddle_dx_start/FPS; | |||
}; | |||
} | |||
function m_stop_paddle(p_event) | |||
{ | |||
v_paddle_dx = 0; | |||
} | |||
</source> | |||
==Anwendung testen== | |||
Testen Sie Ihre Anwendung in gewohnter Weise. | |||
=Quellen= | =Quellen= |
Version vom 17. Oktober 2011, 18:37 Uhr
Dieser Artikel wird derzeit von einem Autor gründlich bearbeitet. Die Inhalte sind daher evtl. noch inkonsistent.
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
(alle Dateien, SVN: alle Dateien)
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 an:
Datei
→Neu
→Statisches Web-Projekt
- Project name:
MiniPong02
→Fertigstellen
Dateien erstellen
Kopieren Sie die Dateien css/Main.css
von Teil 1 des Tutoriums
und erstellen Sie die Datei js/Main.js
neu.
// constants
var FPS = 50;
var KEY_LEFT = 37;
var KEY_RIGHT = 39;
var PADDLE_COLOR = "#666666";
var PADDING = 5;
// canvas
var v_canvas;
var v_context;
var v_width = 400;
var v_height = 300;
// paddle
var v_paddle_width = 50;
var v_paddle_height = 8;
var v_paddle_dx = 0;
var v_paddle_dx_start = 100; // pixel per seconds
var v_paddle_ax = 10; // pixel per seconds
var v_paddle_x = (v_width - v_paddle_width)/2;
var v_paddle_y = v_height - v_paddle_height - PADDING;
// timer
var v_interval;
// initialization
function init()
{
v_canvas = document.getElementById("d_canvas");
v_canvas.width = v_width;
v_canvas.height = v_height;
v_context = v_canvas.getContext("2d");
document.onkeydown = m_move_paddle;
document.onkeyup = m_stop_paddle;
m_draw();
v_interval = window.setInterval("m_redraw()", 1000/FPS);
}
function m_draw()
{
v_context.beginPath();
v_context.fillStyle = PADDLE_COLOR;
v_context.rect (v_paddle_x, v_paddle_y, v_paddle_width, v_paddle_height);
v_context.fill();
}
function m_redraw()
{
// move paddle
if ( (v_paddle_dx < 0 && v_paddle_x > 0)
|| (v_paddle_dx > 0 && v_paddle_x + v_paddle_width < v_width)
)
{
v_paddle_x += v_paddle_dx;
v_paddle_dx += v_paddle_ax/FPS *(v_paddle_dx > 0 ? 1 : -1);
};
// Clear and draw canvas
v_context.clearRect(0,0,v_width,v_height);
m_draw();
}
function m_move_paddle(p_event)
{
if (v_paddle_dx == 0)
{
if (p_event.keyCode == KEY_LEFT)
v_paddle_dx = -v_paddle_dx_start/FPS;
else if (p_event.keyCode == KEY_RIGHT)
v_paddle_dx = +v_paddle_dx_start/FPS;
};
}
function m_stop_paddle(p_event)
{
v_paddle_dx = 0;
}
Anwendung testen
Testen Sie Ihre Anwendung in gewohnter Weise.
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)