4Zusatzaufgaben

Sieh dir an wo die Grafiken für das Monster und für den Hintergrund liegen. Versuche beides durch andere Grafiken auszutauschen z.B. von https://opengameart.org/

Du kannst die Grafik deines Monsters auch mit JavaScript austauschen. Eine schöne Ausgabe in der Funktion fuettern wäre, wenn du die Grafik im Element mit der id 'monster' durch die des Monsters austauschst, auf dem es einen Keks frisst. Dazu musst du dir das HTML-Element über das DOM holen, wie in den vorherigen Beispielen. Wenn das HTML-Element ein <img> ist, dann hat das Objekt eine Eigenschaft src, der du den Pfad zu einem anderen Bild zuweisen kannst, sobald du das Monster gefüttert hast.

Irgendwann sollte deine Monster auch wieder fertig sein mit fressen. Es wäre also gut, die Grafik wieder in den Anfangszustand zurückzusetzen. Definiere dazu eine neue Funktion resetNormal, welche die Grafik auf die gleiche Art wie zuvor zurücktauscht. In fuettern kannst du dann im Verarbeitungsschritt eine Funktion deines Browsers nutzen, um nach einer gewissen Zeit die resetNormal Funktion aufzurufen. Die Funktion, die du dazu benötigst, heißt setTimeout( ) und erwartet den Namen deiner Funktion und einen Zeitwert in Millisekunden als Parameter. Infos zu setTimeout gibt es hier: https://wiki.selfhtml.org/wiki/JavaScript/Window/setTimeout