JavaScripts › Spiele

Buchstaben zählen

Schätzspiel: Wie oft steckt ein bestimmter Buchstabe in einem vorgegebenen Satz?

Bei diesem Script von unserem User Potterfans geht es ums Schätzen: Ein Satz steht da, ein Buchstabe ist gesucht — und ihr müsst sagen, wie oft er darin vorkommt. Tragt eure Vermutung in das Feld ein und klickt auf „Tipp abgeben". Das Script verrät euch dann, ob ihr richtig lagt, und bei einem Treffer auch die genaue Zahl.

Satz und Buchstabe stehen direkt am Anfang des Scripts in zwei Variablen und sind mit einem Kommentar markiert. Wenn ihr das Spiel auf eurer eigenen Seite einsetzt, könnt ihr dort beides austauschen — ein längerer Satz macht das Schätzen deutlich schwerer, ein seltener Buchstabe wie „q" dagegen sehr leicht. Gezählt wird genau so, wie ihr es vorgebt: Groß- und Kleinschreibung sind zwei verschiedene Dinge, ein großes „D" wird also nicht mitgezählt, wenn ihr nach „d" sucht.

Interessant ist, wie ungleich Buchstaben in deutschen Texten verteilt sind. Das „e" ist mit Abstand der häufigste, gefolgt von „n", „i", „s" und „r"; ein „q" oder „x" kommt dagegen in ganzen Absätzen oft kein einziges Mal vor. Genau diese Ungleichverteilung ist übrigens der Grund, warum beim Galgenmännchen erfahrene Spieler zuerst die Vokale raten.

Wer lieber Wörter als Buchstaben rät, findet bei uns das Galgenmännchen und das Buchstabenpuzzle. Ein weiteres Ratespiel von Potterfans ist Ich sehe was.

Spiele Baujahr 2009 läuft in deinem Browser

Eingesandt von Potterfans

So funktioniert das Script

Das Script ist kurz und tut drei Dinge: Es schreibt die Frage und den Satz auf die Seite, es zählt beim Klick die Buchstaben, und es vergleicht das Ergebnis mit eurem Tipp. Der eigentliche Trick steckt in einer einzigen Zeile — gezählt wird nämlich gar nicht in einer Schleife.

//Ab hier ändern
const satz = "Dies ist ein kurzer Text zum Suchen aller Buchstaben";
const letter = "i";

Ganz oben stehen die beiden Einstellungen, die der Autor bewusst mit einem Kommentar markiert hat. Alles, was das Spiel ausmacht, lässt sich hier ändern, ohne den Rest anzufassen. const bedeutet dabei: Dieser Wert wird während des Programmlaufs nicht mehr verändert — im Gegensatz zu let, das man später neu belegen darf.

document.getElementById("bz-frage").innerHTML =
  "Wie viele <strong>" + letter + "</strong>'s sind in diesem Satz?";
document.getElementById("bz-satz").textContent = satz;

Frage und Satz stehen nicht fest im HTML, sondern werden beim Laden hineingeschrieben — sonst müsstet ihr den Satz an zwei Stellen ändern. Der Unterschied zwischen den beiden Zeilen: innerHTML versteht HTML, deshalb wird der Buchstabe darin fett dargestellt. textContent setzt reinen Text ein und ist überall dort die sichere Wahl, wo gar kein HTML gebraucht wird.

const letters = satz.split(letter);
const laenge = letters.length - 1;

Das ist der Zähltrick. split() zerschneidet den Satz an jeder Stelle, an der der gesuchte Buchstabe steht, und liefert die Bruchstücke als Array zurück — also als nummerierte Liste. Bei drei „i" entstehen vier Stücke, bei fünf „i" sechs Stücke: Es gibt immer ein Bruchstück mehr als Schnitte. Deshalb steht hinter letters.length das - 1, und man kommt ganz ohne Schleife zum Ziel.

if (x === laenge) {
  ausgabe.textContent = "Genau, es sind " + laenge + " " + letter + "'s in dem Satz.";
} else {
  ausgabe.textContent = "Nein, es sind nicht " + x + " " + letter + "'s in diesem Satz.";
}

Der Vergleich mit === prüft Wert und Typ, deshalb wird die Eingabe vorher mit Number() in eine echte Zahl verwandelt — "3" als Text und 3 als Zahl wären für === sonst zwei verschiedene Dinge. Ist das Feld leer, meldet sich das Script freundlich, statt mit einer falschen Zahl zu rechnen.

Zum Anpassen: Neben Satz und Buchstabe lassen sich natürlich die beiden Antworttexte umschreiben. Wer es schwerer machen will, sucht statt eines Buchstabens gleich eine ganze Silbe — split() kommt auch mit const letter = "st"; zurecht und zählt dann die Vorkommen dieser Buchstabenfolge.

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