JavaScripts › Spiele

Zahlenraten

Der Computer denkt sich eine Zahl zwischen 0 und 49 aus — ihr ratet, das Script sagt nach jedem Tipp „Höher!“ oder „Niedriger!“.

Zahlenraten ist der Klassiker unter den Ratespielen und war schon auf den ersten Heimcomputern zu finden: Der Computer denkt sich eine Zahl aus, ihr ratet — und nach jedem Versuch bekommt ihr den Hinweis, ob die gesuchte Zahl höher oder niedriger liegt. Hier ist der Bereich auf 0 bis 49 eingestellt.

Zum Spielen drückt ihr zuerst auf „Start/Neustart“ — dann denkt sich das Script eine neue Zahl aus. Eure Vermutung tippt ihr entweder direkt ins Feld oder klickt sie euch über die Zifferntasten zusammen; die Ziffern werden dabei hinten angehängt, aus einer 1 und einer 7 wird also die 17. Ein Klick auf „Raten“ wertet den Tipp aus: Unter der Meldung seht ihr den Hinweis „Höher!“ oder „Niedriger!“ und daneben, wie oft ihr schon geraten habt.

Wer das Spiel nicht auf gut Glück angeht, braucht erstaunlich wenige Versuche. Die beste Strategie ist das Halbieren: Fangt in der Mitte an (also bei 25). Heißt es „Höher!“, liegt die Zahl zwischen 26 und 49, ihr ratet als Nächstes 37 — und halbiert so bei jedem Schritt den verbleibenden Bereich. Bei 50 möglichen Zahlen seid ihr damit spätestens nach sechs Versuchen am Ziel, denn sechsmal Halbieren führt von 50 auf unter eine Zahl. Informatiker nennen dieses Vorgehen binäre Suche, und es steckt in jedem Nachschlagewerk und jeder Datenbank.

Eine Besonderheit hat dieses Script bei der Zufallszahl: Es benutzt nicht nur Math.random(), sondern rechnet mit dem Sinus der aktuellen Uhrzeit in Millisekunden. Wie das funktioniert, steht weiter unten in der Erklärung.

Wenn euch das Raten gefällt: Es gibt bei uns noch eine zweite Variante unter Zahlenraten 2, das Farbraten Mastermind und im Fach Mathematik den Gedankenleser Denk dir eine Zahl.

Spiele Baujahr 2004 läuft in deinem Browser

Die Zahl ist — du hast bisher 0 mal geraten.

So funktioniert das Script

Das Spiel besteht aus drei Bausteinen: einer Funktion, die sich die geheime Zahl ausdenkt (Random), einer Funktion, die eine neue Runde startet (Init), und einer Funktion, die einen Tipp auswertet (Game). Alles zusammen steckt in einer sofort ausgeführten Funktion, damit die Variablen des Spiels nicht mit anderen Scripts auf der Seite kollidieren.

function Random() {
  const today = new Date();
  const num = today.getTime();
  return Math.round(Math.abs(Math.sin(num) * 1000000)) % limit;
}

Das ist der eigenwillige Zufallsgenerator des Originals. new Date().getTime() liefert die aktuelle Uhrzeit als Anzahl der Millisekunden seit dem 1. Januar 1970 — eine riesige, ständig wachsende Zahl. Davon wird der Sinus genommen: Math.sin() liefert einen Wert zwischen -1 und 1, der bei so großen Eingaben wild hin und her springt. Mal 1.000.000, davon der Betrag (Math.abs) und gerundet ergibt das eine große ganze Zahl, und % limit — der Rest bei der Division durch 50 — presst sie in den Bereich 0 bis 49. Der Rest-Operator % ist das übliche Werkzeug, um Zufallszahlen auf einen Bereich zu begrenzen.

Zum Anpassen: limit ganz oben bestimmt den Zahlenbereich. Setzt ihr es auf 100, wird zwischen 0 und 99 geraten — der Text „Ich denke mir eine Zahl zwischen 0 und …“ passt sich automatisch an, weil er mit (limit - 1) rechnet.

function Init() {
  RNumber = Random();
  RTries = 0;
  ...
}

Init ist der Neustart: Es holt eine frische Geheimzahl, stellt den Versuchszähler auf 0 und leert die Anzeigefelder. Die Funktion hängt am Knopf „Start/Neustart“ und wird außerdem einmal beim Laden der Seite aufgerufen, damit sofort gespielt werden kann.

if (tipp == RNumber) {
  ...
} else {
  richtung.textContent = (RNumber > tipp) ? "Höher!" : "Niedriger!";
}

Das Herz des Spiels. tipp kommt als Text aus dem Eingabefeld, RNumber ist eine Zahl — der lockere Vergleich == wandelt den Text vorher automatisch in eine Zahl um. Der Ausdruck mit dem Fragezeichen heißt Bedingungsoperator und ist eine Kurzform für „wenn … dann … sonst …“: Ist die gesuchte Zahl größer als der Tipp, erscheint „Höher!“, sonst „Niedriger!“.

tasten[k].addEventListener("click", function () {
  eingabe.value += this.getAttribute("data-ziffer");
});

So funktioniert das Zifferblock: Jede Taste trägt im HTML ein eigenes Attribut data-ziffer mit ihrer Ziffer. Beim Klick wird dieser Wert mit += hinten an den Feldinhalt angehängt — deshalb entsteht aus zwei Klicks auf „1“ die Zahl 11 und nicht 2. Attribute, die mit data- beginnen, darf man frei erfinden; sie sind der übliche Weg, um an einem Element eine kleine Information für das Script zu hinterlegen.

Eine Kleinigkeit hat das Original übrigens vergessen: Beim richtigen Tipp wird der Versuchszähler neben dem Spielfeld nicht mehr aktualisiert — die Zahl der Versuche steht dann nur noch im Glückwunschtext. Wer mag, schreibt in den if-Zweig einfach zusätzlich versuche.textContent = RTries; hinein.

Script für die eigene Homepage

Kopiert euch den kompletten Code und fügt ihn an der Stelle eurer Seite ein, an der das Script erscheinen soll. Er läuft ohne weitere Dateien und ohne fremde Server.

Mehr aus der Kategorie Spiele