Lawrence am 15. Oktober 2015 um 10:30 Uhr

2015-10-15T10:30:03Z

← Nächstältere Version		Version vom 15. Oktober 2015, 10:30 Uhr
Zeile 126:		Zeile 126:
	===Links===		===Links===

	Nutzen Sie die folgenden Links für weitere Information über Timer, SVG ~~und Canvas~~:		Nutzen Sie die folgenden Links für weitere Information über Timer und SVG:

	* https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers.setTimeout		* https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers.setTimeout

Lawrence: Die Seite wurde neu angelegt: „=Praktikumsaufgabe 7= ==Rendering und Animation== ===Ziel=== Ziel dieser Aufgabe ist es ein einfaches Spiel mithilfe von Timern, DOM und SVG im Browser zu r…“

2015-10-01T21:13:18Z

Die Seite wurde neu angelegt: „=Praktikumsaufgabe 7= ==Rendering und Animation== ===Ziel=== Ziel dieser Aufgabe ist es ein einfaches Spiel mithilfe von Timern, DOM und SVG im Browser zu r…“

Neue Seite

=Praktikumsaufgabe 7=

==Rendering und Animation==

===Ziel===

Ziel dieser Aufgabe ist es ein einfaches Spiel mithilfe von Timern, DOM und SVG im Browser zu rendern.

Das Spiel besteht darin herunterfallenden Hindernissen auszuweichen. Der Spieler wird mit den Cursortasten gesteuert.

===Projekt vorbereiten===

Erzeugen Sie einen neuen Ordner "aufgabe7" innerhalb Ihres Verzeichnis für die Praktikumsaufgaben.
Speichern Sie alle Dateien aus dem Vorlagenordner "aufgabe7/vorlage" in diesem Ordner ab.

Die Vorlage enthält ein voll funktionierendes Spiel, welches aus den folgenden Komponenten besteht:

* '''model/Player.js''' - Modell eines Spielers
* '''model/Enemy.js''' - Modell eines Gegners
* '''model/EnemyFactory.js''' - Erzeugt in regelmäßigen Abständen zufällige Gegner
* '''model/Level.js''' - Modell eines physikalischen Levels; bewegt die Spielobjekte und überprüft Kollisionen
* '''controller/GameController.js''' - Verarbeitet Benutzereingaben und gibt Änderungen der Modelle an die Views weiter
* '''index.js''' - Startet das Spiel, erzeugt und orchestriert die einzelnen Komponenten

Die Datei "index.js" wartet zunächst auf Eingaben durch den Benutzer um daraufhin das Spiel zu starten.
Dabei wird im ersten Schritt eine physikalische Welt erzeugt und ein Spieler dieser hinzugefügt.
Des Weiteren wird eine EnemyFactory erstellt, welche Gegner erzeugt, die auch der physikalischen Welt hinzugefügt werden.

Damit die Spielobjekte im Browser gerendert werden können wird außerdem ein View-Objekt erzeugt.
Ebenso wie der physikalischen Welt werden die Spieler- und Gegner-Objekte auch der View hinzugefügt.
Welche View-Technologie verwendet wird um das Spiel darzustellen kann der Benutzer vor dem Spielstart entscheiden.

===Funktionsweise von Views===

Unabhängig davon welche Technologie zum Rendern verwendet wird, folgen die Views immer der gleichen Logik und Struktur.
Es gibt eine Konstruktorfunktion (<code>DOMView</code> oder <code>SVGView</code>) welche ein View-Objekt erzeugt.
Diese Konstruktorfunktion erwartet ein DOM-Element, in dem die Ansicht eingebaut werden soll, und eine Höhe und Breite.

Sobald ein View-Objekt erzeugt wird, soll es sich automatisch um das regelmäßige Rendern der Spiels kümmern.
Dazu muss ein solches Objekt die zwei Funktionen <code>addObjectView()</code> und <code>destroy()</code> implementieren.

