3Malen nach Zahlen

In HTML gibt es ein sogenanntes canvas-Element. Canvas bedeutet so viel wie "Zeichenfläche" und ermöglicht es, ähnlich wie in einem Zeichenprogramm, Formen, Schriften und Bilder zu zeichnen. Dazu besitzt ein Canvas einen Context, der in unserem Fall 2D ist (3D gibt es natürlich auch). Innerhalb des Canvas könnt ihr Positionen mit x- und y-Koordinaten angeben.

Damit wir nicht nur einfache Formen und Texte zeichnen, sondern auch die Grafiken unseres Monsters nutzen können, müssen wir die zunächst aus den Bilddateien in ein Image-Objekt laden. Wie ein Bild in der HTML-Seite hat auch ein Image-Objekt ein src-Attribut, in dem du den Dateinamen angeben kannst. Bei größeren Grafiken ist es sinnvoll einen Mechanismus einzubauen, der prüft, wann der Interpreter die Grafik komplett geladen hat. In unserem Fall ist das aber nicht notwendig.

In einem Spiel, dass in "Echtzeit" abläuft müssen sogenannte Frames gezeichnet werden (vielleicht kennst du die Bezeichnung fps - Frames per Second). Das bedeutet unser Spielfeld wird in regelmäßigen Zeitabständen aktualisiert und neu gezeichnet. In Computerspielen übernimmt diesen Vorgang meistens eine Game-Loop, also ein Code, der immer wieder ausgeführt wird. Da die Game-Loop in jedem Frame ähnliche Dinge macht, eignet sich dafür eine Funktion, die einmal zu Beginn und anschließend über die Funktion setTimeout() zeitgesteuert aufgerufen wird.