"Firce" - HTML5 Spiel programmieren (easy)

Ein Charakter, der sich nie bewegt

Jetzt, da wir den Hintergrund und den Vordergrund erkannt haben, können wir mit den wesentlichen Dingen fortfahren. Und was noch wichtiger ist, wenn nicht der Charakter, den der Spieler kontrolliert.

var char = {img: new Image(), x: 50, y: 504};
char.img.src = "charsheet.png";
var charAniClock = Date.now();
var charFrame = 0;

function loop()
{
//...
if(Date.now() - charAniClock >= 70)
{
charFrame++;
if(charFrame == 4) charFrame = 0;
charAniClock = Date.now();
}

ctx.drawImage(char.img, charFrame * 32, 0, 32, 32, char.x, char.y, 32, 32);
}

Der Charakter besteht nur aus einem Bildobjekt und Koordinaten. Die Y-Koordinate wird so gewählt, dass das Zeichen auf dem Gras steht. charAniClock und charFrame sind für die Animation notwendig. Im Gameloop wird alle 70 Millisekunden der nächste Frame anvisiert. Nachdem alle Einzelbilder einmal sichtbar waren, beginnt die Animation von vorne.

drawImage(img, sx, sy, sw, sh, x, y, width, height).

Eine detailliertere Erklärung der Logik hinter dem Ganzen finden Sie im Artikel: SFML 2.5 - animierte Figur.

Ergebnis

Das Ergebnis ist ein Zeichen, das immer auf der gleichen Koordinate gezeichnet wird, aber so aussieht, als würde es sich vorwärts bewegen. Die Illusion, dass sich der Charakter bewegt, wird intensiver, wenn sich die Feinde verbinden. Mehr dazu später.