HTML-Tutorium: SVG: MiniPong

aus GlossarWiki, der Glossar-Datenbank der Fachhochschule Augsburg
Wechseln zu:Navigation, Suche
Dieser Artikel erfüllt die GlossarWiki-Qualitätsanforderungen:
  ★★★☆☆ Korrektheit: zu größeren Teilen überprüft
  ★★★★☆ Umfang: einige unwichtige Fakten sollten ergänzt werden
  ★★★★★ Quellenangaben: vollständig vorhanden
  ★★★★★ Quellenqualität: ausgezeichnet
  ★★★★★ GlossarWiki-Konformität: ausgezeichnet
HTML-Tutorium: Canvas | SVG

SVG: | Teil 1 | Teil 2 | Teil 3

1 Ziel

In diesem Tutorium wird beschrieben, wie man in HTML eine kleine interaktive Multimedia-Anwendungen mit Hilfe von JavaScript sowie Raphaël erstellt. Das Tutorium basiert auf einen Minipong-Tutorium von Herbert Braun[1].

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[2] verwendet.

2 Voraussetzung

Sie sollten die Inhalte der Tutorien HTML-Tutorium: SVG: Hello World und HTML5-Tutorium: Canvas: MiniPong kennen. Die Use Cases dieses Tutoriums sind dieselben, wie die Use Cases der Canvas-Version des Tutoriums.

3 Tutorium

  1. Teil 1: Ball-Animation
  2. Teil 2: Bewegung des Schlägers
  3. Teil 3: MiniPong mittels einer „Moloch-Datei“

4 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. Baranovskiy (2008+): Dmitry Baranovskiy; Raphaël – JavaScript Library; http://dmitrybaranovskiy.github.io/raphael/; Quellengüte: 5 (Web)
  1. Kowarschick (MMProg): Wolfgang Kowarschick; Vorlesung „Multimedia-Programmierung“; Hochschule: Hochschule Augsburg; Adresse: Augsburg; Web-Link; 2018; Quellengüte: 3 (Vorlesung)