JavaScript Games

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

Zuerst muss CSS-Code für die Hindernisse geschrieben werden. Wichtig ist dabei, dass diese absolut positioniert werden.

Um die Hindernisse zu generieren, kann zum Beispiel der Timer (siehe Kapitel Timer) verwendet werden. Im Beispiel wird immer nach 30 Frames (2x pro Sekunde) ein Hindernis generiert.

Die Hindernisse werden mit dem Befehl createElement generiert. Die neu generierten Elemente müssen dabei die Klasse, die in CSS definiert wurde, haben.

Um die neuen Hindernisse zu positionieren, können die üblichen Methoden zur Positionierung verwendet werden.

Meist müssen Hindernisse automatisch bewegt werden. Dazu müssen sie mit querySelectorAll ausgewählt werden, und dann ihre Position abgeändert werden. Wichtig: Das Beispiel bewegt die Elemente nach unten. Eventuell muss die Bewegungsrichtung angepasst werden.

Um die Elemente zu entfernen, sobald sie ausserhalb des Spielfelds sind, kann ihre Position gemessen werden. Sie werden dann entfernt, sobald eine gewisse Maximaldistanz überschritten wurde.

Vorschau

game.css

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

.stein {
  position: absolute;
  width: 20px;
  height: 20px;
  background-color: gray;
}

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 spielfeld = document.querySelector('.playground')

var timer = new Timer(30)

function loop() {
  if(timer.ready()) {
    var h = document.createElement('div')
    h.classList.add('stein')
    h.style.top = '0px'
    h.style.left = '100px'
    spielfeld.appendChild(h)
  }

  var steine = document.querySelectorAll('.stein')
  for(var stein of steine) {
    stein.style.top = parseInt(stein.style.top) + 5 + 'px'
    if(parseInt(stein.style.top) > 400) {
      stein.parentNode.removeChild(stein)
    }
  }

  window.requestAnimationFrame(loop)
}

window.requestAnimationFrame(loop)