HTML5-Tutorium: Canvas: MiniPong 01

aus GlossarWiki, der Glossar-Datenbank der Fachhochschule Augsburg

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“