"Firce" - HTML5 Spiel programmieren (easy)
HTML5 Spiel programmieren
Die Idee ist simpel, wir haben einen Charakter der sich ununterbrochen nach vorne bewegt. Zumindest sieht es so aus. Auf ihn kommen Gegner zu, um genau zu sein, zwei verschiedene Typen von Gegner. Einmal welche vom Feuerelement und einmal welche vom Eiselement. Diese gilt es mit der umgekehrten magischen Attacke anzugreifen und zu zerstören.
Der Charakter
Unser Magier ist wenig detailliert gestaltet. Aus Einfachheit habe ich auch die Animationen simpel gehalten und hier eine Technik benutzt, die der Animation viel Bewegung mit wenig Aufwand schenkt.

Und zwar hab ich den Charakter mit dem Auswahltool bearbeitet. In jedem Frame habe ich an einer Position X den Charakter runter bewegt. Bilder sagen mehr 1000 Worte.

Das sorgt für die Illusion das sich der ganze Körper bewegt.

Das erste Dokument
Wir werden das Spiel mit HTML5 Canvas und Javascript realisieren. Dementsprechend wird unser erstes Dokument eine HTML Datei sein. Die wir index.html taufen.
<!DOCTYPE html> <html> <head> </head> <body> <canvas id="canvas" width="800" height="600"></canvas> <script> </script> </body> </html>
Im Grunde ist das der gesamte HTML Part, wir verzichten auf irgend ein Layout oder Style. Der interessantere Teil wird zwischen den Script Tags stattfinden und folgt in den nächsten Abschnitten.
Nächste Seite↶ Warten, Element ansprechen und Gameloop