HTML5-Tutorium: Canvas: MiniPong 01: 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_01/WebContent/index.html Minipong]</code> | '''Musterlösung''': <code>[http://glossar.hs-augsburg.de/beispiel/tutorium/html5_canvas/minipong/html5_canvas_minipong_01/WebContent/index.html Minipong 1]</code> | ||
([http://glossar.hs-augsburg.de/beispiel/tutorium/html5_canvas/minipong/html5_canvas_minipong_01 SVN-Repository]) | ([http://glossar.hs-augsburg.de/beispiel/tutorium/html5_canvas/minipong/html5_canvas_minipong_01 SVN-Repository]) | ||
Version vom 12. Oktober 2012, 12:41 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 1
(SVN-Repository)
Ziel
Im ersten Teil des Tutoriums wird beschrieben, wie man eine einfache Ball-Animation erstellt.
Voraussetzung
Die Inhalte des HTML5-Hello-World-Tutoriums sollten Ihnen bekannt sein.
Vorgehensweise
Neues Projekt anlegen
Legen Sie ein neues Projekt an:
Datei→Neu→Statisches Web-Projekt- Project name:
MiniPong01→Fertigstellen
und speichern Sie dieses Projekt auf die bekannte Weise in Ihrem SVN-Repository.
Dateien erstellen
main.css
Erstellen Sie im Ordner WebContent/css des Projektes die Datei main.css:
body
{
text-align: center;
padding: 10px;
background-color: #AAA;
}
#d_canvas
{
border-color: #777;
border-width: 2px;
border-style: solid;
background-color: #CCC;
}
CONSTANT.js
Erstellen Sie im Ordner WebContent/js des Projektes die Datei CONSTANT.js:
"use strict";
var CANVAS_WIDTH = 400;
var CANVAS_HEIGHT = 300;
var FPS = 50; // Frames Per Second
var BALL_RADIUS = 8;
var BALL_BORDER_WIDTH = 1;
var BALL_BORDER_COLOR = "#000000";
var BALL_COLOR = "#55AA55";
main.js
Erstellen Sie im Ordner WebContent/js des Projektes die Datei main.js:
"use strict";
// the ball
var v_ball =
{ r: BALL_RADIUS,
x: CANVAS_WIDTH/2,
y: CANVAS_HEIGHT/2,
vx: (Math.random()<0.5?1:-1)*(50 + Math.random()*100), // pixels per second
vy: (Math.random()<0.5?1:-1)*(50 + Math.random()*100), // pixels per second
move: function()
{ this.x += v_ball.vx/FPS;
this.y += v_ball.vy/FPS;
},
draw: function(p_context)
// Draw the ball at its current position onto a 2d context.
{ p_context.beginPath();
p_context.arc(this.x, this.y, this.r, 0, 2*Math.PI);
p_context.lineWidth = BALL_BORDER_WIDTH;
p_context.lineStyle = BALL_BORDER_COLOR;
p_context.fillStyle = BALL_COLOR;
p_context.stroke();
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");
// Draw the ball on the canvas for the first time.
v_ball.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()
{ // Collision detection: ball <-> wall
// Collision response: change the moving direction of the ball
if (v_ball.x <= v_ball.r || v_ball.x >= CANVAS_WIDTH - v_ball.r)
v_ball.vx = -v_ball.vx;
if (v_ball.y <= v_ball.r || v_ball.y >= CANVAS_HEIGHT - v_ball.r)
v_ball.vy = -v_ball.vy;
// Move the ball.
v_ball.move();
// Clear and redraw the canvas.
v_context.clearRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
v_ball.draw(v_context);
}
Dieses Skript realisiert die eigentliche Ball-Animation. Zum Einsatz kommen dabei Techniken, die im Tutorium von Alexander Lawrence genauer beschrieben werden: AS3-Tutorium:Physics. Sehen Sie sich insbesondere folgende Abschnitte an:
index.html
Erstellen Sie im Ordner WebContent des Projektes die Datei index.html:
<!DOCTYPE html>
<html>
<head>
<title>HTML5-Tutorium: Canvas: MiniPong 01</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<!--<link rel="stylesheet" href="css/all.min.css"/>-->
<link rel="stylesheet" href="css/main.css" />
<!--<script type="text/javascript" src="js/all.min.js" ></script>-->
<script type="text/javascript" src="js/CONSTANT.js"></script>
<script type="text/javascript" src="js/main.js" ></script>
</head>
<body>
<canvas id="d_canvas">
Ihr Browser unterstützt HTML5 leider nicht!
</canvas>
</body>
</html>
Anstelle von main.css und main.js können Sie auch wieder
all.min.css und all.min.js einbinden, sofern Sie diese
Dateien mit Hilfe von yuicompressor erzeugen (vgl. HTML5-Tutorium: Canvas: Hello World 03).
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 sich zwei oder noch mehr Bälle gleichzeitig über die Bühne bewegen. Kollisionen zwischen den Bällen brauchen Sie nicht zu behandeln. Beachten Sie aber 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)
