Canvas mit Vorgabe

Aus ProgrammingWiki

In diesem Beispiel wird ein Canvas mit Inhalten vorgeladen. Dabei werden Grafiken aus dem WWW geladen. Der Leser soll versuchen durch 4 einfachen Funktionen das Ziel mit der Spielfigur zu erreichen. Diese 4 Funktionen sind in einem versteckten Codeblock definiert. Öffnen Sie den Quelltext dieser Seite um diese zu betrachten.

Der Weg aus dem Labyrinth

Anna ist in einem Labyrinth gefangen und du musst ihr helfen. Anna kann über 4 Methoden gesteuert werden. Wende diese nacheinander an, um Anna bis zum rot markierten Ziel zu lenken.

Die Methode start() stellt Anna wieder an den Anfang des Labyrinths. Wir rufen diese Methode deshalb zu Beginn von jedem Programmstart auf.

Anna versteht die folgenden 4 Anweisungen: nachlinks(); nachoben(); nachrechts(); nachunten();

canvas.init(); // neu initalisieren mit dem oben angegebenen Inhalten var PlayerX = 155; var PlayerY = 300; function start(){ PlayerX = 155; PlayerY = 300; } function DeletePlayer(){ canvas.setColor(255,255,255); canvas.fillRect(PlayerX,PlayerY,50,50); } function DrawPlayer(){ canvas.drawImage(PlayerX,PlayerY,50,50,"https://programmingwiki.de/images/thumb/4/4d/Boy-154336_640.png/458px-Boy-154336_640.png"); } function nachoben(){ DeletePlayer(); PlayerY -= 70; DrawPlayer(); } function nachlinks(){ DeletePlayer(); PlayerX -= 70; DrawPlayer(); } function nachrechts(){ DeletePlayer(); PlayerX += 70; DrawPlayer(); } function nachunten(){ DeletePlayer(); PlayerY += 70; DrawPlayer(); }

start(); nachlinks(); nachoben(); nachrechts(); nachrechts(); nachunten(); nachlinks();

ausführen

Zusammenfassung

Diese Funktionen lassen sich für diverse Zwecke verwenden, um Hintergrundgrafiken usw. in einen Canvas zu laden. Dies wird sofort beim Laden der Seite ausgeführt.