HTMLで場面クリックで画像をランダムサイズと角度で描画させてみました。
ルート階層の中に・・・
picフォルダー（image.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;
overflow: hidden;
background: black;
}
.image {
position: absolute;
transition: transform 0.3s ease;
}
</style>
</head>
<body>
<script>
document.addEventListener('click', function(event) {
const img = document.createElement('img');
const size = Math.random() * 100 + 50;
// 50pxから150pxのランダムなサイズ
const angle = Math.random() * 360;
// 0度から360度のランダムな角度
img.src = 'pic/image.png';
// 画像のURLを指定
img.style.width = `${size}px`;
img.style.height = `${size}px`;
img.style.left = `${event.clientX - size / 2}px`;
img.style.top = `${event.clientY - size / 2}px`;
img.style.transform = `rotate(${angle}deg)`;
// ランダムな角度で回転
img.classList.add('image');
document.body.appendChild(img);
});
</script>
</body>
</html>
<!-- index.html -->
実行すると黒塗りの画面になるので、任意の位置をクリックするとランダムサイズでランダム角度に画像が描画されます。
あとはクリックを続けて行くだけです。（キモイ）
