MMProg:WiSe2015:Praktikum:Aufgabe 7

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 (DOMView oder SVGView) 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 addObjectView() und destroy() implementieren.

addObjectView(object, color) 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 requestAnimationFrame(), um den Render-Vorgang wiederholt auszuführen.

var renderRepeatedly = function() {
  console.log('rendering');
  window.requestAnimationFrame(renderRepeatedly);
}
renderRepeatedly();

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:

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

destroy() 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 div-Elementen darstellen.

Beispielcode:

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';

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 createElementNS() verwenden.

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

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 und SVG:

• 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