Galgenmännchen

So funktioniert das Script

Das Script hat vier Aufgaben: ein Wort ziehen und als Sternenreihe anzeigen (mache_wort), einen geratenen Buchstaben prüfen und die Anzeige neu aufbauen (buchstabe_testen), kurz grün oder rot blinken (blink_gruen, blink_rot) und die Eingaben von Knöpfen und Tastatur entgegennehmen. Sein Gedächtnis — das gesuchte Wort, die schon getroffenen Stellen, die Zahl der Versuche — legt es dabei nicht in Variablen ab, sondern in unsichtbaren Formularfeldern. Das ist ein typischer Kniff aus der Zeit, in der das Script entstanden ist.

<input type="hidden" id="gm-wort" value="">
<input type="hidden" id="gm-versuche" value="10">
<input type="hidden" id="gm-erraten" value="">

Ein <input type="hidden"> ist ein Eingabefeld, das nicht angezeigt wird. Man kann es aber wie jedes andere Feld beschreiben und auslesen. Das Script benutzt drei davon als Merkzettel: gm-wort hält das gesuchte Wort in Kleinbuchstaben, gm-versuche die Restversuche und gm-erraten die Positionen der bereits getroffenen Buchstaben. Heute würde man dafür schlicht Variablen nehmen — für den Einstieg ist die alte Lösung aber anschaulich, weil man sich die Merkzettel im Browser-Werkzeugkasten ansehen kann.

const woerter = ["Fernseher", "Galgenmaennchen", "Sofakissen", …];
const zufallszahl = parseInt(Math.random() * woerter.length);
let wort2 = woerter[zufallszahl];

So wird gezogen: Math.random() liefert eine Zufallszahl zwischen 0 und knapp 1. Mal der Länge der Liste genommen ergibt das eine Zahl zwischen 0 und knapp 38; parseInt schneidet die Nachkommastellen ab. Übrig bleibt ein gültiger Platz in der Liste — der Rest ist ein simpler Zugriff über den Index. Wollt ihr eigene Wörter, ändert ihr genau diese Zeile mit der Liste; die Rechnung passt sich automatisch an, weil sie mit woerter.length arbeitet.

document.getElementById('gm-ausgabe-wort').value = "*";
while (m == 0)
{
  document.getElementById('gm-ausgabe-wort').value += " *";
  i++;
  if (i == (wort2.length - 1)) m = 1;
}

Danach wird die Anzeige gebaut: ein Stern für den ersten Buchstaben, dann so lange " *" angehängt, bis so viele Sterne dastehen wie das Wort Buchstaben hat. += heißt „hänge hinten an“. Die Schleife läuft, solange die Merkvariable m auf 0 steht — sobald genug Sterne da sind, wird sie auf 1 gesetzt und die Schleife endet. Man könnte das kürzer schreiben, aber so sieht man Schritt für Schritt, was passiert.

for (var i = 0; i < wort.length; i++)
{
  cut = wort.substr(i, 1);
  if (cut == buchstabe) count++;
}

Beim Raten geht das Script erst einmal Buchstabe für Buchstabe durch das Wort und zählt, wie oft der geratene Buchstabe darin vorkommt. substr(i, 1) schneidet genau ein Zeichen an der Stelle i heraus. Aus diesem count entsteht die Meldung darunter: bei eins „es ist ein 'E' im Wort enthalten“, bei mehr „gibt es das 'E' 3mal“.

for (var i = 0; i < wort.length; i++)
{
  if (wort_array[i] == erraten_array[i]) array_show[i] = erraten_array[i];
  else array_show[i] = "*";
}
document.getElementById('gm-ausgabe-wort').value = array_show.join(" ").toUpperCase();

Das ist der Kern der Anzeige. Das Script merkt sich nicht die Buchstaben, sondern die Stellen, an denen schon etwas aufgedeckt wurde. Für jede Position im Wort wird gefragt: Ist diese Stelle bereits aufgedeckt? Wenn ja, kommt der echte Buchstabe in die Anzeigeliste, sonst ein Stern. join(" ") klebt die Liste mit Leerzeichen dazwischen zu einer Zeichenkette zusammen, toUpperCase() macht Großbuchstaben daraus. Deshalb steht in der Anzeige T A S C H * * * * * * * * und nicht tasch********.

function blink_gruen() {
  const feld = document.getElementById("gm-ausgabe-wort");
  feld.style.border = "3px solid #00dF00";
  window.setTimeout(function () { feld.style.border = "3px solid #ffffff"; }, 200);
}

Die Rückmeldung fürs Auge: Der Rahmen wird sofort grün gefärbt, und setTimeout merkt sich eine Funktion, die 200 Millisekunden später ausgeführt wird und den Rahmen wieder weiß macht. Das Ergebnis ist ein kurzes Aufblinken. Im Original stand hier statt der Funktion eine Zeichenkette mit JavaScript-Code darin — das funktioniert zwar noch, gilt aber als unsicher und schlecht lesbar, deshalb steht heute eine richtige Funktion darin. Wer andere Farben mag, ändert einfach die Hex-Werte; #00dF00 ist Grün, #ff0000 Rot.

"abcdefghijklmnopqrstuvwxyz".split("").forEach(function (buchstabe) {
  const knopf = document.createElement("button");
  knopf.type = "button";
  knopf.textContent = buchstabe.toUpperCase();
  knopf.addEventListener("click", function () { buchstabe_testen(buchstabe); });
  tasten.appendChild(knopf);
});

26 Knöpfe von Hand ins HTML zu schreiben wäre mühsam, also erledigt das Script es selbst: split("") zerlegt das Alphabet in einzelne Buchstaben, forEach geht sie durch, und für jeden entsteht mit document.createElement ein neuer Knopf, der per appendChild ins Tastenfeld gehängt wird. Jeder Knopf bekommt dabei seinen eigenen Klick-Handler, der genau „seinen“ Buchstaben weiterreicht.

function tastendruck(e) {
  const ereignis = e.which || e.keyCode;
  for (let test = 97; test <= 122; test++) {
    if (ereignis === test) { buchstabe_testen(String.fromCharCode(test)); }
  }
  if (ereignis === 32) mache_wort();
}
document.addEventListener("keypress", tastendruck);

Auch die Tastatur wird abgehört. Jede Taste hat eine Nummer: 97 bis 122 sind die kleinen Buchstaben a bis z, 32 ist die Leertaste. String.fromCharCode macht aus der Nummer wieder den Buchstaben, der dann genauso geprüft wird wie ein Klick auf den Knopf. Wollt ihr das Spiel schwerer machen, setzt ihr die 10 in document.getElementById('gm-versuche').value = 10; herunter — bei fünf Versuchen wird es merklich sportlicher.