Kollision zwischen Spieler- und Gegnerfigur - Game over!

Für die Berechnung einer Kollision benötigen wir folgende Wert, die in den Variablen bzw. Arrays gespeichert sind:

• Variable: x (Spielerfigur X-Koordinate)
• Variable: y (Spielerfigur Y-Koordinate)
• Array: gegnerpositionen (Gegnerfigur X-Koordinate)
• Berechnung Gegnerfigur Y-Koordiate über: y = 360-(nr*40)

dabei ist „nr“ zwischen 0 und Anzahl der Gegner (also 6)

Jetzt haben wir alle Werte, die wir vergleichen müssen. Ein Zusammenstoß liegt dann vor, wenn die x- und y-Position von der Spielerfigur identisch ist mit einer Gegnerfigur. Allerdings haben unsere Spielfiguren ja eine bestimmte Breite. Daher müssen berechnen, ob diese sich „streifen“. Also nutzen wir wieder Mathematik (war die Schule doch für etwas gut:)). Wenn wir die x-Position der Spielerfigur hernehmen und von dieser die x-Position eines Gegners abziehen und das Ganze als positive Zahl nutzen (JavaScript Funktion: Math.abs) können wir sehr einfach überprüfen, ob ein Treffer vorliegt.

Wie durchlaufen also das Array und vergleichen die Werte.

function kollisionspruefungGegner() {
    for (nr = 0; nr < gegnerpositionen.length; nr++) {
        var ygeg = 360-(nr*40);
        if ( Math.abs(x - gegnerpositionen[nr]) < 20 && y == ygeg ) {
            // Zusammenstoß
            console.log("Zusammenstoß");
            console.log( Math.abs(x - gegnerpositionen[nr]) );
            console.log( " | y: "+ y );
            console.log( " | y: "+ ygeg  + " berechnet ");
        }
    }
}

Diese Funktion “kollisionGegner()“ wird nun wieder in unserer „taktung()“ integriert. Vorzugsweise, nachdem wir die neue Position von allen Gegnern berechnet und gezeichnet haben.

function taktung() {
    spielfeld.clearRect(0, 0, 600, 480);
    zeichneZielfeld();   
    spielfeld.drawImage(spielfigur,x,y);
    zielfelderreicht();
    kollisionspruefungGegner();
    setzeGegner();

Lassen wir nun unser Spiel ablaufen, sollte in der Console das entsprechende Feedback erscheinen. Also Testen!

Bei einem Zusammenstoß endet das Spiel sofort und eine traurige Musik über 2 Minuten lang ist zu hören (das kommt in der 2.0 Version) und eine Meldung zwecke „Game Over“ erscheint.

Dafür müssen wir die Funktion für die Überprüfung einer Kollision entsprechend erweitern:

function kollisionspruefungGegner() {
    for (nr = 0; nr < gegnerpositionen.length; nr++) {
        var ygeg = 360-(nr*40);
        if ( Math.abs(x - gegnerpositionen[nr]) < 20 && y == ygeg ) {
            // Zusammenstoß
            kollisionGegner();
        }
    }
}

Dafür gibt es eine neue Funktion mit dem Namen „kollisionGegner();

function kollisionGegner() {
	clearInterval(takt);
	$('#gameover').show();
}

Für die Anzeige von „#gameover“ müssen wir in HTML und einen entsprechenden DIV-Bereich mit der ID "gameover" erstellen und über CSS diesen erst einmal ausblenden!

Wir packen in HTML um unseren bisherige Canvas ein DIV mit der ID „spielbereich“. Das benötigen wir, um unsere Anzeigen schön darauf platzieren zu können.

Zusätzlich kommt vor dem schließenden DIV dann noch unser DIV mit der ID „gameover“ und der Beileidsbekundung.

<div id="spielbereich">
  <canvas id="leinwand" width="600" height="480"></canvas>
  <div id="punktestand">Siegpunkte: 0</div>
  <div id="spielzeit">Spielzeit: 45</div>
  <div id="spielendeanzeige">Zeit abgelaufen</div>
  <div id="gameover">Wie traurig - verloren.</div>
</div>

In CSS setzen wir die ID „spielbereich“ auf position: relative; damit wir unsere anderen Bereiche über diese mit position: absolute; und den entsprechenden weiteren Anweisungen ausrichten können.

#spielbereich {
	position: relative;
	width: 600px;
}

#gameover {
	display: none;
	position: absolute;
	top: 0;
	left: 0;	
	border: 4px solid red;
	margin: 10%;
	background-color: hsla(0, 50%, 50%, 0.7);
	width: 80%;
	height: 70%;
}