HTML-Tutorium: SVG: 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: 4
(unwichtige Fakten fehlen) 		Quellenangaben: 5
(vollständig vorhanden) 		Quellenarten: 5
(ausgezeichnet) 		Konformität: 5
(ausgezeichnet)

HTML-Tutorium: Canvas | SVG

SVG: | Teil 1 | Teil 2 | Teil 3

Musterlösung: Minipong 1 (SVN-Repository)

Voraussetzung

Sie sollten die Inhalte der Tutorien HTML-Tutorium: SVG: Hello World und HTML5-Tutorium: Canvas: MiniPong 01 kennen.

Ziel: Animation des Balls

Das in HTML5-Tutorium: Canvas: MiniPong erstellte MiniPong-Spiel wird so umgeschrieben, dass die Ausgabe der Ball-Animation nicht nicht mit Hilfe von Pixelgrafiken sondern mit Hilfe von Vektorgrafiken (SVG) erfolgt.

In diesem Tutorium wird wieder die JavaScript-Bibliothek Raphaël[1] verwendet.

Wie in Teil 1 der Canvas-Version des Tutoriums werden zwei Objekte implementiert: Das ROOT-Objekt der Anwendung und das zu animierende Ball-Objekt.

miniatur|links|374px|Das Objektmodell der Raphaël-Version von MiniPong 01

miniatur|ohne|381px|Das Objektmodell der Canvas-Version von MiniPong 01

Wenn man die Objektmodelle der Raphaël- und der Canvas-Version vergleicht, fallen einem nur zwei wesentliche Unterschiede auf. In der Raphaël-Version fällt das g_context-Objekt weg, da es in Raphaël kein „Kontext“-Objekt gibt. Anstatt dessen wird im Ball eine SVG-Version des Balls im Attribut svg gespeichert. Dieses Attribut wird mit Hilfe der Methode init initialisiert, sobald die Raphaël-Bühne erzeugt wurde und per p_canvas übergeben werden kann. Alle künftigen Änderungen an diesem SVG-Objekt werden direkt auf der Bühne sichtbar.

Anwendung „MiniPongSVG01“

Neues Projekt anlegen

Legen Sie ein neues Statisches Web-Projekt mit dem Namen MiniPongSVG01 an.

Speichern Sie dieses Projekt wie üblich in Ihrem Repository.

Dateien erstellen

index.html

Die Datei index.html ist im Prinzip genauso aufgebaut, wie die Datei index.html des MiniPong-Canvas-Tutoriums. 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
                      "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>HTML: MiniPong 01 (Raphaël)</title>

    <meta http-equiv="Content-Type" content="text/html; 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="lib/jquery.min.js"></script>
		<script type="text/javascript" src="lib/raphael.min.js"></script>

<!--<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>
    <div id="d_page">
      <div id="d_canvas">&nbsp;</div>
    </div>
  </body>
</html>

Es gibt nur zwei wesentliche Unterschiede. Zum einen wird eine HTML-4-Datei an Stelle einer HTML5-Datei benötigt und zum anderen werden an Stelle des canvas-Elements zwei ineinander verschachtelte div-Elemente verwendet. Das div-Element d_page dient dazu, den Canvas im Web-Browser-Fenster zu zentrieren, während das div-Element d_canvas die eigentliche Raphaël-Bühne aufnimmt.

main.css

Erstellen Sie im Ordner WebContent/css des Projektes die Datei main.css. In dieser Datei werden die Farben und die Postion der Raphaël-Bühne und des Hintergrunds festgelegt. 

body
{
  text-align:       center;
  padding:          10px;
  background-color: #AAA;
}

#d_page
{
  width:  400px;
  margin: 20px auto;
}

#d_canvas
{
  border-color: #777; 
  border-width: 2px; 
  border-style: solid;
  
  background-color: #CCC;
}

CONSTANT.js

Die DateiCONSTANT.js unterscheidet sich nicht von der Datei Datei CONSTANT.js des MiniPong-Canvas-Tutoriums.

main.js

Die Dateimain.js unterscheidet sich von der Datei Datei main.js des MiniPong-Canvas-Tutoriums nur in denjenigen Anweisung, die für die Darstellung des Balls auf der Bühne zuständig sind.

TO BE DONE

Anwendung testen und sichern

Testen Sie Ihre Anwendung in gewohnter Weise.

Vergessen Sie nicht, sie im SVN-Repository zu sichern.

Quellen

  1. ↑ Baranovskiy (2008+): Dmitry Baranovskiy; Raphaël – JavaScript Library; http://dmitrybaranovskiy.github.io/raphael/; Quellengüte: 5 (Web)
  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)

Fortsetzung des Tutoriums

Sie sollten nun Teil 2 des Tutoriums bearbeiten.

Abgerufen von „https://glossar.hs-augsburg.de/w/index.php?title=HTML-Tutorium:_SVG:_MiniPong_01&oldid=24308“