JavaScripts › Fun

Gedankenleser

Denkt euch eine Zahl zwischen 1 und 63 — nach sechs Ja/Nein-Fragen zu sechs Zahlenkarten nennt euch das Script eure Zahl.

Denkt euch eine Zahl zwischen 1 und 63 aus, und der Gedankenleser findet sie heraus. Das Script stammt im Original von Darren Cummings und funktioniert wie der klassische Zahlenkarten-Trick vom Jahrmarkt: Nacheinander werden euch sechs Karten voller Zahlen gezeigt, und ihr verratet jeweils nur, ob eure Zahl auf der Karte steht oder nicht.

Zum Ausprobieren klickt ihr auf „Start". Es erscheint die erste Karte — antwortet ehrlich mit „Ja" oder „Nein", je nachdem, ob eure gedachte Zahl darauf abgebildet ist. Nach der sechsten Karte präsentiert euch das Script eure Zahl. Mit „Neustart" könnt ihr sofort noch einmal spielen.

Der Trick dahinter ist reine Mathematik: Jede Karte steht für eine Stelle der Zahl im Binärsystem. Auf Karte eins stehen alle Zahlen, in deren Binärdarstellung die Eins vorkommt, auf Karte zwei alle mit der Zwei, dann Vier, Acht, Sechzehn und Zweiunddreißig. Wer bei einer Karte „Ja" sagt, verrät damit ein Bit seiner Zahl — und aus sechs Bits lässt sich jede Zahl von 1 bis 63 eindeutig zusammensetzen. Wie das genau funktioniert, zeigt der Code-Walkthrough weiter unten.

Einen weiteren Gedankenleser nach demselben Prinzip findet ihr unter Gedanken lesen im Mathematik-Fach; dort steht auch das Zahlenspiel Denk dir eine Zahl. Und wer lieber mit Spielkarten verblüfft wird, probiert unseren Kartentrick.

Fun Baujahr 2004 läuft in deinem Browser

Drücke Start

Script von Darren Cummings

So funktioniert das Script

Das Script ist ein kleiner Zustandsautomat: Es merkt sich, ob das Spiel bereit, im Gange oder fertig ist, zeigt nacheinander sechs vorbereitete Karten an und addiert bei jedem „Ja" den Wert der aktuellen Karte. Am Ende ist die Summe genau die gedachte Zahl.

const karten = [
  "      KARTE EINS      \n  1  3  5  7  9 11 13 15 \n ...",
  ...
];
const werte = [1, 2, 4, 8, 16, 32];

Die sechs Karten sind schlichte Zeichenketten. Das \n darin ist ein sogenanntes Escape-Zeichen und bedeutet Zeilenumbruch — so entsteht in der Textarea das Zahlenraster. Damit die Spalten sauber untereinanderstehen, wird die Karte in einer Schrift mit fester Zeichenbreite (Monospace) angezeigt. Das Array werte enthält zu jeder Karte ihren Wert: die Zweierpotenzen 1, 2, 4, 8, 16 und 32 — zugleich jeweils die erste Zahl oben links auf der Karte.

function naechsteKarte() {
  if (index === 6) {
    ende();
    return;
  }
  karte.value = karten[index];
  karte.style.backgroundColor = farben[index];
  ...
  index++;
}

naechsteKarte() blättert weiter: Solange noch Karten übrig sind, schreibt sie den Kartentext per value in die Textarea und färbt deren Hintergrund über style.backgroundColor — jede Karte hat ihre eigene Farbe. Der Zähler index wandert dabei um eins weiter; steht er auf 6, sind alle Karten durch und ende() übernimmt.

document.getElementById("gl-ja").addEventListener("click", function () {
  if (zustand !== 1) return;
  summe = summe + werte[index - 1];
  naechsteKarte();
});

Hier steckt der ganze Trick. Sagt ihr „Ja", addiert das Script den Wert der gerade gezeigten Karte zur summe (index - 1, weil index schon auf die nächste Karte zeigt). Bei „Nein" wird nur weitergeblättert. Warum das funktioniert: Jede Zahl von 1 bis 63 lässt sich eindeutig als Summe der Zweierpotenzen 1, 2, 4, 8, 16, 32 schreiben — das ist ihre Binärdarstellung. Die 42 etwa ist 32 + 8 + 2, steht also genau auf den Karten sechs, vier und zwei. Eure Ja-Antworten verraten dem Script, welche Zweierpotenzen in eurer Zahl stecken, und die Addition setzt sie wieder zusammen.

let zustand = 0; // 0 = bereit, 1 = läuft, 2 = fertig

Die Variable zustand schützt vor Fehlbedienung: „Ja" und „Nein" reagieren nur, wenn das Spiel läuft (zustand === 1), und der Start-Knopf weiß dank ihr, ob er ein neues Spiel starten oder per neustart() alles zurücksetzen soll. neustart() setzt einfach alle Variablen auf ihre Anfangswerte und stellt Text und Farben der Textarea wieder her.

Zum Anpassen: Die Meldungstexte in startText, ende() und neustart() könnt ihr frei umformulieren, und im Array farben lassen sich die Kartenfarben ändern — erlaubt sind CSS-Farbnamen wie "green" oder Hex-Codes wie "#FF7777". Die Zahlen auf den Karten solltet ihr dagegen nicht verändern, sonst rechnet der Gedankenleser falsch. Übrigens: Das Original von 2004 blockierte zusätzlich das Kontextmenü der rechten Maustaste, damit niemand den Quelltext ansieht — diesen Uralt-Trick haben wir beim Modernisieren weggelassen.

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 Fun