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

aus GlossarWiki, der Glossar-Datenbank der Fachhochschule Augsburg
Keine Bearbeitungszusammenfassung
Zeile 105: Zeile 105:
   v_ball_y += v_ball_vy/FPS;
   v_ball_y += v_ball_vy/FPS;


   // Clear and draw canvas
   // clear and draw canvas
   v_context.clearRect(0,0,v_width,v_height);
   v_context.clearRect(0,0,v_width,v_height);
   m_draw();
   m_draw();

Version vom 17. November 2011, 11:48 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:

  1. Datei → Neu → Statisches Web-Projekt
  2. 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_BORDER_WIDTH = 1;
var BALL_BORDER_COLOR = "#000000";
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/2;
var v_ball_y  = v_height/2;
var v_ball_vx = (Math.random()<0.5?1:-1)*( 50 + Math.random()*100);
var v_ball_vy = (Math.random()<0.5?1:-1)*(100 + Math.random()* 50);

// 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.lineWidth = BALL_BORDER_WIDTH;
  v_context.lineStyle = BALL_BORDER_COLOR;
  v_context.fillStyle = BALL_COLOR;
  v_context.stroke();
  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_vx = -v_ball_vx;
  if (v_ball_y <= v_ball_r || v_ball_y >= v_height - v_ball_r)
    v_ball_vy = -v_ball_vy;
  
  // move ball
  v_ball_x += v_ball_vx/FPS;
  v_ball_y += v_ball_vy/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>
<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

  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=20592“