Das Hintergrund-Scrolling baut auf dem Grundgerüst auf. Es sollte also grob diese Struktur vorhanden sein.
Zuerst muss dem Spielfeld in CSS ein Hintergrund gegeben werden.
Damit der Hintergrund bewegt werden kann, muss das Spielfeld mit querySelector in eine Variable gespeichert werden.
Der Hintergrund kann dann über die background-position-Regel verschoben werden.
game.css
.player {
position: absolute;
background-color: red;
width: 20px;
height: 20px;
}
.playground {
width: 400px;
height: 400px;
background-image: url(https://cdnb.artstation.com/p/assets/images/images/020/154/249/large/james-mornan-game-colours-2.jpg?1566589577);
background-size: contain;
}
game.html
<div class="playground">
<div class="player"></div>
</div>
game.js
var spieler = document.querySelector('.player')
spieler.style.top = '200px'
var spielfeld = document.querySelector('.playground')
var backgroundPosition = 0;
function loop() {
backgroundPosition = backgroundPosition + 5;
spielfeld.style.backgroundPosition = `-${backgroundPosition}px 0`;
window.requestAnimationFrame(loop)
}
window.requestAnimationFrame(loop)