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”はfor文のように同じ命令を何度も繰り返す構文です。
“SetInterval”の書き方は下記のようになります。

setInterval(function() {
  //繰り返したい処理を記述する
  }, //繰り返す際に待機させる秒数(単位はミリ秒)を記述する。
   , //(繰り返したい処理に引数を設定する場合)引数に入れる情報を記述する。);
};

ミリ秒とは、1000ミリ秒で1秒となるような単位です。
メートルとミリメートルの関係性と同じです。
“SetInterval”等、これからいろいろな構文が出てきます。
最初は難しいと感じるかもしれませんが、使いこなせると便利なので何度も練習して慣れていきましょう。