JavaScript»基礎»setTimeout()で決まった回数をくりかえし 炎の剣で斬ってみる

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

下のソースコードをうつして、炎の剣でりつけるエフェクトをキャンバスに表示ひょうじしてください。

もっかい

画像がぞうは下のリンクからダウンロードできます。

画像をダウンロード

ソースコード

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

context.fillStyle = "rgb(0,0,0)";
context.fillRect(0, 0, 320, 320);

const image = new Image();
image.src = "pipo-btleffect103a.png";
image.onload = function() {
  let x = 0;
  const effect = function() {
    context.fillRect(40, 40, 240, 240);
    context.drawImage(image, x * 240, 0, 240, 240, 40, 40, 240, 240);
    if (++x <= 10) {
      setTimeout(effect, 50);
    }
  };
  effect();
};

解説

setTimeoutは、指定した時間待ったあとに関数を実行します。
このコードでは、関数effectはsetTimeoutで自分自身を呼び出しています。こうすることで一定時間ごとにくりかえす動きが作れます。