Kleiner JavaScript Kurs

Spiel mit Sprites (Animation auf Canvas)

Diesmal wollen wir Bilder auf dem Canvas darstellen, die sich wie im Film bewegen. Zunächst benötigen wir wieder im body ein Canvas Element:

<body>
    <canvas id="myCanvas" width="500" height="500" 
            style="border:2px solid #000000; background-color: lightblue;">
    </canvas>
</body>

Wie man Bilder auf dem Canvas mit drawImage() anzeigt, haben wir schon beim Autorennen gesehen:

<script>
  var canvas = document.getElementById("myCanvas");
  var ctx = canvas.getContext("2d");
  var breite = canvas.width;
  var hoehe = canvas.height;
  var drache = new Image();
  drache.src = "images/drachen_gold.png";
  drache.onload = function() {
      ctx.drawImage(drache, 0,0);
  }
</script>

Die Syntax von drawImage:
drawImage(Image-Objekt, xZiel, yZiel), wobei x und y die Koordinaten im Canvas des Bildes links oben sind (also 0,0 ist die linke obere Ecke des Canvas).
Es gibt noch eine zweite Möglichkeit drawImage einzusetzen. Damit kann man dann Teile eines Bildes anzeigen:
drawImage(Image-Objekt, xImage, yImage, Breite des Ausschnitts, Höhe des Ausschnitts, xZiel, yZiel, Breite des Bildes im Canvas, Hoehe des Bildes im Canvas)
Das sieht etwas kompliziert aus ;-) Um alle erforderlichen Daten zu berechnen benötigen wir die Breite und Höhe unseres Sprite-Bildes

var drachenBreite=drache.width;
var drachenHoehe=drache.height;

Im unserem Beispielbild gibt es 3 Bilder in jeder Zeile (von links nach rechts) und 4 Bilder in jeder Spalte (von oben nach unten). Wenn wir also die Breite des Spritebildes durch 3 teilen bekommen wir die Breite eines Sprites und wenn wir die Spritebild-Höhe durch 4 teilen bekommen wir die Höhe eines Sprites. Wenn wir die Sprites durchnumerieren (oben links mit 0 beginnen) können wir alle erforderliche Werte durch Multiplikation ausrechnen (Die Zeilen heißen 0 bis 3, die Spalten 0 bis 2)
Wir versuchen mal das Sprite der 2. Zeile und 1. Spalte an Canvas-Position 50, 50 anzuzeigen:

drache.onload = function() {
    var drachenBreite=drache.width;
    var drachenHoehe=drache.height;
    ctx.drawImage(drache, 1*drachenBreite/3, 2*drachenHoehe/4, drachenBreite/3, drachenHoehe/4,
                 50, 50, drachenBreite/3, drachenHoehe/4);
}

Jetzt fehlt nur noch die Animation. Es funktioniert wie beim Autorennen mit
setInterval(Funktion, Zeit in ms)
Wir müssen für die Animation statt der Position des Bildes den Bildausschnitt verändern (für unser Drachen-Beispiel müssen immer die Sprites einer Zeile nacheinander angezeigt werden, also Sprite 0, Sprite 1, Sprite 2 und dann wieder Sprite 0 ...)

<script>
      var canvas = document.getElementById("myCanvas");
      var ctx = canvas.getContext("2d");
      var breite = canvas.width;
      var hoehe = canvas.height;
      var drache = new Image();
      var aniZaehler=0;
      drache.src = "images/drachen_gold.png";
      drache.onload = function() {
        var drachenBreite=drache.width;
		var drachenHoehe=drache.height;
        var spriteNr;
        function drachen_animieren(){
          var zeile=1; //Zeile 0 bis 3 möglich
          ctx.fillStyle = "lightblue";
          ctx.fillRect(0, 0, breite, hoehe);
          spriteNr=aniZaehler%3; //zählt immer von 0 bis 3
          ctx.drawImage(drache, spriteNr*drachenBreite/3, zeile*drachenHoehe/4, drachenBreite/3, drachenHoehe/4,
                     50, 50, drachenBreite/3, drachenHoehe/4);
          aniZaehler++;
        }
        var intervalID = window.setInterval(drachen_animieren, 75);
      }
	</script>

Kleiner JavaScript Kurs

Diesmal wollen wir Bilder auf dem Canvas darstellen, die sich wie im Film bewegen. Zunächst benötigen wir wieder im body ein Canvas Element:

So könnte ein einfaches Jump and Run - Spiel aussehen: Jump and Run - Spiel (später ...)

Hier die HTML-Seite mit dem kompletten Programm (später)