HTML-Tutorium: SVG: MiniPong: Unterschied zwischen den Versionen
Kowa (Diskussion | Beiträge) |
Kowa (Diskussion | Beiträge) Keine Bearbeitungszusammenfassung |
||
| (Eine dazwischenliegende Version desselben Benutzers wird nicht angezeigt) | |||
| Zeile 1: | Zeile 1: | ||
{{HTML-Tutorium:SVG:MiniPong:Menü}} | {{HTML-Tutorium:SVG:MiniPong:Menü}} | ||
=Ziel= | ==Ziel== | ||
In diesem Tutorium wird beschrieben, wie man in [[HTML]] eine kleine interaktive Multimedia-Anwendungen mit Hilfe | In diesem Tutorium wird beschrieben, wie man in [[HTML]] eine kleine interaktive Multimedia-Anwendungen mit Hilfe | ||
von [[JavaScript]] sowie [[Raphaël]] erstellt. | von [[JavaScript]] sowie [[Raphaël]] erstellt. | ||
| Zeile 9: | Zeile 9: | ||
dass die Ausgabe der Ball-Animation nicht nicht mit Hilfe von [[Pixelgrafik]]en sondern mit Hilfe von [[Vektorgrafik]]en (SVG) erfolgt. | dass die Ausgabe der Ball-Animation nicht nicht mit Hilfe von [[Pixelgrafik]]en sondern mit Hilfe von [[Vektorgrafik]]en (SVG) erfolgt. | ||
In diesem Tutorium wird wieder die JavaScript-Bibliothek Raphaël<ref>{{Quelle|Baranovskiy | In diesem Tutorium wird wieder die JavaScript-Bibliothek Raphaël<ref>{{Quelle|Baranovskiy (2008+)}}</ref> | ||
verwendet. | verwendet. | ||
=Voraussetzung= | ==Voraussetzung== | ||
Sie sollten die Inhalte der Tutorien [[HTML-Tutorium: SVG: Hello World]] und [[HTML5-Tutorium: Canvas: MiniPong]] kennen. | 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 [[HTML5-Tutorium: Canvas: MiniPong#Use_Cases|Canvas-Version des Tutoriums]]. | Die Use Cases dieses Tutoriums sind dieselben, wie die Use Cases der [[HTML5-Tutorium: Canvas: MiniPong#Use_Cases|Canvas-Version des Tutoriums]]. | ||
=Tutorium= | ==Tutorium== | ||
# [[HTML-Tutorium: SVG: MiniPong 01|Teil 1]]: Ball-Animation | # [[HTML-Tutorium: SVG: MiniPong 01|Teil 1]]: Ball-Animation | ||
# [[HTML-Tutorium: SVG: MiniPong 02|Teil 2]]: Bewegung des Schlägers | # [[HTML-Tutorium: SVG: MiniPong 02|Teil 2]]: Bewegung des Schlägers | ||
# [[HTML-Tutorium: SVG: MiniPong 03|Teil 3]]: MiniPong mittels einer „Moloch-Datei“ | # [[HTML-Tutorium: SVG: MiniPong 03|Teil 3]]: MiniPong mittels einer „Moloch-Datei“ | ||
=Quellen= | ==Quellen== | ||
<references/> | <references/> | ||
<ol start="3"> | <ol start="3"> | ||
Aktuelle Version vom 1. März 2023, 15:12 Uhr
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
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.
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.
Tutorium
Quellen
- ↑ 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)
- ↑ Baranovskiy (2008+): Dmitry Baranovskiy; Raphaël – JavaScript Library; http://dmitrybaranovskiy.github.io/raphael/; Quellengüte: 5 (Web)
- Kowarschick (MMProg): Wolfgang Kowarschick; Vorlesung „Multimedia-Programmierung“; Hochschule: Hochschule Augsburg; Adresse: Augsburg; Web-Link; 2018; Quellengüte: 3 (Vorlesung)
