JavaScript Games

Der Code für den Timer baut auf dem Grundgerüst auf. Es sollte also grob diese Struktur vorhanden sein.

Damit der Timer verwendet werden kann, muss eine externe Javascript-Datei eingebunden werden. Wichtig: die Datei muss vor der eigenen JS-Datei eingebunden sein.

Zuerst muss ein Timer erstellt werden. Dies geschieht vor dem Game-Loop. In Klammern bestimmt man, alle wie viele Durchgänge des Game-Loops der Timer laufen soll. 60 bedeutet alle 60 Schritte oder 1x pro Sekunde. 15 bedeutet alle 15 Schritte, oder 4x pro Sekunde.

Im Game-Loop wird der Timer dann mit der ready()-Funktion abgefragt. So kann dann beliebiger Code ausgeführt werden.

Vorschau

game.css

.player {
  position: absolute;
  background-color: red;
  width: 20px;
  height: 20px;
}

game.html

<div class="playground">
  <div class="player"></div>
</div>

<script src="https://jsgame.bbz.cloud/scripts/v1/timer.js"></script>
<script src="game.js"></script>

game.js

var spieler = document.querySelector('.player')

var timer = new Timer(30)

function loop() {
  if(timer.ready()) {
    spieler.style.left = parseInt(spieler.style.left) + 10 + 'px'
  }

  window.requestAnimationFrame(loop)
}

window.requestAnimationFrame(loop)