HTML5-Tutorium: Canvas: MiniPong 01: Unterschied zwischen den Versionen
Kowa (Diskussion | Beiträge) Keine Bearbeitungszusammenfassung |
Kowa (Diskussion | Beiträge) (→Ziel) |
||
Zeile 6: | Zeile 6: | ||
=Ziel= | =Ziel= | ||
Im ersten Teil des Tutoriums wird beschrieben, wie man eine einfache Ball-Animation erstellt. | 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-Tutorium:_Canvas:_Hello_World|HTML5-Hello-World-Anwendung]]. | |||
==Neues Projekt anlegen== | |||
Legen Sie ein neues Projekt an: | |||
# <code>Datei</code> → <code>Neu</code> → <code>Statisches Web-Projekt</code> | |||
# Project name: <code>MiniPong01</code> → <code>Fertigstellen</code> | |||
==Dateien erstellen== | |||
===<code>main.css</code>=== | |||
Erstellen Sie im Ordner <code>WebContent/css</code> des Projektes die Datei <code>main.css</code>: | |||
<source lang="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; | |||
} | |||
</source> | |||
===<code>main.js</code>=== | |||
Erstellen Sie im Ordner <code>WebContent/js</code> des Projektes die Datei <code>main.js</code>: | |||
<source lang="javascript"> | |||
// 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(); | |||
} | |||
</source> | |||
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: | |||
* [[AS3-Tutorium:Physics:Grundlagen#Ort]] | |||
* [[AS3-Tutorium:Physics:Grundlagen#Geschwindigkeit]] | |||
===<code>hello.html</code>=== | |||
Erstellen Sie im Ordner <code>WebContent</code> des Projektes die Datei <code>hello.html</code>: | |||
<source lang="html4strict"> | |||
<!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> | |||
</source> | |||
Anstelle von <code>main.css</code> und <code>main.js</code> können Sie auch wieder | |||
<code>all.min.css</code> und <code>all.min.js</code> einbinden, sofern Sie diese | |||
Dateien mit Hilfe von <code>yuicompressor</code> erzeugen (vgl. [[HTML5-Tutorium: Canvas: Hello World 03]]). | |||
=Quellen= | =Quellen= |
Version vom 17. Oktober 2011, 18:30 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).
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)