HTML-Tutorium: SVG: MiniPong 02
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 2
(SVN-Repository)
Voraussetzung
Sie sollten die Inhalte der Tutorien HTML-Tutorium: SVG: MiniPong 01 und HTML5-Tutorium: Canvas: MiniPong 02 kennen.
Ziel: Interaktion mit dem Schläger
Im zweiten Teil des Tutoriums wird die Interaktion mit dem Schläger implementiert. Wie im Teil 1 des Tutoriums wird die Canvas-Version in eine SVG-Version umgeschrieben.

Anwendung „MiniPongSVG02
“
Neues Projekt anlegen
Legen Sie ein neues „Statisches Web-Projekt“ mit dem Namen MiniPongSVG02
an.
Speichern Sie dieses Projekt wie üblich in Ihrem Repository.
Dateien erstellen
Der Umbau der Canvas-Version in eine Raphaël-Version läuft genauso ab wie in Teil 1 des Tutoriums.
Anstelle eines Kreises wird nun allerdings ein Rechteck auf der Raphaël-Bühne erzeugt und bewegt:
// Initializes the paddle.
// It has to be called when the canvas has been created.
init:
function(p_canvas)
{ this.v_svg
= p_canvas
.rect(this.x, this.y, this.width, this.height)
.attr({"stroke" : PADDLE_COLOR,
"stroke-width" : 0,
"fill" : PADDLE_COLOR,
});
},
...
// Draws the paddle at its current position onto a 2d context.
draw:
function()
{ this.v_svg.attr({x: this.x, y: this.y});
}
Anwendung testen und sichern
Testen Sie Ihre Anwendung in gewohnter Weise.
Vergessen Sie nicht, sie im SVN-Repository zu sichern.
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)
- 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 3 des Tutoriums bearbeiten.