HTML5-Tutorium: Canvas: MiniPong 01: Unterschied zwischen den Versionen
Kowa (Diskussion | Beiträge) |
Kowa (Diskussion | Beiträge) |
||
Zeile 143: | Zeile 143: | ||
==Anwendung testen== | ==Anwendung testen== | ||
Testen Sie | Testen Sie Ihre Anwendung in gewohnter Weise. | ||
=Quellen= | =Quellen= |
Version vom 17. Oktober 2011, 18:32 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 ersten Teil des Tutoriums wird beschrieben, wie man eine einfache Ball-Animation erstellt.
Vorgehensweise
Im Prinzip handelt es sich bei diesem Tutorium um eine Erweiterung der HTML5-Hello-World-Anwendung.
Neues Projekt anlegen
Legen Sie ein neues Projekt an:
Datei
→Neu
→Statisches Web-Projekt
- Project name:
MiniPong01
→Fertigstellen
Dateien erstellen
main.css
Erstellen Sie im Ordner WebContent/css
des Projektes die Datei main.css
:
body
{
text-align: center;
background-color: #AAA;
font-size: 16pt;
padding: 10px;
}
canvas
{
border-color: #777;
border-width: 2px;
border-style: solid;
background-color: #CCC;
}
main.js
Erstellen Sie im Ordner WebContent/js
des Projektes die Datei main.js
:
// constants
var FPS = 50;
var BALL_COLOR = "#55AA55";
// canvas
var v_canvas;
var v_context;
var v_width = 400;
var v_height = 300;
// ball
var v_ball_r = 8;
var v_ball_x = (v_width - v_ball_r)/2;
var v_ball_y = (v_height - v_ball_r)/2;
var v_ball_dx = (Math.random()*20 - 10)*FPS;
var v_ball_dy = (Math.random()*20 - 10)*FPS;
// 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");
m_draw();
v_interval = window.setInterval("m_redraw()", 1000/FPS);
}
function m_draw()
{
v_context.beginPath();
v_context.arc(v_ball_x, v_ball_y, v_ball_r, 0, 2*Math.PI, true);
v_context.fillStyle = BALL_COLOR;
v_context.fill();
}
function m_redraw()
{
// collision detection
if (v_ball_x <= v_ball_r || v_ball_x >= v_width - v_ball_r)
v_ball_dx = -v_ball_dx;
if (v_ball_y <= v_ball_r || v_ball_y >= v_height - v_ball_r)
v_ball_dy = -v_ball_dy;
// move ball
v_ball_x += v_ball_dx/FPS;
v_ball_y += v_ball_dy/FPS;
// Clear and draw canvas
v_context.clearRect(0,0,v_width,v_height);
m_draw();
}
Dieses Skript realisiert die eigentliche Ball-Animation. Zum Einsatz kommen dabei Techniken, die im Tutorium von Alexander Lawrence genauer beschrieben werden: AS3-Tutorium:Physics. Man sehe sich insbesondere folgende Abschnitte an:
hello.html
Erstellen Sie im Ordner WebContent
des Projektes die Datei hello.html
:
<!DOCTYPE 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" />
<script type="text/javascript" src="js/all.min.js" ></script>
-->
<link rel="stylesheet" href="css/main.css" />
<script type="text/javascript" src="js/main.js" ></script>
</head>
<body onload="init()">
<canvas id="d_canvas">
Your browser does not support canvas!
</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
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)