JavaScript Games

Die Tastatursteuerung 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 der Tastaturstatus abgefragt werden kann, muss die Datei keyboard.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.

Auf der Website keycode.info kann man den Code jeder Taste der Tastatur herausfinden. Über diesen Code geschieht später die Abfrage der Tastatur. Die Pfeiltaste nach rechts hat beispielsweise den Code 39.

Mit der Funktion keyboard() im Loop drin kann abgefragt werden, ob die Taste mit einem bestimmten Code im Moment gedrückt wird. So kann zum Beispiel beim Drücken der rechten Pfeiltaste der Spieler nach rechts bewegt werden.

Vorschau

game.css

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

game.html

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

<script src="https://jsgame.bbz.cloud/scripts/v1/keyboard.js"></script>
<script src="game.js"></script>

game.js

var spieler = document.querySelector('.player')
spieler.style.left = '0px'

function loop() {
  if(keyboard(39)) {
    spieler.style.left = parseInt(spieler.style.left) + 5 + 'px'
  }
  if(keyboard(37)) {
    spieler.style.left = parseInt(spieler.style.left) - 5 + 'px'
  }
  window.requestAnimationFrame(loop)
}

window.requestAnimationFrame(loop)