ユニバーサルデザイン的には好ましくないと思いますが、実験的に配置した画像をクリックすると配置画像がランダムに動き回る展開を整理してみました。
ルート階層の中に・・・
picフォルダー（image1.png〜image5.png）
という構造です。
<!-- index.html -->
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>ランダムに動き回るキャラクター</title>
<style>
body {
margin: 0;
background: Black; /* 黒バック */
overflow: hidden;
position: relative;
}
img {
position: absolute;
width: 400px;
height: 400px;
transition: transform 1s ease-in-out;
/* transformの値で動きの間隔を指定 */
}
</style>
</head>
<body>
<!-- 5枚のpngファイルを100pxづつズラして配置-->
<img src="pic/image1.png" alt="Image 1"
class="movable" style="left: 0; top: 0;">
<img src="pic/image2.png" alt="Image 2"
class="movable" style="left: 100px; top: 100px;">
<img src="pic/image3.png" alt="Image 3"
class="movable" style="left: 200px; top: 200px;">
<img src="pic/image4.png" alt="Image 4"
class="movable" style="left: 300px; top: 300px;">
<img src="pic/image5.png" alt="Image 5"
class="movable" style="left: 400px; top: 400px;">
<script>
/* 画像のどこかをクリックしたらランダムに動き回る */
document.body.addEventListener('click', function() {
var images = document.querySelectorAll('.movable');
/* Math.random()関数は、0以上1未満の範囲で
浮動小数点の擬似乱数を返します。
その範囲では大凡均一分布となり、
ユーザーは範囲の拡大をすることができます。 */
images.forEach(function(image) {
setInterval(function() {
var randomX = Math.random()
* (window.innerWidth - image.width);
var randomY = Math.random()
* (window.innerHeight - image.height);
image.style.transform =
'translate(' + randomX + 'px, ' + randomY + 'px)';
}, 500);
/* 数字を小さくすると動きが小刻みになります */
});
});
</script>
</body>
</html>
<!-- index.html -->
表示した直後の状態。
イラストの任意の位置をクリックでランダムに動き出します。
停止処理はしていないので永遠に動き続けます。
