JavaScript Games

Die Schwerkraft baut auf dem Grundgerüst auf. Es sollte also grob diese Struktur vorhanden sein. Damit ein Objekt bewegt werden kann, muss es unbedingt mit position: absolute im CSS-Code eine absolute Positionierung haben.

Die Schwerkraft soll den Spieler ständig nach unten ziehen. Die einfachste Lösung dafür ist, den Abstand zum oberen Spielfeldrand ständig zu vergrössern.

Sollte der Fall am unteren Spielfeldrand enden, muss eine Limite eingebaut werden. Dazu wird eine Bedingung verwendet, die den Spieler nur fallen lässt, wenn er noch nicht am unteren Rand angekommen ist.

Vorschau

game.css

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

game.html

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

game.js

var spieler = document.querySelector('.player')
spieler.style.top = '200px'

function loop() {
  if(parseInt(spieler.style.top) < 200) {
    spieler.style.top = parseInt(spieler.style.top) + 5 + 'px'
  }

  window.requestAnimationFrame(loop)
}

window.requestAnimationFrame(loop)