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ミリ秒ごとに、今表示ひょうじされている画像がぞうを消して次の画像がぞうを表示ひょうじしています。