An die Tasten fertig los! Sei kreativ mit JavaScript

UFOs

Letzte Woche haben wir die Bewegungen der Rakete programmiert und sie kann nun auf und ab fliegen. Aber findest du nicht, dass etwas fehlt? Genau - es gibt keine UFOs auf dem Bildschirm. Lass uns das ändern!

Öffne dein Spielprojekt in VS-Studio und gehe zur Datei game.js. Letzte Woche hattest du eine Aufgabe, um die Bewegung nach unten zu implementieren. Unten findest du die richtige Implementierung der update() Funktion. Vergleiche deine eigene Lösung oder kopiere einfach die richtige in deine Datei.

Nun zurück zu den UFOs. Wir haben bereits am Anfang unser UFO-Objekt definiert, zusammen mit seinen Koordinaten und seiner Größe. Aber was wir wirklich tun möchten, ist nicht nur ein UFO, sondern viele UFOs in regelmäßigen Zeitabständen erscheinen zu lassen. Wir möchten auch, dass sie immer an verschiedenen Stellen auf der y-Achse erscheinen, also müssen wir viele leicht unterschiedliche UFOs erstellen.

Dafür brauchen wir eine Art Container, in dem alle unsere UFOs Platz finden können. Und jedes Mal, wenn wir ein UFO spawnen müssen, nehmen wir einfach eins aus diesem Container. Zum Glück haben wir eine perfekte Datenstruktur dafür: Arrays.

Gut zu wissen!

Als Erstes müssen wir das Zeitintervall für das Erscheinen des UFOs festlegen. Dafür verwenden wir eine bereits bekannte Funktion namens "setInterval()"

  Wie du sehen kannst, rufen wir eine Funktion namens "createUfos" auf, die wir noch nicht erstellt haben. Lasst uns das ändern.

Es gibt ein paar Dinge, die wir jetzt in unserem Code ändern müssen. Zunächst nehmen wir die Definition des UFO-Objekts vom Anfang, kopieren sie und ersetzen sie durch "ufos" und eckige Klammern. Wir verwenden leere eckige Klammern, um ein leeres Array zu initialisieren.

->

Dann gehe zur neuen Funktion createUfos() und füge eine push()-Funktion mit den Werten ein, die du zuvor kopiert hast.

  Gehe zur Funktion loadImages(). Die Variablen ufo sind unterstrichen, weil unser Editor solche Variablen nicht kennt (erinnere dich daran, dass wir 'ufo' in 'ufos' umbenannt haben). Lösche einfach diese beiden Zeilen.

Und jetzt müssen wir all diese UFOs auf Canvas zeichnen. Dazu gehen wir zur draw() Funktion.

Dieser Code sagt uns, dass wir für jedes (forEach) UFO in unserer Liste von UFOs etwas tun (function) wollen. Wir nehmen ein UFO (ufo) aus der Liste und zeichnen es auf der Leinwand. Dafür verwenden wir die drawImage()-Funktion und geben die Position (x, y) sowie die Größe (width, height) des UFOs an.

Jetzt machen wir noch ein kleines Feintuning für die createUfos() Funktion (pass auf - ich habe width und heigth auch verändert):

  Lass uns jetzt unser Programm ausprobieren! Nach 5 Sekunden sollte ein UFO erscheinen. Du kannst auch die Breite und Höhe des UFOs nach deinen Wünschen ändern.

Die Rakete ist aufgetaucht, aber sie schwebt nur an einem Ort und bewegt sich überhaupt nicht. Lass uns etwas Bewegung hinzufügen und die Rakete programmieren, damit sie in unsere Richtung fliegt. Dafür müssen wir einfach die x-Position der Rakete im Laufe der Zeit ändern. Als Erstes ändern wir die ursprüngliche Spawn-Position der Rakete, um sicherzustellen, dass sie so weit von uns entfernt erscheint, wie wir möchten.

  Jetzt gehen wir zur update()-Funktion und implementieren eine neue Aktualisierungsregel für UFOs - alle 5 Millisekunden wird ein neues erschaffenes UFO seine x-Position nach links ändern (-5).

  Und noch ein wenig Feinschliff: Um sicherzustellen, dass die Rakete jedes Mal an einer anderen Stelle erscheint, müssen wir ein Element des Zufalls hinzufügen. Wie du wahrscheinlich schon vermutet hast, werden wir dafür die Math.random() Funktion verwenden. Gehe zur createUfos() Funktion und ändere die y-Koordinate.

