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”等、これからいろいろな構文が出てきます。
最初は難しいと感じるかもしれませんが、使いこなせると便利なので何度も練習して慣れていきましょう。