"Firce" - HTML5 Spiel programmieren (easy)

Spielziel

Schön und gut. Wir können jetzt Attacken abfeuern, wir haben Monster die auf uns zu kommen und wir können sogar mit unseren Attacken die Monster auslöschen. Aber irgendwie fehlt noch der Sinn bzw. irgendetwas was den Spieler verlieren lässt. Beispielsweise wenn ihn ein Gegner berührt oder wenn er das falsche Element für den falschen Gegner benutzt (um zu verhindern das Magie wahllos gefeuert wird).

Die erste Spielregel, die den Spieler verlieren lässt, ist also wenn der Gegner ihn berührt.

// Wir nehmen uns die Monster Array Zählschleife vor
for(var i = 0; i < monsters.length; ++i)
{
// ...
if(monsters[i].x <= char.x + 32)
{
gameover = true;
}
}

Die zweite Spielregel ist, dass Magie mit dem selben Element wie die des Gegners nicht kollidieren darf.

// Wir nehmen uns den else Fall des Elementchecks vor
// Attacken Zählschleife => Monster Zählschleife =>
if(attacks[i].fire && !m.isFire || !attacks[i].fire && m.isFire)
{
// ...
}
else
{
// attacks[i].del = 1;
// Spiel direkt beenden statt Attacke zu löschen
gameover = true;
}

Jetzt müssen wir nur noch dafür sorgen, dass nichts mehr nach einem Gameover ausgeführt wird. Um es einfach zu halten, habe ich das wie folgt realisiert.

function loop()
{
if(gameover) return;
// ...
}

So bleibt, nach einem Gameover, das Bild stehen. Natürlich kann man das Spiel endlos erweitern und auch einen Gameover Screen einbauen. Aber wir belassen es hierbei. Feinheiten und Benutzeroberfläche würde hier nur den Rahmen sprengen obwohl diese Dinge relativ trivial sind. Also nutzt den großen Raum für Erweiterungen und werdet Kreativ, ihr dürft auch gerne die Grafiken aus diesem Artikel verwenden.