Die Bewegung 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. Nur dann funktionieren die CSS-left und -top-Eigenschaften.
Um dem Objekt eine Startposition zu geben, muss vor dem Game-Loop diese Position mit der left- bzw. der top-Eigenschaft bestimmt werden.
Im Game-Loop kann dann die Positionierung geändert werden. In diesem Beispiel wird die left-Eigenschaft, dass heisst, der Abstand zum linken Spielfeldrand, jeweils um 1px vergrössert. Der Spieler bewegt sich so nach rechts.
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.left = '0px'
function loop() {
spieler.style.left = parseInt(spieler.style.left) + 5 + 'px'
window.requestAnimationFrame(loop)
}
window.requestAnimationFrame(loop)