HTMLで場面クリックでランダムな円を描画させてみました。
<!-- 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;
}
.circle {
position: absolute;
border-radius: 50%;
transition: transform 0.3s ease;
}
</style>
</head>
<body>
<script>
document.addEventListener('click', function(event) {
const circle = document.createElement('div');
const size = Math.random() * 100 + 20;
// 20pxから120pxのランダムなサイズ
const color = `hsl(${Math.random() * 360}, 100%, 50%)`;
// ランダムな色
circle.style.width = `${size}px`;
circle.style.height = `${size}px`;
circle.style.backgroundColor = color;
circle.style.left = `${event.clientX - size / 2}px`;
circle.style.top = `${event.clientY - size / 2}px`;
circle.classList.add('circle');
document.body.appendChild(circle);
});
</script>
</body>
</html>
<!-- index.html -->
実行すると黒塗りの画面になるので、任意の位置をクリックするとランダムサイズでランダムな色の円が描画されます。
あとはクリックを続けて行くだけです。
