HTML-Tutorium: SVG: MiniPong 02

aus GlossarWiki, der Glossar-Datenbank der Fachhochschule Augsburg
Wechseln zu:Navigation, Suche

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)

1 Voraussetzung

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

2 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.

Das Objektmodell der Raphaël-Version von MiniPong 02
Das Objektmodell der Canvas-Version von MiniPong 02

3 Anwendung „MiniPongSVG02

3.1 Neues Projekt anlegen

Legen Sie ein neues „Statisches Web-Projekt“ mit dem Namen MiniPongSVG02 an.

Speichern Sie dieses Projekt wie üblich in Ihrem Repository.

3.2 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});
  }

3.3 Anwendung testen und sichern

Testen Sie Ihre Anwendung in gewohnter Weise.

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

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. Kowarschick (MMProg): Wolfgang Kowarschick; Vorlesung „Multimedia-Programmierung“; Hochschule: Hochschule Augsburg; Adresse: Augsburg; Web-Link; 2018; Quellengüte: 3 (Vorlesung)

5 Fortsetzung des Tutoriums

Sie sollten nun Teil 3 des Tutoriums bearbeiten.