HTML-Tutorium: SVG: MiniPong 02: Unterschied zwischen den Versionen
aus GlossarWiki, der Glossar-Datenbank der Fachhochschule Augsburg
Kowa (Diskussion | Beiträge) |
Kowa (Diskussion | Beiträge) |
||
| (10 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt) | |||
| Zeile 1: | Zeile 1: | ||
{{HTML-Tutorium:SVG:MiniPong:Menü}} | {{HTML-Tutorium:SVG:MiniPong:Menü}} | ||
'''Musterlösung''': <code>[http://glossar.hs-augsburg.de/beispiel/tutorium/html_svg/minipong/html_svg_minipong_02/WebContent/index.html Minipong 2]</code> | '''Musterlösung''': <code>[http://glossar.hs-augsburg.de/beispiel/tutorium/html_svg/minipong/html_svg_minipong_02/WebContent/index.html Minipong 2]</code> | ||
([http://glossar.hs-augsburg.de/beispiel/tutorium/html_svg/minipong/ | ([http://glossar.hs-augsburg.de/beispiel/tutorium/html_svg/minipong/html_svg_minipong_02 SVN-Repository]) | ||
=Voraussetzung= | ==Voraussetzung== | ||
Sie sollten die Inhalte der Tutorien [[HTML-Tutorium: SVG: | Sie sollten die Inhalte der Tutorien [[HTML-Tutorium: SVG: MiniPong 01]] und [[HTML5-Tutorium: Canvas: MiniPong 02]] kennen. | ||
=Ziel: Interaktion mit dem Schläger= | ==Ziel: Interaktion mit dem Schläger== | ||
Im zweiten Teil des Tutoriums wird die Interaktion mit dem Schläger implementiert. | Im zweiten Teil des Tutoriums wird die Interaktion mit dem Schläger implementiert. | ||
Wie im [[HTML-Tutorium: SVG: MiniPong 01|Teil 1 des Tutoriums]] wird die [[HTML5-Tutorium: Canvas: MiniPong 02|Canvas-Version]] in eine SVG-Version umgeschrieben. | Wie im [[HTML-Tutorium: SVG: MiniPong 01|Teil 1 des Tutoriums]] wird die [[HTML5-Tutorium: Canvas: MiniPong 02|Canvas-Version]] in eine SVG-Version umgeschrieben. | ||
[[ | [[Datei:MiniPong02SVG.png|miniatur|links|476px|Das Objektmodell der '''Raphaël-Version''' von MiniPong 02]]<div class="tleft" style="clear:none">[[Datei:MiniPong02Canvas.png|miniatur|ohne|474px|Das Objektmodell der '''Canvas-Version''' von MiniPong 02]]</div><div style="clear:both"></div> | ||
=Anwendung „<code>MiniPongSVG02</code>“= | ==Anwendung „<code>MiniPongSVG02</code>“== | ||
==Neues Projekt anlegen== | ===Neues Projekt anlegen=== | ||
Legen Sie ein neues | Legen Sie ein neues „Statisches Web-Projekt“ mit dem Namen <code>MiniPongSVG02</code> an. | ||
Speichern Sie dieses Projekt wie üblich in Ihrem Repository. | Speichern Sie dieses Projekt wie üblich in Ihrem Repository. | ||
==Dateien erstellen== | ===Dateien erstellen=== | ||
Der Umbau der Canvas-Version in eine Raphaël-Version läuft genauso ab wie in | Der Umbau der Canvas-Version in eine Raphaël-Version läuft genauso ab wie in | ||
| Zeile 28: | Zeile 28: | ||
<source lang="javascript"> | <source lang="javascript"> | ||
// Initializes the paddle | // Initializes the paddle. | ||
// It has to be called when the canvas has been created. | |||
init: | init: | ||
function(p_canvas) | function(p_canvas) | ||
{ this. | { this.v_svg | ||
= p_canvas | = p_canvas | ||
.rect(this.x, this.y, this.width, this.height) | .rect(this.x, this.y, this.width, this.height) | ||
| Zeile 45: | Zeile 46: | ||
draw: | draw: | ||
function() | function() | ||
{ this. | { this.v_svg.attr({x: this.x, y: this.y}); | ||
} | } | ||
</source> | </source> | ||
==Anwendung testen und sichern== | ===Anwendung testen und sichern=== | ||
Testen Sie Ihre Anwendung in gewohnter Weise. | Testen Sie Ihre Anwendung in gewohnter Weise. | ||
Vergessen Sie nicht, sie im SVN-Repository zu sichern. | Vergessen Sie nicht, sie im SVN-Repository zu sichern. | ||
=Quellen= | ==Quellen== | ||
<references/> | <references/> | ||
<ol start="2"> | <ol start="2"> | ||
| Zeile 63: | Zeile 64: | ||
[[Kategorie: HTML-Tutorium: SVG: MiniPong]][[Kategorie: HTML-Beispiel]][[Kategorie:Kapitel:Multimedia-Programmierung:Beispiele]] | [[Kategorie: HTML-Tutorium: SVG: MiniPong]][[Kategorie: HTML-Beispiel]][[Kategorie:Kapitel:Multimedia-Programmierung:Beispiele]] | ||
=Fortsetzung des Tutoriums= | ==Fortsetzung des Tutoriums== | ||
Sie sollten nun [[HTML-Tutorium: SVG: MiniPong 03|Teil 3 des Tutoriums]] bearbeiten. | Sie sollten nun [[HTML-Tutorium: SVG: MiniPong 03|Teil 3 des Tutoriums]] bearbeiten. | ||
Aktuelle Version vom 1. März 2023, 13:13 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
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.
