JavaScripts › Spiele

Reaktionstest

Misst eure Reaktionszeit: Nach einer zufälligen Wartezeit wechselt die Farbe — dann so schnell wie möglich stoppen.

Dieses Script von Jasper van Zandbeek testet eure Reaktionszeit. Ihr klickt auf „Start“ und wartet, bis die graue Fläche ihre Farbe wechselt. Sobald das passiert, klickt ihr so schnell wie möglich auf „Stop“ — das Script rechnet aus, wie viele Sekunden zwischen dem Farbwechsel und eurem Klick lagen, und kommentiert das Ergebnis.

Der Clou ist die Wartezeit: Sie wird jedes Mal neu ausgewürfelt und liegt zwischen null und sechs Sekunden. Ihr könnt also nicht mitzählen und den Klick vorausplanen. Wer trotzdem zu früh drückt, wird als Schummler entlarvt — das Script merkt, dass der Farbwechsel noch gar nicht stattgefunden hat, und bricht die Runde ab.

Welche Farbe erscheinen soll, sucht ihr euch im Auswahlfeld selbst aus. Das ist mehr als Spielerei: Ein kräftiges Rot oder Pink fällt deutlich schneller auf als ein dunkles Olivgrün, und ihr könnt am eigenen Ergebnis ablesen, wie stark der Kontrast eure Reaktion beeinflusst. Zum Vergleich: Werte um 0,2 Sekunden gelten bei visuellen Reizen als guter Durchschnittswert für Erwachsene, unter 0,15 Sekunden wird es sportlich.

Wenn ihr Lust auf mehr Geschicklichkeit habt: Bei Stoppe den Zähler müsst ihr einen rasenden Zähler auf den Punkt anhalten, bei Der längste Drücker geht es umgekehrt um möglichst langes Warten, und Triff das Pünktchen fordert eure Zielsicherheit mit der Maus.

Spiele Baujahr 2004 läuft in deinem Browser

Klickt zuerst auf „Start“ und wartet, bis die Fläche ihre Farbe ändert. Sobald das geschehen ist, klickt auf „Stop“.

Eingesandt von Jasper van Zandbeek

So funktioniert das Script

Das Script besteht aus vier Teilen: einem Zufallsgenerator für die Wartezeit, einer Funktion, die nach dieser Wartezeit die Farbe umschaltet und die Uhr startet, einer Stopp-Funktion, die die verstrichene Zeit ausrechnet, und einer kleinen Bewertungsfunktion für den Kommentar. Zwei Merker halten fest, in welcher Phase das Spiel gerade ist.

let startPressed = false;
let bgChangeStarted = false;

Diese beiden Zustandsvariablen sind das Herz des Ablaufs. startPressed heißt „Start wurde gedrückt, die Wartezeit läuft“, bgChangeStarted heißt „die Farbe ist umgesprungen, jetzt zählt die Zeit“. Aus der Kombination beider ergibt sich, was ein Klick auf „Stop“ bedeutet: eine gültige Messung, ein Fehlstart oder ein Klick ins Leere.

timerID = setTimeout(startTest, 6000 * randNumber());

setTimeout führt eine Funktion einmalig nach einer Wartezeit in Millisekunden aus. randNumber() liefert eine Zahl zwischen 0 und 1, mal 6000 ergibt das eine zufällige Verzögerung von null bis sechs Sekunden. Wichtig ist die timerID: Mit ihr lässt sich der geplante Aufruf per clearTimeout wieder abbestellen — genau das passiert, wenn jemand zu früh auf „Stop“ klickt.

randSeed = (randMULTIPLIER * randSeed + randINCREMENT) % (1 << 31);
return ((randSeed >> 15) & 0x7fff) / 32767;

Das ist ein selbstgebauter Zufallsgenerator nach dem Muster „linearer Kongruenzgenerator“: Aus dem letzten Wert wird durch Multiplizieren, Addieren und Restbildung der nächste berechnet. Der Startwert (randSeed) sind die Sekunden der aktuellen Uhrzeit. Das Script stammt aus einer Zeit, in der man solchen Generatoren mehr traute als dem eingebauten Math.random() — heute würde man einfach Math.random() schreiben, und das dürft ihr hier gefahrlos tun.

const responseTime = (endTime.getTime() - startTime.getTime()) / 1000;

new Date() hält den Zeitpunkt fest, getTime() gibt ihn als Millisekunden seit dem 1. Januar 1970 zurück. Die Differenz zweier solcher Zahlen ist die verstrichene Zeit in Millisekunden; geteilt durch 1000 sind es Sekunden. Weil hier ohne Rundung gerechnet wird, seht ihr das Ergebnis mit allen Nachkommastellen — wer es kürzer mag, schreibt responseTime.toFixed(3) in die Ausgabe.

if (responseTime >= 0.10 && responseTime < 0.20)
  responseString = "Nicht übel!";

Die Bewertung ist eine Kette solcher Bereichsprüfungen, von „Sehr gut!“ unter 0,1 Sekunden bis „Bist Du eingeschlafen?“ ab einer Sekunde. Das ist die Stelle, an der sich das Script am leichtesten anpassen lässt: Ändert die Texte, verschiebt die Grenzwerte, und schon habt ihr einen strengeren oder gnädigeren Trainer. Auch die Farbliste im Auswahlfeld dürft ihr beliebig erweitern — es funktioniert jeder CSS-Farbname.

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