Simon — die Farbfolge

So funktioniert das Script

Das Spiel wechselt zwischen zwei Zuständen: Der Rechner spielt vor, oder er wartet auf Eingaben. Diesen Wechsel sauber hinzubekommen ist die eigentliche Aufgabe.

folge.forEach(function (nummer, i) {
  setTimeout(function () {
    aufleuchten(nummer, takt * 0.6);
  }, i * takt);
});

Statt eine Schleife mit Pausen zu bauen — was in JavaScript gar nicht möglich ist, weil es kein Warten gibt —, werden alle Wecker auf einmal gestellt: der erste nach null Millisekunden, der zweite nach einem Takt, der dritte nach zweien. Die Multiplikation mit dem Schleifenindex erzeugt die Staffelung. Dieses Muster begegnet euch überall dort, wo etwas nacheinander ablaufen soll.

Die Leuchtdauer ist mit 60 Prozent des Takts bewusst kürzer als der Abstand — sonst ginge eine Farbe nahtlos in die nächste über, und zwei gleiche Farben hintereinander wären nicht zu unterscheiden.

let annehmen = false;
…
setTimeout(function () {
  annehmen = true;
  …
}, folge.length * takt + 150);

Solange vorgespielt wird, ist die Eingabe gesperrt. Ohne diese Sperre könnte man während des Vorspielens mittippen, und das Spiel geriete aus dem Takt. Der Wecker, der sie wieder öffnet, wird auf das Ende der ganzen Folge gestellt, plus einer kleinen Pause zum Durchatmen.

if (folge[position] !== nummer) { … }
position++;
if (position === folge.length) { … }

Der Vergleich läuft Schritt für Schritt statt am Ende: Jeder Tastendruck wird sofort mit der erwarteten Farbe an dieser Stelle verglichen. Das ist nicht nur einfacher, sondern auch spielgerecht — der Fehler soll ja sofort auffallen und nicht erst nach der zwölften Eingabe. Erreicht position die Länge der Folge, war alles richtig.

{ name: "gruen", klasse: "sf-gruen", ton: 392.00 },   // g
{ name: "rot",   klasse: "sf-rot",   ton: 329.63 },   // e
{ name: "gelb",  klasse: "sf-gelb",  ton: 261.63 },   // c
{ name: "blau",  klasse: "sf-blau",  ton: 196.00 }    // G

Die vier Töne sind nicht beliebig gewählt: Sie spannen eine Oktave vom tiefen G (196 Hz) bis zum g (392 Hz) und bilden zusammen einen C-Dur-Klang — G, c, e und g. Dadurch klingt jede zufällige Folge halbwegs musikalisch statt wie ein Fehlalarm — im Original war das genauso gelöst. Nebenbei hilft es beim Merken, denn Tonfolgen bleiben besser haften als Farbfolgen.

return Math.max(200, 700 - folge.length * 25);

Beim steigenden Tempo wird der Takt mit jeder Runde um 25 Millisekunden kürzer. Math.max zieht eine Untergrenze ein — ohne sie würde der Takt irgendwann null oder negativ, und die ganze Folge erschiene auf einen Schlag.

taste.setAttribute("aria-label", farben[i].name);

Die vier Tasten haben keinen Text, nur Farbe. Für Vorleseprogramme wären sie damit vier namenlose Knöpfe. Das aria-label gibt ihnen einen Namen — eine Zeile, die das Spiel für einen Teil der Besucher überhaupt erst benutzbar macht. Für Farbfehlsichtige hilft zusätzlich, dass jede Taste ihren eigenen Ton hat.

Zum Anpassen: Mehr Farben machen das Spiel deutlich schwerer — dafür ergänzt ihr das Farben-Array, die Rasterspalten im Stylesheet und die 4 in Math.random() * 4. Eine Variante, bei der der Spieler die Folge nach jeder Runde verlängern darf und der Rechner nachtippen muss, ist mit derselben Logik zu haben.