JavaScript Games

Zuerst brauchen wir wie immer das Grundgerüst. Es sollte also grob diese Struktur vorhanden sein. Wichtig: steuerbare Objekte müssen mit position: absolute positioniert werden!

Damit die Berechnungen durchgeführt werden können, brauchen wir ein zweites Objekt, zum Beispiel einen Gegener. Auch dieser muss absolut positioniert sein und vor dem Loop mit querySelector ausgewählt werden.

Für dieses Beispiel nehmen wir noch die Tastatursteuerung hinzu. Diese ist nicht nötig, vereinfacht aber die Darstellung.

Um die Berechnungen zu vereinfachen, wird die Datei geometry.js vor der eigenen Javascript-Datei eingebunden.

Die Datei beinhaltet zwei wichtige Funktionen, distance() und angle(), die die Distanz bzw. den Winkel zwischen zwei Objekten berechnen können.

Der Distance-Funktion müssen vier Zahlen gefüttert werden: der Abstand von links und vom oberen Rand des ersten Punkts sowie der Abstand von links und vom oberen Rand des zweiten Punkts. Die berechnete Distanz in Pixeln kann dann verwendet werden, um z.B. den Spieler je nach Distanz zum Gegner zu färben.

Die Angle-Funktion erwartet die gleichen vier Zahlen: jeweils die Abstände von links und oben zu den zwei zu vermessenden Objekten. Die Angle-Funktion liefert dann den Winkel zwischen den Objekten. Dies kann zum Beispiel verwendet werden, um den Gegner immer in Richtung Spieler zu drehen. 0 bedeutet, der Gegner ist oberhalb des Spielers, 90 bedeutet, er ist rechts des Spielers, 180 unterhalb usw.

Vorschau

game.css

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

.enemy {
  position: absolute;
  background-color: yellow;
  width: 20px;
  height: 20px;
  text-align: center;
}

game.html

<div class="playground">
  <div class="player"></div>
  <div class="enemy">&uarr;</div>
</div>

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

game.js

var spieler = document.querySelector('.player')
var gegner = document.querySelector('.enemy')

gegner.style.left = '100px'
gegner.style.top = '100px'

spieler.style.left = '0px'
spieler.style.top = '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'
  }

  var spielerX = parseInt(spieler.style.left)
  var spielerY = parseInt(spieler.style.top)
  var gegnerX = parseInt(gegner.style.left)
  var gegnerY = parseInt(gegner.style.left)

  var dist = distance(spielerX, spielerY, gegnerX, gegnerY)
  if(dist < 150) {
  	spieler.style.backgroundColor = 'red'
  } else {
    spieler.style.backgroundColor = 'green'
  }

  var a = angle(gegnerX, gegnerY, spielerX, spielerY)
  gegner.style.transform = "rotate(" + a + "deg)"

  window.requestAnimationFrame(loop)
}

window.requestAnimationFrame(loop)

JavaScript Games

Geometrie