処理を遅らせる
ことの移り変わりを高速ではなくゆっくり表示したいときがあります。
将棋の棋譜から場面をゆっくり表示させる場合、C言語ではsleep関数を使うようです。HTMLではどのようにするでしょうか。
HTML身内のJavaScript関数のsetTimeoutやsetIntervalを使います。両者はほぼ同等の機能を有しますが、私はきめ細かな設定ができるsetTimeoutの方を好んで利用しています。
詳しい関数仕様はサイト上の記事に譲ります。ここではひとつのサンプルを掲げますが、大掛かりなサンプル動作は将棋熱沸騰が参考になります。
動作例
ページのロード完了で少年は坂を上っています。再起動するにはブラウザの再読み込みボタン
をクリックしてください。
🚶
HTMLサンプルコード
<html>
<head>
<meta charset="utf-8" />
</head>
<body onload="setTimeout('start()', 1000)">
<div style="width:480px; height:208px; position:relative;">
<img src="https://aidesign.lolipop.jp/wp-content/uploads/2021/12/step4.png">
<div id="boy" style="position:absolute; left:25px; top:112px; font-size:48px; transform:scaleX(-1);">🚶</div>
</div>
<script type="text/javascript">
var x=-405; //グローバル変数：水平方向の位置
var y=126; //グローバル変数：垂直方向の位置
var count=0; //グローバル変数：カウンター
console.log("$", x, y, 430-Math.abs(x), Math.abs(y)-14); //初期状態
function start(){
x += 90;
y -= 28;
document.getElementById("boy").style.left = 430-Math.abs(x) + "px";
document.getElementById("boy").style.top = (Math.abs(y)-14) + "px";
console.log(count, x, y, 430-Math.abs(x), Math.abs(y)-14);
if(count == 4) document.getElementById("boy").style.transform=""; //てっぺん到達で歩く少年画像左右反転
if(++count < 9) setTimeout('start()', 1000);
}
</script>
</body>
</html>
プログラミングひとこと
少年がステップを駆け上っててっぺんに到達して向きを変える仕草は殊のほかうまくいきました。cssやstyle属性にてtransform:scaleX(-1)を使えば、画像のみならずテキストをも反転することができます。少年🚶は画像ではなく絵文字すなわちテキストです。
setTimeoutを使った遅延関数において、処理を制御する変数は関数内に定義する自動変数でなく関数外で定義するグローバル変数です。
自動変数は1回の動作完了で消滅するので適切ではありません。初期化処理は遅延関数の外でするのが最適です。
少年を移動させるstart関数は当初、body要素のonloadにてページのロード時に呼び出され次いで関数の末尾で自分自身を呼び出す再帰コールをしています。
あ