"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); } }
Die Logik hinter dem Animate und drawImage sollte aus dem vorherigen Kapitel bekannt sein. Es gibt keine Unterschiede, außer dass Sie mit einem Array arbeiten.
Nächste Seite↶ Ein Monster kommt selten allein