Javascript Counter?

Hallo ich habe in JavaScript ein kleines Spiel gebastelt und möchte nun einen Counter einbauen der angehalten werden kann, mit einem Schieberegler eingestellt werden kann und wenn er auf 0 oder drunter ist wieder von vorne los geht, meine versuche haben überhaupt nicht gut funktioniert und jetzt habe ich keine Ahnung mehr wie ich das hin bekommen kann, gibt es da eine gute Lösung?

Answer 1

[regex9]

Für einen automatischen Zähler kannst du die setInterval-Funktion nutzen. Diese ruft alle x Millisekunden eine Funktion auf, die den Zählerwert dekrementiert.

Um den aktuellen Zählerwert zu speichern, brauchst du eine Variable. Zudem wäre eine weitere Variable hilfreich, die den Startwert kennt, damit der Zähler wieder zurückgesetzt werden kann.

function count() {
  --counter;

  if (counter <= 0) {
    counter = counterStart;
  }
}

let counterStart = // some start value ...
let counter = 0;

setInterval(count, 1000);

Die visuelle Ausgabe des Zählers überlasse ich dir, zumal du besser weißt, wo du in ausgeben lassen möchtest.

Das Intervall kann man anhalten, sofern man eine Referenz darauf besitzt.

let timer;

// start
timer = setInterval(count, 1000);

// stop
if (timer) {
  clearInterval(timer);
  timer = null;
}

Da das Starten und Stoppen in zwei voneinander losgelösten Prozessen stattfinden dürfte, sollte die Referenz auf das Intervall in einer globalen Variable gespeichert werden. Bevor man versucht, sie zu nutzen, sollte geprüft werden, ob sie aktuell existiert.

Bezüglich des Schiebereglers müsstest du erst einmal schauen, wie du den überhaupt umsetzt. Man kann sich eine solche Komponente für ein Rendering innerhalb eines canvas-Elements / eines WebGL-Kontexts bauen oder aber man nutzt das HTML-Eingabefeld dafür. In jedem Fall sollte der Regler ein Event triggern, sobald sich sein Wert ändert. Mit einem Event Listener kann man sich an das Element hängen und dieses Event abfangen.

Beispiel mit dem range-Feld:

<input max="5" min="0" id="init-counter" step="1" type="range" value="0">
<script>
  let counterStart = 0;

  /* ... */

  const initCounterField = document.getElementById("init-counter");
  initCounterField.addEventListener("input", () => {
    counterStart = parseInt(initCounterField.value);
  });
</script>

Zu berücksichtigen ist, dass diese Implementation so auch erlaubt, den positiv-maximalen Zählerwert mittendrin zu ändern. Um das zu unterbinden, könnte man nach Start des automatischen Zählers das Eingabefeld deaktivieren:

initCounterField.setAttribute("disabled", "");

oder man prüft, ob der Zähler aktuell läuft.

if (!timer) {
  // set counter start ...
}