<code>addObjectView(object, color)</code> erzeugt für ein gegebenes Objekt (z.B. Spieler) eine entsprechende View-Repräsentation.
Das Objekt wird als '''Rechteck''' an seiner x- und y-Position mit seiner Breite und Höhe und der gegegebenen Farbe dargestellt.
Verändert sich die Position des Objekts im Laufe des Spiels, so muss die View dies in regelmäßigen Abständen abbilden.

Nutzen Sie einen geeigneten Timer, wie zum Beispiel <code>requestAnimationFrame()</code>, um den Render-Vorgang wiederholt auszuführen.

<source lang="javascript">
var renderRepeatedly = function() {
console.log('rendering');
window.requestAnimationFrame(renderRepeatedly);
}
renderRepeatedly();
</source>

Um beim Render-Durchgang festzustellen welches View-Objekt welche Positions- und Formänderungen abbilden muss,
muss die Verknüpfung von dem zu rendernden Objekt und dem View-Objekt in einer Liste gespeichert werden.

Beispielhafte Implementierung:

<source lang="javascript">
var childViews = [];
this.addObjectView = function(object, color) {
var div = document.createElement('div');
// ... style and add div element
childViews.push({
object: object,
div: div
});
};
</source>

<code>destroy()</code> muss dafür Sorge tragen, dass eine View korrekt entfernt wird, inklusive aller verwendeten Timer.

===Views implementieren===

Im Folgenden gilt es die zwei unterschiedlichen Views zu implementieren, die das Spiel dann darstellen sollen.
Für jede View-Technologie ist im Vorlagen-Ordner bereits eine Datei angelegt mit einer minimalen Code-Vorgabe.

====DOM-View====

Implementieren Sie im ersten Schritt eine DOM-View, welche das Spiel mithilfe von DOM-Elementen darstellt.

'''Tipp:''' Rechtecke können Sie einfach mit absolut positionierten <code>div</code>-Elementen darstellen.

Beispielcode:

<source lang="javascript">
var viewElement = document.createElement('div');
viewElement.style.position = 'absolute';
viewElement.style.backgroundColor = 'green';
viewElement.style.width = '40px';
viewElement.style.height = '40px';
viewElement.style.left = '5px';
viewElement.style.top = '5px';
</source>

====SVG-View====

Implementieren Sie anschließend eine SVG-View, welche das Spiel mithilfe von SVG-Elementen darstellt.
'''Wichtig:''' Wenn Sie SVG-Elemente mit der DOM-API erzeugen wollen müssen die Funktion <code>createElementNS()</code> verwenden.

<source lang="javascript">
var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svg.setAttribute('version', '1.1');
svg.setAttribute('width', '500');
svg.setAttribute('height', '500');
svg.setAttribute('x', '10');
svg.setAttribute('y', '10');

var rect = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svg.appendChild(rect);
</source>

===Optional: Darstellung anpassen===

Ändern Sie die Views so ab, dass Spieler und Gegner nicht mehr als Rechtecke sondern als Bilder dargestellt werden.
Der Spieler kann zum Beispiel als Raumschiff und die Gegner als entgegenkommende Meteoriten dargestellt werden.

'''Anmerkung:''' Falls Sie Bilder aus dem Internet nutzen möchten achten Sie biite auf die entsprechenden Bildrechte.

===Links===

Nutzen Sie die folgenden Links für weitere Information über Timer, SVG und Canvas:

* https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers.setTimeout
* https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers.setInterval
* https://developer.mozilla.org/en-US/docs/Web/API/window.requestAnimationFrame
* https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial

MMProg:WiSe2015:Praktikum:Aufgabe 7 - Versionsgeschichte

Lawrence am 15. Oktober 2015 um 10:30 Uhr

Lawrence: Die Seite wurde neu angelegt: „=Praktikumsaufgabe 7= ==Rendering und Animation== ===Ziel=== Ziel dieser Aufgabe ist es ein einfaches Spiel mithilfe von Timern, DOM und SVG im Browser zu r…“