Galgenmännchen 2

So funktioniert das Script

Das Spiel hat zwei große Funktionen: vorbereitung() baut eine neue Runde auf — Wort auswürfeln, Lücken zeichnen, Buchstabentasten erzeugen, alle Zähler zurücksetzen —, und rate() wertet einen angeklickten Buchstaben aus. Dazwischen liegt eine Handvoll Variablen, die den Spielstand festhalten: das gesuchte Wort, die bereits getroffenen Buchstaben, die Zahl der übrigen Versuche und ein Merker, ob die Runde schon vorbei ist.

let momentan = woerter[Math.round(Math.random() * 44)];

Die Wortliste ist ein Array — eine nummerierte Liste — mit 45 Einträgen, die also die Nummern 0 bis 44 tragen. Math.random() liefert eine Zufallszahl zwischen 0 und 1, mal 44 und gerundet ergibt das einen dieser Plätze. Neue Wörter fügt ihr einfach in die Liste ein; denkt dann daran, die 44 anzupassen — oder ersetzt sie gleich durch woerter.length - 1, dann stimmt sie immer.

let luecken = "";
for (let i = 0; i < momentan.length; i++) {
  luecken += "<span id='gm-z" + i + "'>_ </span>";
}
feldWort.innerHTML = luecken;

Für jeden Buchstaben des gesuchten Wortes entsteht ein eigenes <span> mit einem Unterstrich darin. Entscheidend ist die durchnummerierte id: Später weiß das Script dadurch genau, welche Lücke zu welcher Position im Wort gehört, und kann einen Treffer gezielt dort eintragen, ohne die anderen anzurühren.

for (let k = 0; k < momentan.length; k++) {
  if (momentan.charAt(k) === buchstabe) {
    document.getElementById("gm-z" + k).innerHTML = buchstabe;
    wo[(k + 1)] = buchstabe;
    h++;
  }
  …
}

Ein geratener Buchstabe wird gegen jede Stelle des Wortes geprüft — charAt(k) holt den Buchstaben an Position k. Passt er, wird die zugehörige Lücke gefüllt und der Buchstabe zusätzlich im Array wo vermerkt. Kommt derselbe Buchstabe mehrfach im Wort vor, werden in einem Durchgang auch alle Stellen aufgedeckt.

if (wo.join('') === momentan) {
  feldAnz.textContent = "Du hast gewonnen!";
  nix = 1;
}

So erkennt das Script den Sieg: join('') hängt alle Einträge des Arrays wo ohne Trennzeichen aneinander. Sind alle Stellen gefüllt, ergibt das genau das gesuchte Wort. Noch offene Plätze liefern beim Zusammenhängen eine leere Zeichenkette, der Vergleich schlägt dann fehl — eine schlichte, aber wirkungsvolle Lösung. nix ist der Merker, der die Runde beendet: Steht er auf 1, ignoriert rate() alle weiteren Klicks.

versuche--;
bild.src = bildpfad + (versuche + 1) + ".jpg";

Das Galgenmännchen ist keine Zeichnung, sondern eine Serie von Bildern. Bei jedem Fehlversuch sinkt der Zähler versuche, und aus seinem Wert wird der Dateiname des nächsten Bildes zusammengesetzt: Zu Beginn steht der leere Galgen 11.jpg, nach dem ersten Fehler erscheint 10.jpg, nach dem letzten 1.jpg mit dem fertigen Männchen. Wer eigene Zeichnungen verwenden will, muss also nur elf gleich benannte Dateien bereitstellen und den bildpfad ändern.

feldAlpha.addEventListener("click", function (ereignis) {
  if (ereignis.target.classList.contains("gm-taste")) {
    rate(ereignis.target.textContent);
  }
});

Die 26 Buchstabentasten entstehen erst beim Aufbau der Runde, man kann ihnen also nicht vorab einzeln einen Beobachter mitgeben. Stattdessen horcht ein einziger Beobachter am umgebenden Behälter auf Klicks und schaut nach, ob das angeklickte Element eine Buchstabentaste ist — dieses Verfahren heißt Ereignis-Delegation. Die Aufschrift der Taste ist zugleich der geratene Buchstabe.