Wörter erraten

So funktioniert das Script

Das Script hat vier Teile: Es wählt ein Zufallswort, blendet die Unterstriche animiert ein, wertet jeden Tastendruck aus und meldet am Ende Sieg oder Niederlage. Alles steckt in einer sofort ausgeführten Funktion, damit die Variablen nicht mit anderen Scripts auf der Seite kollidieren.

const wort = woerter[Math.floor(Math.random() * woerter.length)];
const anzeige = [];
for (let i = 0; i < wort.length; i++) {
  anzeige.push("_");
}

Math.random() liefert eine Zufallszahl zwischen 0 und 1; mal der Anzahl der Wörter und mit Math.floor() abgerundet ergibt das einen gültigen Index ins Array woerter. Das Array anzeige ist das Gedächtnis des Spiels: Es enthält für jede Stelle des Worts zunächst einen Unterstrich, der später durch den erratenen Buchstaben ersetzt wird.

function strich() {
  if (sichtbar < wort.length) {
    sichtbar++;
    wortFeld.textContent = anzeige.slice(0, sichtbar).join(" ");
    setTimeout(strich, 50);
  }
}

Die kleine Auftritts-Animation: strich() zeigt erst einen Unterstrich, dann zwei, dann drei — setTimeout(strich, 50) ruft die Funktion alle 50 Millisekunden erneut auf, bis alle Stellen sichtbar sind. slice(0, sichtbar) nimmt die ersten Einträge des Arrays, join(" ") setzt sie mit Leerzeichen dazwischen zu einem Text zusammen.

const buchstabe = ereignis.key.toUpperCase();
if (buchstabe.length !== 1 || gueltig.indexOf(buchstabe) === -1) return;

Der Tastendruck kommt als Ereignisobjekt herein. ereignis.key ist der moderne Weg, die gedrückte Taste auszulesen — das Original von 2009 brauchte dafür noch eine lange Tabelle mit Tastencodes für jeden einzelnen Buchstaben. toUpperCase() macht aus „a" ein „A", denn die Wörter sind in Großbuchstaben gespeichert. Sondertasten wie Shift oder Enter liefern mehr als ein Zeichen und fliegen über die Längenprüfung raus; alles, was nicht in der Buchstabenliste gueltig steht, wird ebenfalls ignoriert.

if (geraten.indexOf(buchstabe) !== -1) {
  statusFeld.textContent = "Den Buchstaben hatten wir schon.";
  return;
}

Das Array geraten merkt sich alle bereits getippten Buchstaben. indexOf() sucht darin und liefert -1, wenn nichts gefunden wurde — bei einer Wiederholung erscheint nur ein freundlicher Hinweis statt (wie im Original) eines alert()-Fensters.

for (let i = 0; i < wort.length; i++) {
  if (wort.charAt(i) === buchstabe) anzeige[i] = buchstabe;
}
wortFeld.textContent = anzeige.join(" ");

Bei einem Treffer läuft eine Schleife über alle Stellen des Worts. charAt(i) liefert den Buchstaben an Position i; stimmt er mit dem getippten überein, wird im anzeige-Array der Unterstrich an derselben Position ersetzt. So erscheint ein Buchstabe wie das „S" in „SONNE" gleich an allen Stellen. Sind keine Unterstriche mehr übrig (anzeige.indexOf("_") === -1), ist das Wort komplett und das Spiel gewonnen.

falscheBuchstaben.push(buchstabe);
fehlerFeld.innerHTML = "Falsche Buchstaben: " + falscheBuchstaben.length +
  " — <s>" + falscheBuchstaben.join("</s> <s>") + "</s>";

Falsche Buchstaben landen in einem eigenen Array und werden per innerHTML in <s>-Tags (durchgestrichen) ausgegeben — die Länge des Arrays ist zugleich der Fehlerzähler. Erreicht er maxFehler, setzt das Script vorbei auf true; ganz oben in taste() sorgt if (vorbei) return; dafür, dass danach keine Eingabe mehr angenommen wird.

Zum Anpassen: Tragt eure eigenen Begriffe in Großbuchstaben ins Array woerter ein — es dürfen beliebig viele sein. Mit maxFehler stellt ihr den Schwierigkeitsgrad ein, und die Meldungstexte für Sieg und Niederlage stehen als normale Zeichenketten im Script und lassen sich frei umformulieren.