HTML5-Tutorium: Canvas: MiniPong 01: Unterschied zwischen den Versionen

aus GlossarWiki, der Glossar-Datenbank der Fachhochschule Augsburg
Keine Bearbeitungszusammenfassung
Zeile 5: Zeile 5:
=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.
=Voraussetzung=
Die Inhalte des [[HTML5-Tutorium:_Canvas:_Hello_World|HTML5-Hello-World-Tutoriums]]
sollten Ihnen bekannt sein.


=Vorgehensweise=
=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==
==Neues Projekt anlegen==
Zeile 16: Zeile 19:
# <code>Datei</code> → <code>Neu</code> → <code>Statisches Web-Projekt</code>
# <code>Datei</code> → <code>Neu</code> → <code>Statisches Web-Projekt</code>
# Project name: <code>MiniPong01</code> → <code>Fertigstellen</code>
# Project name: <code>MiniPong01</code> → <code>Fertigstellen</code>
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==
Zeile 26: Zeile 32:
{
{
   text-align:      center;
   text-align:      center;
  padding:          10px;
   background-color: #AAA;
   background-color: #AAA;
  font-size:        16pt;
  padding:          10px;
}
}


canvas
#d_canvas
{
{
   border-color: #777;  
   border-color: #777;  
Zeile 41: Zeile 46:
</source>
</source>


===<code>main.js</code>===
===<code>CONSTANT.js</code>===
Erstellen Sie im Ordner <code>WebContent/js</code> des Projektes die Datei <code>main.js</code>:
Erstellen Sie im Ordner <code>WebContent/js</code> des Projektes die Datei <code>CONSTANT.js</code>:


<source lang="javascript">
<source lang="javascript">
// constants
"use strict";
var FPS              = 50;
 
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_WIDTH = 1;
var BALL_BORDER_COLOR = "#000000";
var BALL_BORDER_COLOR = "#000000";
var BALL_COLOR        = "#55AA55";
var BALL_COLOR        = "#55AA55";
</source>
===<code>main.js</code>===
Erstellen Sie im Ordner <code>WebContent/js</code> des Projektes die Datei <code>main.js</code>:


// canvas
<source lang="javascript">
var v_canvas;
"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;
var v_context;
var v_width  = 400;
var v_height = 300;


// ball
// the "physics engine" timer
var v_ball_r  = 8;
var v_interval;
var v_ball_x  = v_width/2;
 
var v_ball_y  = v_height/2;
// Execute the init function after the HTML page has been loaded.
var v_ball_vx = (Math.random()<0.5?1:-1)*( 50 + Math.random()*100);
window.onload = m_init;
var v_ball_vy = (Math.random()<0.5?1:-1)*(100 + Math.random()* 50);


// timer
// Has to be called after the HTML page has been loaded.
var v_interval;
function m_init()
{ var l_canvas = document.getElementById("d_canvas");


// initialization
  // Initialize the canvas.
function init()
   l_canvas.width  = CANVAS_WIDTH;
{
   l_canvas.height = CANVAS_HEIGHT;
  v_canvas = document.getElementById("d_canvas");
   v_context       = l_canvas.getContext("2d");
   v_canvas.width  = v_width;
   v_canvas.height = v_height;
   v_context = v_canvas.getContext("2d");


   m_draw();
   // 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);
   v_interval = window.setInterval("o_redraw()", 1000/FPS);
}
}


function m_draw()
// An event observer:
{
// It is called every 1000/FPS seconds.
  v_context.beginPath();
  v_context.arc(v_ball_x, v_ball_y, v_ball_r, 0, 2*Math.PI, true);
  v_context.lineWidth = BALL_BORDER_WIDTH;
  v_context.lineStyle = BALL_BORDER_COLOR;
  v_context.fillStyle = BALL_COLOR;
  v_context.stroke();
  v_context.fill();
}
 
function o_redraw()  
function o_redraw()  
{
{ // Collision detection: ball <-> wall
   // collision detection
   // Collision response:  change the moving direction of the ball
 
   if (v_ball.x <= v_ball.r || v_ball.x >= CANVAS_WIDTH - v_ball.r)
   if (v_ball_x <= v_ball_r || v_ball_x >= v_width - v_ball_r)
     v_ball.vx = -v_ball.vx;
     v_ball_vx = -v_ball_vx;
   if (v_ball.y <= v_ball.r || v_ball.y >= CANVAS_HEIGHT - v_ball.r)
   if (v_ball_y <= v_ball_r || v_ball_y >= v_height - v_ball_r)
     v_ball.vy = -v_ball.vy;  
     v_ball_vy = -v_ball_vy;
    
    
   // move ball
   // Move the ball.
   v_ball_x += v_ball_vx/FPS;
   v_ball.move();
  v_ball_y += v_ball_vy/FPS;


   // clear and draw canvas
   // Clear and redraw the canvas.
   v_context.clearRect(0,0,v_width,v_height);
   v_context.clearRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
   m_draw();
   v_ball.draw(v_context);
}
}
</source>
</source>
Zeile 116: Zeile 144:
* [[AS3-Tutorium:Physics:Grundlagen#Geschwindigkeit]]
* [[AS3-Tutorium:Physics:Grundlagen#Geschwindigkeit]]


===<code>hello.html</code>===
===<code>index.html</code>===
Erstellen Sie im Ordner <code>WebContent</code> des Projektes die Datei <code>hello.html</code>:
Erstellen Sie im Ordner <code>WebContent</code> des Projektes die Datei <code>index.html</code>:


<source lang="html4strict">
<source lang="html4strict">
Zeile 126: Zeile 154:
     <meta charset="UTF-8">
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
     <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>
<!--<link rel="stylesheet" href="css/all.min.css"/>-->
   <body onload="init()">
    <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">
     <canvas id="d_canvas">
       Your browser does not support canvas!  
       Ihr Browser unterstützt HTML5 leider nicht!
     </canvas>
     </canvas>
   </body>
   </body>
Zeile 146: Zeile 174:
Dateien mit Hilfe von <code>yuicompressor</code> erzeugen (vgl. [[HTML5-Tutorium: Canvas: Hello World 03]]).
Dateien mit Hilfe von <code>yuicompressor</code> erzeugen (vgl. [[HTML5-Tutorium: Canvas: Hello World 03]]).


==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.


=Quellen=
=Quellen=

Version vom 12. Oktober 2012, 12:18 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 (alle Dateien, SVN: alle Dateien)

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:

  1. Datei → Neu → Statisches Web-Projekt
  2. 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. Man sehe 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.

Quellen

  1. 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)
  2. Kowarschick (MMProg): Wolfgang Kowarschick; Vorlesung „Multimedia-Programmierung“; Hochschule: Hochschule Augsburg; Adresse: Augsburg; Web-Link; 2018; Quellengüte: 3 (Vorlesung)
  3. Musterlösungen, Musterlösungen (SVN)
Abgerufen von „https://glossar.hs-augsburg.de/w/index.php?title=HTML5-Tutorium:_Canvas:_MiniPong_01&oldid=23819“