Der längste Drücker

So funktioniert das Script

Das Script hat drei Aufgaben: Es misst die Zeit, während die Maustaste unten ist, es vergleicht das Ergebnis mit dem bisherigen Bestwert, und es merkt sich diesen Bestwert über den Seitenbesuch hinaus. Der ganze Ablauf hängt an nur zwei Zahlen: z zählt die vergangenen Zehntelsekunden, und hallo ist ein Schalter, der angibt, ob die Maustaste noch gedrückt ist.

function fStarten() {
  if (hallo === 0) {
    z = z + 1;
    timer.textContent = z / 10;
    setTimeout(fStarten, 100);
  } else {
    ...
  }
}

Hier steckt der Kern: Die Funktion zählt z um eins hoch, zeigt den Stand an — geteilt durch 10, damit aus Zehnteln Sekunden werden — und trägt sich mit setTimeout(fStarten, 100) selbst für den nächsten Durchlauf in 100 Millisekunden ein. So entsteht eine Schleife, die sich immer wieder neu aufruft, bis die Bedingung nicht mehr stimmt. Wer feiner messen will, setzt die 100 auf 10 herunter und teilt entsprechend durch 100.

Ein Hinweis für Genaue: Diese Art zu zählen ist keine Stoppuhr. Jeder Durchlauf braucht selbst ein wenig Zeit, und der Browser darf einen Zeitgeber auch verspäten. Für ein Geduldsspiel reicht das völlig — für eine echte Messung würde man Anfang und Ende mit Date.now() festhalten und die Differenz bilden.

function fBeenden() {
  hallo = 1;
}

knopf.addEventListener("mousedown", fStarten);
knopf.addEventListener("mouseup", fBeenden);

Der Knopf bekommt zwei Zuhörer: mousedown feuert, sobald die Maustaste heruntergedrückt wird, mouseup beim Loslassen. Das Loslassen stoppt die Uhr nicht selbst — es setzt nur hallo auf 1. Der nächste Durchlauf von fStarten(), der ohnehin in höchstens 100 Millisekunden ansteht, sieht den umgelegten Schalter und geht statt ins Weiterzählen in den else-Zweig. Diese Trennung ist ein sauberer Trick: Der Zuhörer bleibt winzig, die ganze Auswertung steht an einer Stelle.

zwischenwert = z / 10;
if (zwischenwert > highscore) {
  highscore = zwischenwert;
  bestwert.textContent = highscore + " Sekunden";
  setCookie("bghs", highscore, "700", "0", "0");
}

Im else-Zweig wird abgerechnet: Aus den gezählten Zehnteln wird die Sekundenzahl, und die vergleicht das Script mit dem gespeicherten Rekord. Ist sie größer, wandert sie als neuer Bestwert in die Anzeige und in den Speicher. Danach werden z und hallo zurückgesetzt und der Knopf trägt wieder seine Einladungsbeschriftung — die nächste Runde kann beginnen.

function setCookie(nam, value, expd, exph, expm) {
  try {
    localStorage.setItem(nam, String(value));
  }
  catch (e) {}
}

Ursprünglich legte das Script den Bestwert in einem Cookie ab. Heute übernimmt das localStorage: ein kleiner Schlüssel-Wert-Speicher im Browser, der anders als ein Cookie nicht bei jedem Seitenaufruf mit zum Server geschickt wird. Die drei Parameter für die Ablaufzeit stehen nur noch aus alter Gewohnheit in der Klammer, damit die Aufrufe im übrigen Script unverändert bleiben durften — localStorage kennt kein Ablaufdatum. Das try … catch drumherum ist wichtig: In manchen Browsereinstellungen ist der Speicher gesperrt, und ohne diese Absicherung würde das ganze Spiel mit einem Fehler stehenbleiben. So passiert im Zweifel einfach nichts.

if (getCookie("bghs") === null) {
  setCookie("bghs", "0", "700", "0", "0");
  highscore = 0;
} else {
  bestwert.textContent = getCookie("bghs") + " Sekunden";
  highscore = parseFloat(getCookie("bghs"));
}

Diese Zeilen laufen einmal beim Laden der Seite. Steht noch nichts im Speicher, wird eine 0 abgelegt und auch die Variable highscore auf 0 gesetzt — sonst stünde beim allerersten Besuch undefined darin, und jeder Vergleich damit ist falsch, sodass bis zum nächsten Seitenaufruf kein Rekord anerkannt würde. Andernfalls wird der gespeicherte Text mit parseFloat() wieder in eine Zahl verwandelt, denn im Speicher liegt alles als Zeichenkette; ein Vergleich mit > würde sonst Zeichen für Zeichen statt der Größe nach vergleichen. Unter dem Schlüsselnamen "bghs" könnt ihr euren Rekord übrigens in den Entwicklerwerkzeugen des Browsers finden — und dort auch löschen, wenn ihr wieder bei null anfangen wollt.