Lawrence: Die Seite wurde neu angelegt: „=Praktikumsaufgabe 6= ==Ereignisverarbeitung== ===Ziel=== Ziel dieser Aufgabe ist es die in dem Browser-Tutorium vermittelten Grundlagen für Ereignisverarb…“

2015-10-01T21:12:49Z

Die Seite wurde neu angelegt: „=Praktikumsaufgabe 6= ==Ereignisverarbeitung== ===Ziel=== Ziel dieser Aufgabe ist es die in dem Browser-Tutorium vermittelten Grundlagen für Ereignisverarb…“

Neue Seite

=Praktikumsaufgabe 6=

==Ereignisverarbeitung==

===Ziel===

Ziel dieser Aufgabe ist es die in dem Browser-Tutorium vermittelten Grundlagen für Ereignisverarbeitung zu vertiefen.

===Projekt vorbereiten===

Erzeugen Sie einen neuen Ordner "aufgabe6" innerhalb Ihres Verzeichnis/Repositories.
Speichern Sie alle Dateien aus dem Vorlagenordner "aufgabe6/vorlage" in diesem Ordner ab.

Fügen Sie sämtlichen Code für die folgenden Teilaufgaben in die Datei "index.js" ein.

===Spiel starten===

Registrieren Sie auf dem HTML-Input-Element mit der ID "start-game" einen Event-Listener für das "click"-Ereignis.
Wird der Button geklickt sollen folgendes geschehen:

* Der Button selbst wird aus dem DOM entfernt mithilfe von <code>removeChild()</code>
* Es wird eine Funktion namens <code>startGame()</code> aufgerufen; erzeugen Sie dazu diese zunächst leere Funktion

===Punktestandsanzeige erzeugen===

Erstellen Sie eine globale Variable "score" und initialisieren Sie diese mit dem Wert 0.
Erweiteren Sie dann die nach wie vor leere Funktion <code>startGame()</code> um die folgende Logik:

* Der globalen Variable "score" wird der Wert 0 zugewiesen
* Es wird ein DOM-Element mit Tag-Namen <code>div</code> erzeugt
* Diesem Element wird das Attribut "id" mit Wert "score" zugewiesen
* Abschließend wird das DOM-Element dem <code>body</code>-Element hinzugefügt mit <code>appendChild()</code>

===Zielobjekt erzeugen===

Nach der Erzeugung des Punktestands soll die Funktion <code>startGame()</code> eine neue Funktion <code>createGameObject()</code> aufrufen.
Erzeugen Sie die Funktion <code>createGameObject()</code> und implementieren Sie folgende Logik:

* Es wird ein DOM-Element mit Tag-Namen <code>div</code> erzeugt
* Diesem Element wird das Attribut "class" mit dem Wert "goal" zugewiesen
* Außerdem wird dem Element mittels CSS eine zufällige x- und y-Position zugewiesen
* Abschließend wird das DOM-Element dem <code>body</code>-Element hinzugefügt mit <code>appendChild()</code>

'''Tipp:''' Nutzen Sie folgenden Code um einem Element per CSS eine zufällige x- und y-Position zuzuweisen:

<source lang="javascript">
element.style.left = Math.floor(Math.random() * 300) + 'px'
element.style.top = 30 + Math.floor(Math.random() * 300) + 'px'
</source>

Wenn Sie nun die Seite laden und den Button drücken um das Spiel zu starten, sollte ein grünes Rechteck gerendert werden.

===Zielobjekt abschiessen===

Fügen Sie nun einen Event-Listener für das "click"-Ereignis auf dem Dokument hinzu, der überprüfen soll ob das Ziel geklickt wurde.
Dies stellen Sie fest, indem Sie das "class"-Attribut des ursprünglichen Ereignis-Ziels (<code>event.target</code>) auf den Wert "goal" testen.
Ist das der Fall soll das Zielelement aus dem Dokument entfernt werden und <code>createGameObject()</code> erneut aufgerufen werden.

