"Firce" - HTML5 Spiel programmieren (easy)

Magie, magie, magie...

Natürlich braucht unser Charakter auch Fähigkeiten, um sich gegen die Monster zu verteidigen. Das wird ein Feuerball und ein Eisball sein. Mit dem entgegengesetzten Element können die Feinde zerstört werden.

Tastatur-Eingabe erfassen

Zuerst müssen wir zwei Tasten wählen, die die Magie auslösen. "A" für den Feuerball und "D" für die Eiskugel scheinen die besten zu sein.

var attacks = new Array();
//...

// Wait for keyboard input and forward to function keydown
window.addEventListener('keydown', keydown, false);

function keydown(e)
{
// A
if(e.keyCode == 65)
{
var fireball = {img: new Image(), x: char.x + 32, y: char.y, aniClock: 0, frame: 0, del: 0, fire: 1};
fireball.img.src = 'fireball.png';
attacks[attacks.length] = fireball;
}
// D
else if(e.keyCode == 68)
{
var iceball = {img: new Image(), x: char.x + 32, y: char.y, aniClock: 0, frame: 0, del: 0, fire: 0};
iceball.img.src = 'iceball.png';
attacks[attacks.length] = iceball;
}
}

Nach dem Drücken einer der entsprechenden Tasten erstellen wir das entsprechende Angriffselement. Das Feuerkugel- und Eiskugelobjekt besteht aus einer Bilddatei, Koordinaten, einer individuellen Animationsuhr zur Überprüfung der Bildzeiten, einer Rahmenvariablen für den aktuellen Animationsframe und einer Variablen, die bestimmt, ob das Objekt bei nächster Gelegenheit gelöscht werden soll. fire ist dafür verantwortlich, später zu erkennen, ob es sich um einen Feuer- oder Eisangriff handelt. Die Variable wird benötigt, da wir nur mit einem Array arbeiten.

Animierte Angriffe

Rechts. Wir haben Animations-Clocks, d.h. die Angriffe werden animiert und die Spritesheets werden so aussehen:

function loop()
{
// ...
for(var i = 0; i < attacks.length; ++i)
{
if(Date.now() - attacks[i].aniClock >= 70)
{
attacks[i].frame++;
if(attacks[i].frame == 4) attacks[i].frame == 0;
attacks[i].aniClock = Date.now();
}

ctx.drawImage(attacks[i].img, attacks[i].frame * 32, 0, 32, 32, attacks[i].x, attacks[i].y, 32, 32);
}
}