• Zeit zum Spielen!

    In dieser Woche werden wir herausfinden, welche Art von Spielen dein AI-Freund mit dir spielen kann, und gleichzeitig werden wir einige wichtige JavaScript-Strukturen lernen, die wir in allen zukünftigen Programmen verwenden können.

    • while-Schleife

      Das Spiel, dass wir letzte Woche programmiert haben, läuft zwar, doch Ratespiel kann man das nicht gerade nennen, denn es gibt ja nur eine einzige Möglichkeit zum Raten. Das ist nun wirklich zu wenig! Selbst wenn man das Programm immer wieder laufen lässt, bringt das nichts: Denn der Computer denkt sich ja bei jedem Programmstart eine neue Zahl aus. Spaß kann so ein Spiel nur machen, wenn man mehrere Male raten kann. Dazu muss das Programm automatisch wiederholt werden:

      Solange die Zahl nicht geraten wurde, muss eine Zahl eingegeben und ausgewertet werden. Für den Computer müssen wir das natürlich in JavaScript formulieren.

      Und hier ist die passende Struktur für Wiederholungen:

      While(Bedingung) {

      AnweisungsBlock

      (alles hier muss wiederholt werden)

      }

      Gut zu wissen!

      Eine Struktur, in der ein Programmteil wiederholt wird, nennt man auch Schleife. Die läuft so lange, wie die Bedingung erfüllt ist.


        Die neue Zeile müssen wir nun an der richtigen Stelle unterbringen. Das heißt, über allen Anweisungen, die wiederholt werden sollen.


      Alle Zeilen, die zu der while-Struktur gehören, sollten aus optischen Gründen eingerückt werden.


      Gut zu wissen!

      Das "!=" Zeichen in JavaScript bedeutet "ungleich". Das heißt, wenn wir zwei Dinge vergleichen und sie ungleich sind, wird das Ergebnis "true" sein, sonst "false".


      Eine Sache gefällt mir nicht – obwohl der JavaScript-Interpreter nichts zu meckern hat. Bei diesen zwei Zeilen wird die Variable zu einem Vergleich benutzt, aber erst danach mit var vereinbart. Das klingt unlogisch, oder?


      Lassen wir var in der Zeile 33 aber einfach weg. Wenn du jetzt dein Programm ausführst, kriegst du eine Fehlermeldung.


      "'eingabe' is not defined" heißt "'eingabe' ist nicht definiert". Das heißt, wir wollen eine Variable benutzen, die unser Computer nicht kennt und deswegen nicht weiß, wie er mit dieser Variable umgehen soll. Wir müssen ihm helfen:


      Vor der Wiederholungs-Struktur wird eine Variable eingabe vereinbart und die bekommt auch gleich einen Wert zugewiesen, und zwar mit 0 einen, der nicht als Ratezahl infrage kommt. Damit hat eingabe in der while-Bedingung einen klaren Wert. Und das var vor der prompt-Anweisung entfällt.


        Baue die neue while-Zeile in den Quelltext ein, passe die nachfolgenden Zeilen an und starte dann das Programm.

      Es klappt aber nicht wirklich? Es wiederholt sich, wir können raten, so oft wir wollen. Doch leider bekommen wir von den Meldungen „zu klein“ und „zu groß“ nichts mit, die Anzeige über document.write() funktioniert erst, wenn die Fenster für die Eingabe wieder zu sind. Was uns nichts bringt. In dieser Form ist das Spiel also wertlos.

      Wir müssen die Meldungen, ob die von uns eingegebene Zahl zu groß oder zu klein ist, in die Meldefenster einbauen, also windows.prompt() im Programm noch ein paarmal verwenden. Versuchen wir damit:



      Nun habe ich das Ratefenster vor die Schleife gesetzt, es muss in dieser Form auch nur einmal vorkommen, und zwar bei Start des Ratespieles. Dabei wird auch die Variable eingabe (mit var) vereinbart.

      Korrigiere deinen Quelltext und starte das Spiel. Nun darfst du endlich nicht nur so oft raten, wie du willst, sondern du bekommst auch den passenden Hilfetext zu sehen.

    • Counter – dein Computer zählt mit


      Mit etwas Übung und Überlegung müsste es gelingen, mit nicht viel mehr als zehn Versuchen auszukommen. (Kleiner Tipp: versuche immer die passende Mitte zu finden!)

      Wenn du das Raten-Programm ein paar Mal gespielt hast, wirst du sicher nichts dagegen haben, wenn der Computer deine Rateversuche mitzählen würde. Dazu brauchen wir eine neue Variable, nennen wir sie versuche. Die enthält vor der Schleife erst einmal den Wert 0, denn es wurde ja noch nicht geraten.

      In der Schleife (nach while) muss dieser Wert dann mit jedem Ratenversuch um 1 weitergezählt werden. (versuche = versuche +1)

      Dein PC holt sich den aktuellen Wert der Variablen versuche und addiert eine 1 dazu. Dann weist er das Ergebnis dieser Variablen wieder zu. Dadurch ist der neue Wert nun um 1 größer als der alte.


      Gut zu wissen!

      Hier siehst du, dass eine Zuweisung keine Gleichung ist, wie du sie aus dem Mathe-Unterricht kennst.

      Der Computer führt immer zuerst das aus, was rechts vom Zuweisungsoperator (=) steht. Hier berechnet er auf der rechten Seite die Formel:

      versuche + 1

      Dann geht er nach links und übergibt das Ergebnis als neuen Wert an die Variable. Vielleich würde ein Pfeil diesen Vorgang besser erklären:

      versuche <--  versuche + 1


      Zusätzlich wird nun eine letzte document.write-Anweisung nötig, die darüber informiert, wie oft geraten wurde.



        Ändere den Quelltext, dann starten das Spiel erneut. Und am Ende bekommst du auch mitgeteilt, wie oft du raten musstest.

    • Icon Aufgabe
      Aufgabe 4

    • Funktionen

      Unsere bisherigen Projekte waren überschaubar groß – oder klein genug, um den Quelltext komplett im Blick zu haben. Doch bei einem richtig „dicken“ Projekt wie einer professionellen App oder einem anspruchsvolleren Spiel wird der Umfang der Quelltexte kräftig wachsen. Damit steigt aber die Gefahr, die Übersicht zu verlieren. Untergliedert man jedoch ein großes Programm in Abschnitte, so gewinnt das ganze wieder an Überschaubarkeit.


      Gut zu wissen!

      Eine Funktion in JavaScript ist ein Abschnitt Code, den wir schreiben, um eine bestimmte Aufgabe auszuführen. Wenn wir diese Aufgabe später noch einmal ausführen müssen, können wir einfach die Funktion aufrufen, anstatt den gesamten Code erneut zu schreiben.

      Hier ist ein Beispiel: Wenn wir einen Taschenrechner programmieren, können wir eine Funktion "addiere" schreiben, die zwei Zahlen addiert und das Ergebnis zurückgibt. Dann können wir diese Funktion immer wieder aufrufen, um verschiedene Zahlen zu addieren.


      In diesem Beispiel nehmen wir zwei Zahlen als Parameter (in diesem Fall 5 und 7), addieren sie innerhalb der Funktion und geben das Ergebnis zurück. Wenn wir die Funktion aufrufen, speichern wir das Ergebnis in einer Variablen namens "summe".


      Wir nehmen unser Raten-Spiel und versuchen den Quellcode mit Hilfe von Funktionen lesbare zu machen.

      Beginnen wir mit der Funktion für die Startwerte:




      In der nächsten Funktion geht es schon ums Spiel:


      In der Funktion playGame() liegt die Schleife, die dafür sorgt, dass gespielt wird, bis die Zahl geraten wurde. Und so bleibt nur noch eine Zeile für die letzte Funktion:



      Du fragst dich wahrscheinlich, wo all diese Funktionen im Quellcode stehen sollten. Tatsächlich spielt die Position der Funktionen fast keine Rolle. Wichtig ist jedoch, dass sie keinesfalls innerhalb der if-else Struktur stehen dürfen und natürlich außerhalb des <script>-Tags. Ich habe alle drei Funktionen ganz am Ende definiert (kurz bevor der </script>-Tag geschlossen wurde).



      Zum Schluss müssen alle drei Funktionen natürlich aufgerufen werden. Wir rufen die Funktionen innerhalb der if-else-Struktur auf, wenn der Spieler zum Spielen mit "Ja" antwortet.



      Zusätzlich definieren wir die Variable "versuche" jetzt vor dem Aufruf der Funktionen. Alle drei Funktionen benötigen die Variable "versuche" und haben keinen Zugriff auf die anderen Funktionen. Stell dir vor, was passiert, wenn wir "versuche" nur in der "innitGame()" Funktion definieren - dann können "playGame()" und "endGame()" diese Variable nicht mehr benutzen und das Programm stürzt ab. Achte darauf, dass kein "var" vor "versuche" in der "innitGame()" Funktion mehr steht.



      So und nun bist du dran. Vielleicht ist es am besten, mal wieder ein neues Projekt zu erstellen. Dort tippe alles ein und probiere den Code aus!

    • Icon Aufgabe
      Aufgabe 5