Wenn Sie nun auf das grüne Rechteck klicken sollte dies verschwinden und an einer anderen Stelle ein neues erscheinen.

===Punktestand aktualisieren===

Erzeugen Sie anschließend eine Funktion namens <code>renderScore()</code>, welche den aktualisierten Punktestand darstellen soll.
Implementieren Sie dazu folgende Logik:

* Es wird nach dem DOM-Element mit der ID "score" gesucht (z.B. mittels <code>querySelector()</code>)
* Der Eigenschaft <code>innerHTML</code> des Elements wird die Kombination aus "Punkte: " und dem Wert von der Variable "score" zugewiesen

Fügen Sie außerdem einen Aufruf der Funktion an den folgenden Stellen hinzu:

* An der Stelle in der <code>startGame()</code>-Funktion nachdem die Punktestandsanzeige erzeugt wurde
* An der Stelle an der beim Klick auf ein Zielelement ein neues erzeugt wird

An der zweiten Stelle soll die globale Variable "score" um eins hochgezählt werden.
Wenn Sie nun auf ein grünes Rechteck klicken sollte sich der Punktestand um eins erhöhen und angezeigt werden.

===Hindernisse erzeugen===

Um Hindernisse zu erzeugen ändern Sie nun die Funktion <code>createGameObject()</code> wie folgt ab:
* Es wird ein einzelnes Argument namens "type" akzpetiert
* Dieses Argument wird verwendet um zu bestimmen welches Klassenattribut dem neuen Element zugewiesen wird

Ändern Sie die beiden Stellen an denen <code>createGameObject()</code> aufgerufen wird so, dass es nun <code>createGameObject("goal")</code> heisst.
Fügen Sie außerdem an der Stelle wo der Punktestand um eins erhöht wird den Aufruf <code>createGameObject("obstacle")</code> hinzu.

Nun sollte mit jedem Klick auf das Ziel ein weiteres Hindernis entstehen.

===Spiel beenden===

Fügen Sie dann einen Event-Listener für das <code>mouseover</code>-Ereignis hinzu, welches überprüfen soll ob Hindernisse berührt werden.
Dies können Sie feststellen indem Sie testen, ob das ursprüngliche Ereignis-Ziel (<code>event.target</code>) die Klasse "obstacle" hat.
In diesem Fall soll der <code>innerHTML</code>-Eigenschaft des <code>body</code>-Elements
die Kombination aus dem String "Game over. Erreichte Punkte: " und dem Wert der Variable "score" zugewiesen werden.

Nun sollte das Spiel vorbei sein sobald Sie ein Hindernis berühren und der finale Punktestand angezeigt werden.

===Spiel neustarten===

Registrieren Sie einen Event-Listener für das <code>keyup</code>-Ereignis auf dem Dokument um das Spiel mit Leertaste neustarten zu können.
Es soll überprüft werden ob <code>event.keyCode</code> den Wert 32 hat und in diesem Fall soll die Funktion <code>startGame()</code> aufgerufen werden.

Erweitern Sie dann die Funktion <code>startGame()</code> um folgende Logik damit das Spielfeld vor einem Neustart aufgeräumt wird:

* Der Eigenschaft <code>innerHTML</code> des <code>body</code>-Elements wird ein leerer String zugewiesen

===Optional: Spiel verbessern===

Momentan ist es möglich, dass ein Hindernis direkt an der Stelle des Mauszeigers erscheint und das Spiel beendet ist.
Erweitern Sie die aktuelle Implementierung so, dass ausgeschlossen ist, dass dies passieren kann.

MMProg:WiSe2015:Praktikum:Aufgabe 6 - Versionsgeschichte

Lawrence: Die Seite wurde neu angelegt: „=Praktikumsaufgabe 6= ==Ereignisverarbeitung== ===Ziel=== Ziel dieser Aufgabe ist es die in dem Browser-Tutorium vermittelten Grundlagen für Ereignisverarb…“