Die Maussteuerung baut auf dem Grundgerüst auf. Es sollte also grob diese Struktur vorhanden sein. Wichtig: steuerbare Objekte müssen mit position: absolute positioniert werden!
Damit die Maus abgefragt werden kann, muss die Datei mouse.js eingebunden werden. Diese kann direkt vom Server in den HTML-Code eingebettet werden. Wichtig: Die Datei muss vor eurer eigenen JS-Datei eingebunden sein.
Ausserdem muss das Spielfeld vor dem Loop mit querySelector ausgewählt und in eine Variable gespeichert werden.
Die Javascript-Datei stellt 3 Funktionen zur Verfügung: mousePositionX(), mousePositionY() und mouseClick().
Die Funktionen mousePositionX() und mousePositionY() sind dazu da, im Loop drin die aktuelle Mausposition abzufragen. Damit kann entweder gerechnet werden, oder der Spieler kann wie im Beispiel an die Position des Mauszeigers bewegt werden.
Mit mouseClick() kann abgefragt werden, ob soeben geklickt wurde. Im Beispiel wird bei einem Klick der Spieler umgefärbt. Es kann aber auch beispielsweise ein neues Hindernis generiert werden.
.player {
position: absolute;
background-color: red;
width: 20px;
height: 20px;
}
<div class="playground">
<div class="player"></div>
</div>
<script src="https://jsgame.bbz.cloud/scripts/v1/mouse.js"></script>
<script src="game.js"></script>
var spieler = document.querySelector('.player')
var spielfeld = document.querySelector('.playground')
spieler.style.left = '0px'
spieler.style.top = '0px'
function loop() {
spieler.style.left = mousePositionX(spielfeld) + 'px'
spieler.style.top = mousePositionY(spielfeld) + 'px'
if(mouseClick()) {
spieler.style.backgroundColor = 'blue'
}
window.requestAnimationFrame(loop)
}
window.requestAnimationFrame(loop)