Zufallszahlen mit JavaScript – das erst kleine Kopfrechen-Spiel

Unser Ziel ist es, mit JavaScript Spiele zu programmieren. Bisher haben wir noch sehr wenige Befehle kennen gelernt um damit ein Spiel zu programmieren. Aber mit jedem weiterem Befehl und jeder neuen Möglichkeit ergeben sich weitere Optionen.

Unser erstes (sehr einfaches) Spiel ist Kopfrechnen gegen den Computer – der natürlich immer richtig liegt. Es ist also mehr ein Kontrollspiel, wie schnell man selber im Kopfrechnen ist.

Was wir bisher dazu kennen gelernt haben ist:

• wir können im Browserfenster etwas ausgeben
• wir können Berechnungen durchführen
• wir können in Variablen Inhalte speichern (hier brauchen wir Zahlen für unser Spiel)

Was fehlt uns noch für unser Spiel?

• Zufallszahlen
• die Möglichkeit das Ergebnis nicht sofort sichtbar anzuzeigen

Beides lernen wir in den folgenden Kapiteln kennen und können so unser erstes kleines Spiel umsetzen.

Zufallszahlen erzeugen

Kein Spiel kommt ohne einen zufälligen Ablauf und somit ohne Zufallszahlen aus. Wir lernen nun eine Methode mit dem Namen random() bei dem Objekt Math kennen. Bitte nicht vor den Begriffen Objekt und Methode erschrecken. Das Konzept der Objekte und Methoden wird später noch detailliert erklärt – das schöne ist, dass wir für den Anfang es einfach nutzen können und schon die Funktion erleben. Das typische ist die Verbindung des Objekts durch einen Punkt mit der gewünschten Methode. Wichtig ist die Schreibweise: Math muss mit einem Großbuchstaben geschrieben werden! Bitte darauf achten.

Schauen wir uns an, was wir als Ergebnis erhalten, wenn wir Math.random(); einfach ausführen.

let zahl1;
zahl1 = Math.random();
document.write(zahl1);

Super – bei jeder Programmausführung erhalten wir eine zufällige Zahl. Einfach den Browser öfters aktualisieren.

0.9818241106709276

Was hier auffällt, ist dass diese Zahl immer kleiner als 1 ist.

Laut der Definition von random() werden immer Zahlen zwischen 0 (einschließlich der 0) und kleiner als 1 erzeugt.

Für unser Spiel wollen wir nicht mit so kleinen Zahlen rechnen – noch nicht.

Wollen wir nun zufällige Zahlen zwischen 1 und 10 bekommen, dann müssen wir unserer Berechnung das mitgeben.

Schauen wir und den oberen Bereich an. Wir wollen Zahlen bis 10 (einschließlich der 10). Dazu müssen wir erst einmal unsere Zahl mit 10 multiplizieren:

let zahl1;
zahl1 = Math.random() * 10;
document.write(zahl1);

Wir bekommen nun bei mehrfacher Ausführung beispielweise folgende Ergebnisse:

9.106358920126576
1.9548571780009416
5.976975785034742
0.804473215124446

Um auch die 10 zu bekommen, müssen wir unser Ergebnis mit 1 addieren.

let zahl1;
zahl1 = Math.random() * 10 + 1;
document.write(zahl1);

Dadurch haben wir unseren Zahlenbereich zwischen 1 und 10, mit sowohl 1 wie auch maximal 10. Wollte man einen anderen Zahlenbereich der auch nicht unbedingt bei 1 anfangen sollte, gilt folgende Formel (der Vollständigkeit halber):

Math.random() * (Maximum - Minimum + 1) + Minimum;

Wir wollen natürlich unser Kopfrechenspiel einfach halten – es soll keine Nachkommazahlen geben. Hier gibt es bei unserem Objekt Math die Methode floor. Auch diese Methode können wir einfach anwenden ohne noch einen großen Einblick in Methoden und Objekte zu haben. Wichtig für uns ist nur, dass als Ergebnis von floor die nächstniedrigere Ganzzahl (sprich keine Nachkommastellen) zurückkommt (die Methode floor rundet Zahlen ab).

Jetzt können wir natürlich eine umständlichere Schreibweise nutzen, um für den Anfang es durchschaubar zu halten, wie z.B.

let zahl1;
let zahlganz;
zahl1 = Math.random() * 10 + 1;
zahlganz = Math.floor( zahl1 );
document.write(zahlganz);

Allerdings kann man unsere 2 neuen "Befehle" auch ineinander schachteln. Dann benötigen wir auch keine weitere Variable, die man extra definieren muss.

Der Code sieht wie folgt dann aus:

let zahl1;
zahl1 = Math.floor( Math.random() * 10 + 1 );
document.write(zahl1);

Das von Math.random() gelieferte Ergebnis wir der Methode Math.floor() übergeben (immer von hinten lesen) und dieses Ergebnis wird dann in unsere Variable zahl1 gespeichert.

Für unser Spiel wollen wir 2 Variablen, die wir dann Multiplizieren. Die einzelnen Zahlen und das Ergebnis der Multiplikation sollen direkt im Browser ausgegeben werden. Einfach erst selber probieren, bevor man sich die folgende Lösung ansieht!

let zahl1;
let zahl2;
let ergebnis;
zahl1 = Math.floor( Math.random() * 10 + 1 );
zahl2 = Math.floor( Math.random() * 10 + 1 );
ergebnis = zahl1 * zahl2;
document.write(zahl1 + ' * ' + zahl2 + ' = ' + ergebnis );

Das Spiel ist natürlich so nicht wirklich spannend, wenn das Ergebnis sofort mitangezeigt wird. Wie könnten das Ergebnis in der Browseranzeige nach unten schieben, dass der Spieler für die Lösung erst nach unten Scrollen muss. Etwas anderes bekommen wir mit unserem jetzigen Wissenstand noch nicht hin.

let zahl1;
let zahl2;
let ergebnis;
zahl1 = Math.floor( Math.random() * 10 + 1 );
zahl2 = Math.floor( Math.random() * 10 + 1 );
ergebnis = zahl1 * zahl2;
document.write(zahl1 + ' * ' + zahl2 + ' = ?');
document.write('

 jede Menge 
');
document.write(zahl1 + ' * ' + zahl2 + ' = ' + ergebnis );

Dieses Ergebnis soll erst nach einer Spieleraktion angezeigt werden. Jetzt kommen wir auch zu dem Punkt, dass wir die HTML-Ausgabe von unserer Ausgabe aus dem JavaScript-Programm trennen wollen. Die bisherige Ausgabe über document.write(); ist eine wenig praktikable Vorgehensweise. Wir wollen in einer bestehenden HTML-Datei Bereiche hinzufügen bzw. ersetzen können. Dazu benötigen wir das DOM (Document Object Model), das in den folgenden Kapiteln eingeführt wird.