JavaScript»基礎»setInterval関数 キャラクターを歩かせてみる

ファイル名: js-basic/quest_00193.html

下のソースコードをうつして、キャラクターが歩いているようにキャンバスに表示ひょうじしてください。画像がぞうは下のリンクからダウンロードできます。

画像をダウンロード

ソースコード

const canvas = document.getElementById("canvas");
const context = canvas.getContext("2d");

const image = new Image();
image.src = "pipo-charachip010a.png";
image.onload = function() {
  let x = 0;
  setInterval(function() {
    context.clearRect(144, 144, 32, 32);
    context.drawImage(image, x * 32, 64, 32, 32, 144, 144, 32, 32);
    x = (x + 1) % 3; // 0, 1, 2 をくりかえす
  }, 200);
};

解説

setIntervalは、一定いってい間隔かんかくごとに関数かんすう実行じっこうします。
このコードでは200ミリ秒ごとに、今表示ひょうじされている画像がぞうを消して次の画像がぞう表示ひょうじしています。