JavaScripts › Spiele

Stoppe den Zähler

Ein Zähler rast los — stoppt ihn so nah wie möglich bei 500. Je kleiner der Abstand, desto besser.

Ziel dieses kleinen, aber feinen Spiels ist es, so nah wie möglich an die 500 heranzukommen. Wenn ihr auf „Start“ klickt, fängt der Zähler an zu laufen. Sobald er nah an der 500 ist, klickt ihr auf „Stop“ — und bekommt den Abstand zur 500 als Ergebnis angezeigt. Je kleiner euer Ergebnis ist, desto besser.

Wer schafft es, unter 10 zu bleiben — oder sogar unter 5? Eine glatte Null ist möglich, aber selten. Achtung: Je schneller euer Rechner ist, desto schwerer wird es. Der Zähler läuft mit dem kleinstmöglichen Zeitabstand, den der Browser zulässt, und der ist auf moderner Hardware sehr kurz.

Genau darin liegt der Reiz: Das Spiel misst weniger eure Reaktionszeit als euer Gefühl dafür, wie schnell die Zahlen in eurem Browser hochlaufen. Nach zwei, drei Runden habt ihr ein Tempo im Kopf und trefft deutlich besser. Stoppt ihr zu spät und der Zähler ist bereits über 1000 gelaufen, passiert nichts — dann lauft ihr weiter, bis ihr wieder im Bereich seid.

Wenn euch diese Art Spiel liegt, schaut auch beim Reaktionstest vorbei, der eure echte Reaktionszeit misst, oder bei Der längste Drücker, wo es umgekehrt aufs Warten ankommt. Reines Glück braucht ihr dagegen beim Glücks-Klick.

Spiele Baujahr 2006 läuft in deinem Browser

Ziel ist die 500. Angezeigt wird der Abstand dorthin — je kleiner, desto besser.

So funktioniert das Script

Das Script hat nur zwei Aufgaben: einen Zähler in festem Takt hochzählen und ihn auf Knopfdruck wieder anhalten. Dazwischen liegt eine kleine Rechnung, die aus dem erreichten Zählerstand die Punktzahl macht. Alles steckt in einer sofort ausgeführten Funktion, damit die Variablen nicht mit anderen Scripts auf der Seite kollidieren.

the_time = setInterval(function () {
  feld.value = Number(feld.value) + 1;
}, 1);

setInterval ruft eine Funktion immer wieder auf — hier alle 1 Millisekunde. Die Funktion liest den aktuellen Feldinhalt, macht mit Number() eine Zahl daraus und schreibt sie um eins erhöht zurück. Der Rückgabewert von setInterval landet in the_time; das ist eine Art Quittung, mit der man den Takt später wieder abbestellen kann. Der Wert 1 ist übrigens nur ein Wunsch: Browser bremsen solche Takte auf wenige Millisekunden ab, und wie stark, hängt vom Rechner ab. Genau deshalb läuft das Spiel auf jedem Gerät ein bisschen anders.

function startClock() {
  if (playing === false) { … }
  playing = true;
}

Die Variable playing merkt sich, ob gerade ein Takt läuft. Ohne diese Prüfung würde jeder weitere Klick auf „Start“ einen zusätzlichen Takt starten — der Zähler liefe dann doppelt und dreifach so schnell, und der alte Takt wäre nicht mehr abzuschalten, weil the_time längst überschrieben wäre. Solche Merker nennt man „Flag“ oder Zustandsvariable; in Spielen sind sie das übliche Mittel, um zu wissen, in welcher Phase man gerade ist.

const score = Math.abs(Number(feld.value) - 500);
if (playing === true && score < 500) {
  clearInterval(the_time);

Math.abs liefert den Betrag, also den Abstand ohne Vorzeichen: 480 und 520 ergeben beide die Punktzahl 20. clearInterval(the_time) stoppt den Takt wieder. Die Bedingung score < 500 ist die kleine Eigenheit des Spiels: Solange der Zähler noch bei 0 steht oder schon über 1000 hinaus ist, ist der Abstand 500 oder größer, und der Stop-Knopf tut schlicht nichts.

if (score === 0) {
  ausgabe.innerHTML += " Oha… Sehr gut! Besser geht es nicht.";
}

Der Punktestand wird in die Ergebnisfläche geschrieben, bei einer perfekten Null kommt ein Extralob dahinter. Das += hängt den Text an das an, was schon dort steht. Zum Anpassen: Die Zielzahl 500 steht an zwei Stellen — in der Rechnung und in der Abbruchbedingung. Wer beide auf denselben Wert ändert, hat sofort ein Spiel mit anderem Ziel; ein kleineres Ziel wie 200 macht die Sache spürbar schwerer.

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