Canvas mit Vorgabe

Wiki-Quelltext dieser Seite.

<language>Javascript</language>
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 w=400 h=400>
 drawImage(-2,-5,0,0,"http://www.freigehege.com/freigehegegrafiken/labyrinth06.jpg");
 setColor(255,0,0);
 rect(100,100,50,50);
 text(110,130,"Ziel",12);
 drawImage(170,320,50,50,"http://programmingwiki.de/images/thumb/4/4d/Boy-154336_640.png/458px-Boy-154336_640.png");
</canvas>

<code id="4b66808ab4ea" hidden>
canvas.init(); // neu initalisieren mit dem oben angegebenen Inhalten
var PlayerX = 170;
var PlayerY = 320;
var timeOutTimer = 0;

function start(){
 PlayerX = 170;
 PlayerY = 320;
 timeOutTimer = 0;
}
function DeletePlayer(){
 canvas.setColor(255,255,255);
 canvas.fillRect(PlayerX,PlayerY,50,50);
}
function DrawPlayer(){
 timeOutTimer++;
 // wait a bit to get an animation
 setTimeout(function(){
  canvas.drawImage(PlayerX,PlayerY,50,50,"http://programmingwiki.de/images/thumb/4/4d/Boy-154336_640.png/458px-Boy-154336_640.png");
 },timeOutTimer*100);
}
function nachoben(){
 DeletePlayer();
 PlayerY -= 70;
 DrawPlayer();
}
function nachlinks(){
 DeletePlayer();
 PlayerX -= 70;
 DrawPlayer();
}
function nachrechts(){
 DeletePlayer();
 PlayerX += 70;
 DrawPlayer();
}
function nachunten(){
 DeletePlayer();
 PlayerY += 70;
 DrawPlayer();
}
</code>

<run id="4b668084abcb7">
start();
nachlinks();
nachoben();
nachrechts();
nachrechts();
nachunten();
nachlinks();
</run>


== 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.