taralino

Animation

Es gibt einige Sprites, die sich zur Animation eignen. Dazu sollte (in Abhängigkeit der Zeit) jeweils ein Sprite einer passenden Reihe ausgewählt werden. Schau dir dazu das folgende Beispiel an.

Beispiel

Das Sprites-Paket.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="taralino.js"></script>
  <script src="Sprites.js"></script>
</head>
<body>
<script>

function time_index(speed) {
  var h = speed*time() % 3;
  if (h > 2) return "2";
  if (h > 1) return "1";
  return "0";
};

function setup() {
  Canvas.init([-4,4], [-2,2], {background:"lightgrey", width:480});
};

function loop() {
  var s = time_index(8);
  Canvas.clear();
  Canvas.circle(0, 0, 1, {sprite:"plane-red-"+s});
};

</script>
</body>
</html>

Vorschau Download Kopie speichern

Aufgabe

Mache dich mit dem Quellcode zuvor vertraut und verändere die Geschwindigkeit der Animation. Erweitere den Code und lasse eine animierte Spinne von rechts nach links laufen.

Zur Referenz