JavaScripts › Spiele

Game Over Game

Zehn Sekunden, ein Knopf: Wie oft schafft ihr es zu klicken, bevor die Zeit abgelaufen ist?

Dieses kleine Spiel von unserem User Surflam ist schnell erklärt: Beim Aufruf der Seite läuft ein Countdown von zehn Sekunden, und in dieser Zeit klickt ihr so oft wie möglich auf den Knopf. Auf dem Knopf steht immer der aktuelle Stand, nach Ablauf der Zeit erscheint darunter das Ergebnis. Nützlich ist das nicht, aber als kurze Ablenkung zwischendurch taugt es allemal.

Weil der Countdown schon mit dem Laden der Seite beginnt, seid ihr beim ersten Besuch meist mitten in einer Runde, ohne es zu merken. Für einen sauberen Anlauf drückt ihr nach dem Ergebnis einfach auf „Nochmal" — dann startet die Zeit von vorn und der Zähler beginnt wieder bei eins. Eine Eigenheit des Originals haben wir dabei gelassen: Der Zähler startet bei 1 statt bei 0, die angezeigte Zahl liegt also immer um eins über der tatsächlichen Zahl der Klicks.

Der Autor hat unten in seinem Script auch gleich den passenden Trick verraten: Wer den Knopf mit der Tabulatortaste anspringt und dann die Eingabetaste gedrückt hält, lässt die Tastaturwiederholung für sich klicken und kommt auf Zahlen, die mit der Maus kaum zu erreichen sind. Fair ist das nicht — aber Surflam schreibt selbst dazu, man möge darüber nachdenken.

Wenn ihr Spiele mögt, bei denen es auf Schnelligkeit ankommt: Bei Der längste Drücker zählt die Dauer statt der Anzahl, der Reaktionstest misst eure Reaktionszeit, und bei Stoppe den Zähler müsst ihr im richtigen Moment auf die Bremse treten.

Spiele Baujahr 2008 läuft in deinem Browser

Der Countdown startet, sobald die Seite geladen ist — ihr seid also schon mittendrin. Mit „Nochmal" beginnt eine frische Runde.

Eingesandt von Surflam

So funktioniert das Script

Das ganze Spiel besteht aus drei kurzen Funktionen: eine zählt die Klicks, eine beendet die Runde nach zehn Sekunden, und eine setzt alles für einen neuen Versuch zurück. Verbunden werden sie über einen Zeitgeber und zwei Klick-Empfänger.

let Zaehler = 1;

function zahl() {
  Zaehler++;
  knopf.textContent = Zaehler;
}

Das ist der Kern des Spiels. Zaehler steht außerhalb der Funktion, behält seinen Wert also zwischen zwei Klicks — eine Variable innerhalb der Funktion würde bei jedem Aufruf neu bei ihrem Startwert beginnen. Mit ++ wird der Wert um eins erhöht, und textContent schreibt ihn als Aufschrift auf den Knopf.

uhr = setTimeout(game_over, 10000);

setTimeout merkt sich eine Funktion und ruft sie nach der angegebenen Zeit in Millisekunden auf — 10000 Millisekunden sind zehn Sekunden. Wichtig ist die Schreibweise: Hier steht game_over ohne Klammern. Mit Klammern würde die Funktion sofort ausgeführt und ihr Rückgabewert an setTimeout übergeben. Das Original übergab an dieser Stelle einen Text ("game_over()"), den der Browser später auswerten musste — das gilt heute als unsicher und langsam und sollte nicht mehr verwendet werden. Wer lieber 20 Sekunden Zeit hätte, ändert die Zahl auf 20000.

function game_over() {
  knopf.disabled = true;
  ausgabe.textContent = "Du hast in 10 Sekunden " + Zaehler + " Mal geklickt!";
  nochmal.hidden = false;
}

Nach Ablauf der Zeit sperrt disabled den Knopf, das Ergebnis erscheint in der Ausgabefläche, und der Knopf für eine neue Runde wird sichtbar. Das Original zeigte das Ergebnis in einem alert()-Fenster an und ließ den Zählknopf danach einfach weiterlaufen; die Ausgabe direkt auf der Seite ist angenehmer und macht deutlich, dass die Runde vorbei ist.

function neuesSpiel() {
  clearTimeout(uhr);
  Zaehler = 1;
  knopf.textContent = "zahl";
  knopf.disabled = false;
  uhr = setTimeout(game_over, 10000);
}

Für eine neue Runde wird alles auf den Anfangszustand zurückgesetzt. clearTimeout stoppt dabei einen eventuell noch laufenden Zeitgeber — dafür hat sich das Script beim Start die Nummer der Zeitschaltung in uhr gemerkt. Ohne diesen Schritt könnten sich zwei Countdowns überlagern und die Runde vorzeitig beenden.

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