MMProg:WiSe2015:Praktikum:Aufgabe 6

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 removeChild()
• Es wird eine Funktion namens startGame() 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 startGame() um die folgende Logik:

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

Zielobjekt erzeugen

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

• Es wird ein DOM-Element mit Tag-Namen div 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 body-Element hinzugefügt mit appendChild()

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

element.style.left = Math.floor(Math.random() * 300) + 'px'
element.style.top = 30 + Math.floor(Math.random() * 300) + 'px'

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 (event.target) auf den Wert "goal" testen. Ist das der Fall soll das Zielelement aus dem Dokument entfernt werden und createGameObject() 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 renderScore(), 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 querySelector())
• Der Eigenschaft innerHTML 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 startGame()-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 createGameObject() 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 createGameObject() aufgerufen wird so, dass es nun createGameObject("goal") heisst. Fügen Sie außerdem an der Stelle wo der Punktestand um eins erhöht wird den Aufruf createGameObject("obstacle") 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 mouseover-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 (event.target) die Klasse "obstacle" hat. In diesem Fall soll der innerHTML-Eigenschaft des body-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 keyup-Ereignis auf dem Dokument um das Spiel mit Leertaste neustarten zu können. Es soll überprüft werden ob event.keyCode den Wert 32 hat und in diesem Fall soll die Funktion startGame() aufgerufen werden.

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

• Der Eigenschaft innerHTML des body-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.