• Start frei!

    Diese Woche werden wir mit der Programmierung unseres Spiels fortfahren, und am Ende wirst du bereits in der Lage sein, die Bewegungen deiner Rakete zu steuern. Wir werden solche Strukturen wie Key-Listeners, Objekte und Bild-Loader kennenlernen. Lass den Spaß beginnen!

    • game.js


      Nun, da wir unser Canvas-Element definiert haben und einen Ort auf unserer Website zum Spielen haben, können wir anfangen, ein Skript zu definieren. Dafür benötigen wir eine reine JavaScript-Datei, die wir genau wie in unserer letzten Lektion mit der HTML-Datei verbinden werden.


        Erstelle eine neue JavaScript-Datei, du kannst sie nennen, wie du willst, wichtig ist nur, dass du ".js" am Ende hinzufügst.


        Verbinde nun deine HTML- und JS-Dateien mithilfe des <script>-Tags miteinander. Stelle sicher, dass du die richtige JS-Datei als Quelle (src) auswählst.



      Key-Listener

      Das Erste, was wir in unserer Script-Datei programmieren wollen, ist eine Möglichkeit für den Spieler, das Spiel zu steuern, z.B. die Rakete nach oben oder unten zu bewegen. Dafür werden wir ein sehr nützliches Konzept in der Programmierung implementieren - sogenannte "Key-Listener".



      Gut zu wissen!

      Ein Key-Listener in JavaScript ist eine Funktion, die aufgerufen wird, wenn eine bestimmte Taste auf der Tastatur gedrückt wird. Wenn wir ein Spiel programmieren, möchten wir oft, dass das Spiel auf die Eingabe des Benutzers reagiert, um es interaktiver zu machen. Durch die Verwendung von Key-Listenern können wir unser Spiel so programmieren, dass es auf die Tasteneingabe des Benutzers reagiert, z. B. um ein Objekt zu bewegen oder um eine Aktion auszulösen.


      In unserem Spiel brauchen wir nur drei Key-Listener: wenn der Spieler schießt (Leertaste drückt) und wenn der Spieler sich bewegt (Pfeiltaste hoch und Pfeiltaste runter drückt).


      Am Anfang des Spiels sind keine dieser Tasten gedrückt, deshalb initialisieren wir sie als 'false'.


      Gut zu wissen!


      "let" ist ein weiteres Schlüsselwort in JavaScript, das wir verwenden können, um Variablen zu deklarieren. Es ist ähnlich wie "var", aber es gibt einen wichtigen Unterschied: Wenn wir eine Variable mit "let" deklarieren, können wir sie nur in dem Block verwenden, in dem wir sie erstellt haben. Das bedeutet, dass, wenn wir eine Variable innerhalb einer Schleife mit "let" deklarieren, sie nur innerhalb dieser Schleife verwendet werden kann und nicht außerhalb davon. Das ist nützlich, weil es uns hilft, unseren Code zu organisieren und vermeidet potenzielle Fehler, die auftreten können, wenn wir Variablen außerhalb ihrer beabsichtigten Anwendungsbereiche verwenden.


      Wenn der Spieler eine dieser Tasten drückt, müssen wir den Wert unserer Variablen von "false" auf "true" ändern:




      Wir erstellen eine Funktion, die aufgerufen wird, wenn eine Taste auf der Tastatur gedrückt wird. Wir überprüfen dann, ob die gedrückte Taste die Leertaste (SPACE) ist. Wenn es sich um die Leertaste handelt, setzen wir eine Variable namens KEY_SPACE auf "true". Aber wie wissen wir jetzt, wann die Taste nicht mehr gedrückt wird? Dafür haben wir eine weitere Funktion, nämlich onkeyup:



      Nun, wenn die Taste nicht mehr gedrückt wird, wird die Variable "KEY_SPACE" wieder auf "false" gesetzt. Lass uns den gleichen Prozess für die anderen Variablen wiederholen. Du kannst einfach die ähnlichen Teile kopieren und ein paar Werte ändern.

      onkeydown:




      onkeyup:


        Passe deinen Quellcode an und speichere das Programm. Wenn du es jetzt ausführst, wird natürlich noch nichts passieren, da du immer noch das schwarze Rechteck auf dem Bildschirm siehst. Wir wollen das nun ändern.

    • Spielfläche

      Als nächstes wollen wir auf unserem Spielbereich (Canvas) etwas zeichnen. Wir möchten die Rakete und das UFO auf unserem Hintergrundbild (space.png) platzieren. Bevor wir dies tun können, benötigen wir bestimmte Informationen zu diesen Bildern, um sie in unseren Code einbinden zu können.


      Unser Programm muss wissen, wo wir unsere Bilder platzieren möchten (x- und y-Koordinaten) und die Breite und Höhe der Bilder (height und width). Und natürlich müssen wir unserem Programm sagen, wo es all diese Bilder finden kann (src). Wir können all diese Informationen in Variablen speichern:



      Dieser Code definiert zwei Objekten, die verschiedene Eigenschaften haben.


      Gut zu wissen!

      Ein Objekt in JavaScript ist eine Art, Daten zu organisieren. Es ist wie eine Schachtel, in der wir verschiedene Dinge aufbewahren können. Jede Sache in der Schachtel hat einen Namen und einen Wert. Zum Beispiel können wir ein Objekt für ein Auto haben. Wir können den Namen des Autos, die Farbe, die Marke, das Modell und andere Eigenschaften in einem Objekt speichern. Wenn wir auf das Auto-Objekt zugreifen, können wir diese Eigenschaften verwenden, um Informationen darüber zu erhalten oder zu ändern, wie das Auto aussieht oder wie es sich verhält. Ein Objekt kann auch Funktionen enthalten, die wir aufrufen können, um Aktionen auszuführen.


      Für unser Hintergrundbild brauchen wir keine Koordinaten, daher können wir dieses Objekt einfach in einer Zeile initialisieren.

      Das Schlüsselwort 'new Image' sagt dem Programm, dass wir ein neues Bild-Objekt erstellen möchten, das später für unser Hintergrundbild verwendet wird.

      Jetzt müssen wir alle diese Bilder in das Programm laden, damit wir sie später verwenden können. Dafür benötigen wir eine Funktion namens "loadImages"

      Zuerst sagen wir dem Hintergrundbild, dass es das Bild "space.png" verwenden soll, indem wir den Quellcode "backgroundImage.src = 'space.png'" verwenden. Dann laden wir das Bild der Rakete, indem wir eine neue Image-Instanz erstellen und ihr den Quellcode "rocket.img.src = rocket.src" geben. Zum Schluss laden wir auch das Bild des UFOs mit der gleichen Methode wie bei der Rakete. (vorher haben wir den Pfad der Bilder in rocket.src und ufo.src gespecihert)


      Wir haben eine Funktion erstellt, aber wir müssen sie auch aufrufen, damit sie die Bilder tatsächlich lädt. Alle Bilder müssen zu Beginn des Spiels geladen werden, also erstellen wir eine neue Funktion startGame() und rufen unsere "loadImages"-Funktion darin auf.


      Wir müssen unserem Programm auch sagen, dass dies die erste Funktion ist, die zu Beginn aufgerufen werden muss. Dafür kehren wir zu unserer HTML-Datei zurück und ändern den body-Tag. In der index.html Datei müssen wir auch die ID für das Canvas-Element hinzufügen, damit wir es später verwenden können.


      Jetzt fügen wir einige fehlende Elemente in unsere startGame() Funktion ein.


      Diese Code-Zeilen rufen das Element "canvas" auf, das wir zuvor in unserem HTML-Code erstellt haben, und weisen es der Variablen "canvas" zu. Dann rufen wir die Methode getContext() auf, um den Kontext des Canvas-Elements zu erhalten, in diesem Fall den 2D-Kontext, und weisen diesen der Variablen "ctx" zu. Der Kontext ist das Werkzeug, mit dem wir das Canvas manipulieren können, indem wir Linien, Formen und Farben darauf zeichnen.


      Am Anfang deines Codes initialisierst du die Variablen ctx und canvas


      und definierst die Funktion "draw()", die wir später verwenden werden, um die Bilder auf dem Bildschirm anzuzeigen.



      Diese Funktion zeichnet ein Hintergrundbild und ein Raumschiff-Bild auf dem Leinwand-Element, das wir in unserer Webseite definiert haben. Die erste Zeile zeichnet das Hintergrundbild an der Position (0, 0), was bedeutet, dass es oben links in der Ecke beginnt. Die zweite Zeile zeichnet das Raumschiff-Bild an der Position (rocket.x, rocket.y) auf der Leinwand. Die Variablen rocket.width und rocket.height bestimmen, wie groß das Raumschiff sein soll. Die letzte Zeile ist ein sogenannter Loop, der immer wieder den draw() Funktion aufruft und somit die Bilder auf der Leinwand aktualisiert, bis wir das Spiel beenden oder die Seite schließen.


        Korrigiere deinen Quelltext und starte das Programm.


    • update()


      Okay... das sieht überhaupt nicht richtig aus. Die Bilder sind verzerrt und nur ein kleiner Teil unseres Hintergrundbildes wird gezeigt. Lass uns versuchen, ein paar Werte in unserem Raketen-Objekt zu ändern.

      Du kannst mit den Zahlen selbst experimentieren, meine Lösung sieht so aus:



      Du solltest auch eine Zeile in der draw() Funktion ändern, damit das Hintergrundbild vollständig angezeigt werden kann.



      Speichere dein Programm und probiere es erneut aus. Sieht es jetzt besser aus? 😉

      Als nächstes Schritt möchten wir die Rakete bewegen. Das UFO wird später eingefügt. Wir definieren eine neue Funktion "update()", welche dafür sorgt, dass sich die Koordinaten unserer Rakete ändern, wenn wir die Pfeiltasten nach oben oder unten drücken. Wir werden später auch diese Funktion nutzen, um Kollisionen zu erkennen.



      Wenn die Taste nach oben gedrückt wird, wird die Rakete um 4 Pixel nach oben verschoben. Es reicht jedoch nicht aus, einfach nur die Koordinaten der Rakete zu ändern. Wir müssen auch diese Werte von Zeit zu Zeit aktualisieren. Lass uns zu unserer startGame()-Funktion zurückkehren und etwas Neues hinzufügen:



      Gut zu wissen!
      setInterval wird verwendet, um eine Funktion (in diesem Fall "update") alle 25 Millisekunden aufzurufen. Das bedeutet, dass die Funktion alle 25 Millisekunden automatisch aufgerufen wird, bis sie gestoppt wird. Diese Funktion kann genutzt werden, um kontinuierlich das Spiel zu aktualisieren oder um Animationen zu erstellen.

        Speichere dein Programm und probiere es aus. Bewegt sich deine Rakete nach oben?

    • Icon Textseite
      Code der Vorlseung Textseite
    • Icon Aufgabe
      Aufgabe 7