Speichere dein Programm und probiere es aus. Wenn du alles korrekt gemacht hast, solltest du sehen, dass die Rakete jetzt durch den gesamten Bildschirm fliegen kann. Allerdings ist das noch nicht ganz das, was wir wollen - das UFO, so wie es jetzt implementiert ist, stellt keine Bedrohung für die Rakete dar, da nichts passiert, wenn die beiden kollidieren.

Kollision

Jetzt erstellen wir eine neue Funktion, die checkForCollision() heißt. Diese Funktion wird regelmäßig in der startGame()-Funktion aufgerufen, um zu überprüfen, ob eine Kollision zwischen der Rakete und dem Ufo aufgetreten ist.

Jetzt wird es etwas mathematisch, aber keine Sorge. In der Funktion checkForCollision() möchten wir einfach die Positionen sowohl der Rakete als auch des UFOs überprüfen.

Die Funktion geht durch jedes UFO in der Liste "ufos" und prüft, ob die Koordinaten des Raumschiffs und des UFOs so zueinander stehen, dass sie kollidieren würden. Wenn eine Kollision erkannt wird, wird der Code innerhalb der if-Anweisung ausgeführt.

Wie du sehen kannst, ist der Bereich zwischen den geschweiften Klammern noch leer und es passiert noch nichts, wenn das Raumschiff und das UFO kollidieren. Meine Idee ist es, das Bild des Raumschiffs durch eine Explosion zu ersetzen, um zu zeigen, dass der Spieler verloren hat.

Dafür brauchen wir ein gutes PNG-Bild mit transparentem Hintergrund. Du kannst entweder das Bild verwenden, das ich ausgewählt habe, oder auf der Website pixabay.com nach einem anderen suchen. Speichere das Bild in deinem Spieleordner (zusammen mit allen anderen Bildern, HTML- und JS-Dateien) und nenne es "boom".

Um das Bild nach der Kollision zu ändern, müssen wir nur die Bildquelle (source) des Raumschiffs anpassen. Ganz einfach!

Starte dein Spiel und schau, was passiert, nachdem das Raumschiff und das UFO kollidieren!

Achtung, Laser!

Das Letzte, was wir noch umsetzen müssen, sind die Schießmechaniken. Zunächst einmal benötigen wir ein Bild, das die Laserstrahlen repräsentiert. Wie üblich kannst du entweder das Bild verwenden, das ich gefunden habe (sehe unten), oder ein anderes auswählen. Speichere dein Bild im Spieleordner unter dem Namen "laser.png".

Nun implementieren wir eine Routine, die überprüft, ob der Spieler die Leertaste gedrückt hat. Dafür verwenden wir die setInterval()-Funktion, die eine neue checkForShots()-Funktion aufruft.

Erstelle dann ein neues leeres Array für die Schüsse (wir verwenden ein Array, da deine Rakete mehr als einen Schuss gleichzeitig abfeuern kann).

Danach implementieren wir die Funktion checkForShots(), die jedes Mal, wenn der Spieler die Leertaste drückt, unser Laserbild lädt. Wenn du genau hinschaust, wirst du sehen, dass diese Funktion fast genau die createUfos()-Funktion kopiert, also sollte es für dich nichts Neues geben.

Ändere die update()-Funktion ein wenig ab:

Füge schließlich ein paar neue Zeilen zur draw()-Funktion hinzu, damit dein Laserstrahl auf dem Bildschirm gezeichnet werden kann:

...Ta-da! Probier dein Programm aus und stelle sicher, dass deine Rakete hoch und runter fliegen kann und dass du beim Drücken der Leertaste Laserstrahlen aus der Rakete siehst. Wenn das der Fall ist - Glückwunsch, dein Spiel ist fertig!

"Aber warte!" - möchtest du wahrscheinlich sagen - "es ist noch nicht fertig, es passiert nichts, wenn der Laser ein Ufo trifft, er geht einfach hindurch, ohne Schaden zu verursachen!!!" Das stimmt - und das ist genau deine letzte Hausaufgabe ;)

Und so neigt sich unser Kurs dem Ende zu. Du solltest wirklich stolz auf dich sein, dass du diese 6 Wochen durchgehalten hast und so komplexe Konzepte wie die Programmierung in JavaScript gelernt hast. Ich hoffe, du hattest Spaß! Obwohl unser Kurs zu Ende ist, kannst du mich immer noch hier in Moodle um Programmierhilfe bitten. Ich hoffe, wir sehen uns das nächste Mal wieder!

Liebe Grüße

Aleksandra