• Es wird bunt!


    In dieser Woche beschäftigen wir uns damit, wie man in JavaScript Module verwenden kann, um den Code sauberer und leichter lesbar zu gestalten. Zudem lernen wir, wie wir das <img>-Tag nutzen können, um Bilder in unsere Spiele einzubinden. Schließlich starten wir mit der Planung und Programmierung eines etwas anspruchsvolleren Spiels und wenden dabei die bisher erlernten Konzepte an! lächelnd


    • Bilder

      Unser Programm sieht echt cool aus, aber irgendwas fehlt. Auf Websites gibt's normalerweise nicht nur Text, sondern auch Bilder, Animationen oder sogar Videos. Lass uns das auch in unserem Spiel einbauen!

      Wir könnten zum Beispiel ein Bild von unserem AI-Chatbot zeigen, das am Ende des Gesprächs "Auf Wiedersehen" sagt.


      Speicher einfach dieses Katzenbild mit einem Rechtsklick auf die Maus in deinem Projektordner und achte darauf, dass du es unter dem Namen "cat" speicherst. Du kannst gerne auch ein anderes Bild verwenden, wenn du möchtest.



      Danach müssen wir ein <img>-Tag verwenden, um das Bild auf unserer Website anzuzeigen. Aber da Bilder statische Objekte sind und nicht programmiert werden müssen, setzen wir dieses Tag außerhalb unseres <script>-Tags. Ich habe mich entschieden, es direkt nach dem Beginn des <body>-Tags zu platzieren.


      Gut zu wissen!

      Das img-Tag in JavaScript wird verwendet, um Bilder auf einer Webseite anzuzeigen. Die Eigenschaft "src" steht für den Speicherort des Bildes auf dem Computer und "id" dient dazu, das Bild später im Code leichter zu finden und zu bearbeiten.


        Speichere dein Programm und probiere es aus.

    • Icon Aufgabe
      Aufgabe 6

    • Programm-Module

      So ein Quelltext kann mit der Zeit schön wachsen. Unser aktuelles Programm ist gar nicht mal allzu groß, aber stell dir vor, du willst eine richtige Anwendung (App) schreiben oder hättest ein größeres Spiel in Planung. Das wäre schon nützlich, wenn sich das Ganze auf mehrere Dateien bzw. Modulen verteilen lässt.

      Du weißt, dass alle deine JavaScript-Programme nur deshalb funktionieren, weil der Browser, in dem du sie laufen lässt, einen JavaScript-Interpreter hat. Du weißt außerdem, dass dazu das eigentliche JavaScript-Programm in eine HTML-Datei eingebettet sein muss.

      Oder gibt es da noch eine Alternative? Nehmen wir unser Programm und verteilen das auf Module. Wir müssen einfach alles, was innerhalb des <script>-Tags steht, in eine Extra-Datei importieren.

        Dazu erstellen wir in unserem Projekt-Ordner eine neue leere Datei und nennen sie „ChatBot.js“.

        -->


      Öffne deine index.html Datei und markiere den Code, der zwischen den <script> und </script> Tags steht. Kopiere diesen Code (mit Strg + C). Wechsle nun zum Fenster einer neuen leeren Datei und füge den kopierten Quelltext ein (mit Strg + V).

      Lösche in deiner index.html Datei alles, was du zuvor in die ChatBot.js importiert hast. Jetzt hast du ein sauberes JavaScript-Programm und deine HTML-Datei wird ganz leer aussehen.


        Als Nächstes ändere in der Datei index.html den Text so um:

      <script src="ChatBot.js"> </script>


      Das src ist die Abkürzung für „Source“, das heißt Quelle. Damit wird die Quelldatei angegeben, in der das JavaScript-Programm zu finden ist.

        Speichere dein Programm und starte es im Browser wie gewohnt, indem du doppelt auf index.html klickst.



      Allerdings sieht es nun sehr seltsam aus, als ob unser Browser vergessen hat, wie die Umlaute dargestellt werden sollen. Vielleicht müssen wir ihm helfen, indem wir die folgende Zeile vor unserem <title>-Tag hinzufügen.




      Gut zu wissen!

      meta charset="UTF-8" ist ein spezieller HTML-Tag, der dem Browser mitteilt, welche Art von Zeichensatz in der Webseite verwendet wird. Wenn dieser Tag nicht vorhanden ist oder falsch definiert wird, kann es passieren, dass einige Buchstaben oder Zeichen nicht richtig dargestellt werden.

      Das liegt daran, dass bestimmte Buchstaben wie ä, ö, ü oder auch Zeichen wie € oder © im Standard-Zeichensatz nicht enthalten sind. Deshalb verwendet man oft den UTF-8 Zeichensatz, der alle diese Buchstaben und Zeichen enthält. Wenn der Browser weiß, dass er diesen Zeichensatz verwenden soll, kann er alle Buchstaben und Zeichen korrekt darstellen.





      Viel besser!

    • Raketen-Spiel

      Nachdem wir einige grundlegende Konzepte in JavaScript gelernt haben, können wir endlich etwas Komplexeres programmieren. Wir werden ein Spiel programmieren, in dem eine Rakete im Weltraum fliegt und auf Aliens schießt. Wir werden das bisher Erlernte nutzen, um das Spiel zu programmieren und dabei auch neue Konzepte lernen. Am Ende haben wir unser eigenes Spiel programmiert und können es mit anderen teilen oder sogar noch weiter verbessern.

      Für dieses Vorhaben benötigen wir selbstverständlich einige Grafiken - genauer gesagt Weltraum-, Raketen- und Ufo-Bilder, die wir abschießen möchten. Ich habe bereits einige Bilder auf pixabay.com herausgesucht, die wir verwenden können. Allerdings steht es dir frei, eigene Bilder auszuwählen. Wichtig dabei ist, dass du alle Bilder unter denselben Namen speicherst, den ich verwende, damit es nicht verwirrend wird.


        



        Erstelle für das Spielprojekt einen neuen Ordner und speichere dort alle Bilder.


      Um mit unserem Spiel zu beginnen, benötigen wir zunächst eine leere Webseite, auf der wir später das gesamte Spiel anzeigen können. Als erstes legen wir eine neue Internetseite an.

        Dazu öffne in Visual Studio Code den Ordner, in dem du bereits deine Bilder gespeichert hast.

      ->


      Dort siehst du nun unser drei Bilder und sonst gar nichts.



        Erstelle eine neue Datei namens index.html.

      Eine nützliche Tastenkombination in VS Code ist "!" gefolgt von der TAB-Taste. Wenn du dies in einer neuen HTML-Datei eingibst, wird automatisch eine Grundstruktur für die Datei erstellt. Dies kann dir viel Zeit sparen, da du nicht alles von Grund auf neu schreiben musst.

      Hier ist ein Beispiel: Wenn du "!" eingibst und dann auf TAB drückst, wird der folgende Code automatisch generiert:


      [Tab]



      Gut zu wissen!

      Die "<meta>"-Tags in HTML werden verwendet, um Informationen über die Webseite zu geben.

      Das "<meta http-equiv="X-UA-Compatible" content="IE=edge">"-Tag wird verwendet, um den Webbrowser anzuweisen, die neueste Version von Internet Explorer zu verwenden.

      Das "<meta name="viewport" content="width=device-width, initial-scale=1.0">"-Tag wird verwendet, um die Breite der Webseite auf die Breite des Geräts anzupassen, auf dem die Webseite angezeigt wird, um sicherzustellen, dass sie auf verschiedenen Geräten gut aussieht und bedienbar ist.




        Das Erste, was wir nun machen, ist einmal den Title (title) zu ändern. In diesem Titel sagen wir wie unser Spiel heißen soll. Zum Beispiel:


      Speichere dein Programm und probiere es aus.

    • Canvas

      Unsere Webseite ist jetzt ganz leer. Wir müssen nun die Spielflache programmieren, die wir animieren und programmieren können. Dafür verwenden wir eine HTML-Funktion Canvas.

      In JavaScript ist die Canvas-Funktion ein Bereich auf einer Webseite, auf dem wir mit JavaScript zeichnen können. Es ist sozusagen eine virtuelle Leinwand, auf der wir Elemente wie Rechtecke, Linien, Bilder und mehr mit JavaScript erstellen und bearbeiten können. Canvas ist besonders nützlich, um dynamische Grafiken oder Animationen auf Webseiten zu erstellen.

      <canvas>-Tag „wohnt“ innerhalb des <body>…</body> Bereichs. Mit den Attributen "width" und "height" kann man die Größe der Leinwand festlegen, auf der man später Zeichnungen und Animationen erstellt. In diesem Beispiel wird das "canvas" Element eine Breite von 720 Pixeln und eine Höhe von 480 Pixeln haben. Du kannst jedoch auch andere Zahlen einsetzen, aber diese Auflösung ist sehr gut geeignet für ein Webseiten-Spiel.


      Wenn du nun deinen Code ausführst, wirst du feststellen, dass sich nichts verändert hat. Das liegt daran, dass unsere Zeichenfläche genauso aussieht wie das Browser-Fenster. Wir können das mithilfe des <style>-Tags ändern.


      Gut zu wissen!

      CSS (Cascading Style Sheets) ist eine Sprache, die verwendet wird, um das Aussehen einer Webseite zu gestalten. Es gibt verschiedenen Stile, die man einer Webseite hinzufügen kann, wie zum Beispiel Schriftarten, Farben, Hintergrundbilder und Layouts.

      Das <style>-Tag in HTML wird verwendet, um den CSS-Code direkt in das HTML-Dokument einzufügen. Man kann damit definieren, wie die verschiedenen Elemente auf der Webseite aussehen sollen. Das <style>-Tag wird normalerweise innerhalb des <head>-Tags im HTML-Dokument platziert.



      Wir legen nun die Gestaltung unseres "canvas"-Elements fest, welches wir zuvor definiert haben. Wir setzen die Hintergrundfarbe auf Schwarz (oder eine andere Farbe deiner Wahl).

        Starte das Programm und prüfe, ob alles funktioniert.




    • Icon Textseite
      Code der Vorlesung Textseite