以下がJavaScriptを使った実装例です。セキュリティ上の問題がないように注意しました。
```html
<!DOCTYPE html>
<html>
<head>
<title>Dancing Emojis</title>
</head>
<body>
<style>
#dance-emojis {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 5rem;
cursor: default;
}
</style>
<div id="dance-emojis"></div>
<script>
// 配列に必要なエモジを用意する
const emojis = ['💃', '🕺', '🎵', '🎶', '🎤', '🎧', '🎼'];
// 画面の横幅と縦幅を取得する
const screenWidth = window.innerWidth;
const screenHeight = window.innerHeight;
// 画面の中央に固定するための座標
const centerCoord = {
x: screenWidth / 2,
y: screenHeight / 2
}
// 最初に表示するエモジの数
const initialEmojis = 10;
// エモジをランダムな座標に表示する関数
const createEmojiElement = (emoji) => {
// エモジの要素を作成する
const emojiElement = document.createElement('div');
emojiElement.innerText = emoji;
emojiElement.style.position = 'absolute';
// X座標とY座標をランダムに決定する
const emojiCoord = {
x: Math.random() * screenWidth,
y: Math.random() * screenHeight
}
// エモジの近くに表示するテキストを作成する
const textElements = [];
const textCount = Math.floor(Math.random() * 3) + 1;
for (let i = 0; i < textCount; i++) {
const textElement = document.createElement('div');
textElement.innerText = '楽しい！';
textElement.style.fontSize = '1rem';
textElement.style.position = 'absolute';
textElement.style.left = Math.random() * 50 + '%';
textElement.style.top = Math.random() * 50 + '%';
textElements.push(textElement);
}
// クリックしたときにエモジとテキストを拡大縮小するイベントを設定する
emojiElement.addEventListener('mousedown', () => {
const scale = Math.random() * 1.5 + 0.5;
emojiElement.style.transform = `scale(${scale})`;
textElements.forEach((textElement) => {
const textScale = Math.random() * 1.5 + 0.5;
textElement.style.transform = `scale(${textScale})`;
});
});
// エモジとテキストを動かすアニメーションを設定する
const animationDuration = Math.random() * 10 + 5;
const animationDelay = Math.random() * 5;
const animationTimingFunction = 'cubic-bezier(0.5, 0, 0.5, 1)';
emojiElement.style.animation = `move ${animationDuration}s ${animationTimingFunction} ${animationDelay}s infinite`;
textElements.forEach((textElement, index) => {
textElement.style.animation = `move ${animationDuration}s ${animationTimingFunction} ${animationDelay}s infinite`;
textElement.style.animationDelay = `${animationDelay + ((index + 1) * (animationDuration / textCount))}s`;
emojiElement.appendChild(textElement);
});
// エモジとテキストの座標を設定する
emojiElement.style.transform = `translate(${emojiCoord.x}px, ${emojiCoord.y}px)`;
textElements.forEach((textElement, index) => {
const textCoord = {
x: (Math.random() * 40 + 30) * Math.sign(Math.random() - 0.5),
y: (Math.random() * 40 + 30) * Math.sign(Math.random() - 0.5)
}
textElement.style.transform = `translate(${textCoord.x}%, ${textCoord.y}%)`;
emojiElement.appendChild(textElement);
});
return emojiElement;
}
// 初期表示するエモジをランダムに作成する
const emojiElements = [];
for (let i = 0; i < initialEmojis; i++) {
const emoji = emojis[Math.floor(Math.random() * emojis.length)];
const emojiElement = createEmojiElement(emoji);
emojiElements.push(emojiElement);
document.getElementById('dance-emojis').appendChild(emojiElement);
}
// マウスの移動に合わせてエモジを中央に近づけるイベントを設定する
window.addEventListener('mousemove', (event) => {
const mouseCoord = {
x: event.clientX,
y: event.clientY
}
emojiElements.forEach((emojiElement) => {
const emojiCoord = {
x: parseInt(emojiElement.style.transform.match(/\d+/g)[0]),
y: parseInt(emojiElement.style.transform.match(/\d+/g)[1])
}
const dx = mouseCoord.x - centerCoord.x;
const dy = mouseCoord.y - centerCoord.y;
const dEmojiX = emojiCoord.x - centerCoord.x;
const dEmojiY = emojiCoord.y - centerCoord.y;
const angle = Math.atan2(dy, dx) - Math.atan2(dEmojiY, dEmojiX);
const distance = Math.sqrt(dx * dx + dy * dy);
if (distance < 200) {
const emojiX = centerCoord.x + distance * Math.cos(angle);
const emojiY = centerCoord.y + distance * Math.sin(angle);
emojiElement.style.transform = `translate(${emojiX}px, ${emojiY}px)`;
}
});
});
// 一定間隔で新しいエモジを追加する
setInterval(() => {
if (Math.random() > 0.5) {
const emoji = emojis[Math.floor(Math.random() * emojis.length)];
const emojiElement = createEmojiElement(emoji);
document.getElementById('dance-emojis').appendChild(emojiElement);
emojiElements.push(emojiElement);
}
}, 1000);
// たまに🕺のエモジを追加する
setInterval(() => {
if (Math.random() > 0.8) {
const emojiElement = createEmojiElement('🕺');
document.getElementById('dance-emojis').appendChild(emojiElement);
emojiElements.push(emojiElement);
}
}, 10000);
</script>
</body>
</html>
```
このプログラムは、画面上をランダムに動き回るエモジを表示するものです。エモジの拡大縮小や移動にはアニメーションを利用しています。また、マウスの移動に合わせてエモジを中央に近づける機能も備えています。さらに、たまに🕺のエモジが現れます。
