JavaScript Games

Die Kollisionserkennung baut auf dem Grundgerüst auf. Es sollte also grob diese Struktur vorhanden sein. Wichtig: steuerbare Objekte müssen mit position: absolute positioniert werden!

Zuerst benötigen wir einige Gegner. Dazu definieren wir sie im HTML-Code, stylen sie in der CSS-Date und wählen sie schliesslich mit querySelector() im Javascript-Code vor dem Game-Loop aus.

Um Kollisionen erkennen zu können, müssen wir die Datei collision.js einbinden. Diese muss vor der eigenen game.js-Datei eingebunden werden.

Die Datei collision.js stellt uns zwei Funktionen zur Verfügung: isColliding() und getCollisions(). Der Unterschied liegt darin, dass die Funktion isColliding() nur überprüft, ob eine Kollision passiert ist, nicht aber, welche Objekte daran beteiligt sind. getCollisions() hingegen liefert die beteiligten Objekte.

Dadurch, dass isColliding() nur meldet, ob überhaupt eine Kollision passiert, ist sie z.B. dazu geeignet, das Spiel abzubrechen, wenn der Spieler in ein Hindernis läuft. In diesem Fall spielt es keine Rolle, welches Hindernis der Spieler berührt hat.

Dadurch, dass getCollisions() die an der Kollision beteiligten Objekte zurückmeldet, ist sie z.B. dafür geeignet, Objekte einzusammeln. Hier ist es wichtig, welcher Gegenstand berührt wurde, deshalb kann nur getCollisions() verwendet werden.

Vorschau

game.css

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

.enemy1, .enemy2, .enemy3, .enemy4 {
  position: absolute;
  background-color: blue;
  width: 20px;
  height: 20px;
}

game.html

<div class="playground">
  <div class="player"></div>
  <div class="enemy1"></div>
  <div class="enemy2"></div>
  <div class="enemy3"></div>
  <div class="enemy4"></div>
</div>

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

game.js

var spieler = document.querySelector('.player')
var gegner1 = document.querySelector('.enemy1')
var gegner2 = document.querySelector('.enemy2')
var gegner3 = document.querySelector('.enemy3')
var gegner4 = document.querySelector('.enemy4')
spieler.style.left = '0px'

function loop() {
  // Kommentar: sobald der Spieler mit Gegner1 oder 2 kollidiert, ist das Spiel fertig
  if(anyCollision(spieler, [gegner1, gegner2])) {
    alert("Game over!")
    return
  }

  // Kommentar: sobald der Spieler mit Gegner3 oder 4 kollidiert, werden diese gelöscht
  var collisions = allCollisions(spieler, [gegner3, gegner4])
  // Kommentar: wir gehen durch alle Kollisionsobjekte durch und löschen sie
  for(var collision of collisions) {
    collision.parentNode.removeChild(collision)
  }

  window.requestAnimationFrame(loop)
}

window.requestAnimationFrame(loop)