🎲 ランダム選択ゲーム 🎲
🎉
😊: 0
😂: 0
😍: 0
🤔: 0
😎: 0
🙃: 0
🤩: 0
😜: 0
🤪: 0
🥳: 0
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ランダム選択ゲーム 🎉</title>
<style>
@keyframes shake {
0% { transform: translate(1px, 1px) rotate(0deg); }
10% { transform: translate(-1px, -2px) rotate(-1deg); }
20% { transform: translate(-3px, 0px) rotate(1deg); }
30% { transform: translate(3px, 2px) rotate(0deg); }
40% { transform: translate(1px, -1px) rotate(1deg); }
50% { transform: translate(-1px, 2px) rotate(-1deg); }
60% { transform: translate(-3px, 1px) rotate(0deg); }
70% { transform: translate(3px, 1px) rotate(-1deg); }
80% { transform: translate(-1px, -1px) rotate(1deg); }
90% { transform: translate(1px, 2px) rotate(0deg); }
100% { transform: translate(1px, -2px) rotate(-1deg); }
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
40% { transform: translateY(-30px); }
60% { transform: translateY(-15px); }
}
.shake {
animation: shake 0.5s;
}
.bounce {
animation: bounce 1s;
}
</style>
</head>
<body>
<div style="width: 100%; text-align: center; padding-top: 20px;">
<h1 style="font-size: 24px;">🎲 ランダム選択ゲーム 🎲</h1>
<button id="selectBtn" style="font-size: 20px; padding: 10px 20px; cursor: pointer;">選ぶ！✨</button>
<div id="result" style="font-size: 48px; margin: 20px 0; min-height: 60px;">🎉</div>
<div style="display: flex; flex-wrap: wrap; justify-content: center;">
<div style="margin: 5px; font-size: 18px;">😊: <span id="count0">0</span></div>
<div style="margin: 5px; font-size: 18px;">😂: <span id="count1">0</span></div>
<div style="margin: 5px; font-size: 18px;">😍: <span id="count2">0</span></div>
<div style="margin: 5px; font-size: 18px;">🤔: <span id="count3">0</span></div>
<div style="margin: 5px; font-size: 18px;">😎: <span id="count4">0</span></div>
<div style="margin: 5px; font-size: 18px;">🙃: <span id="count5">0</span></div>
<div style="margin: 5px; font-size: 18px;">🤩: <span id="count6">0</span></div>
<div style="margin: 5px; font-size: 18px;">😜: <span id="count7">0</span></div>
<div style="margin: 5px; font-size: 18px;">🤪: <span id="count8">0</span></div>
<div style="margin: 5px; font-size: 18px;">🥳: <span id="count9">0</span></div>
</div>
</div>
<script>
const emojis = ["😊","😂","😍","🤔","😎","🙃","🤩","😜","🤪","🥳"];
const counts = Array(10).fill(0);
const selectBtn = document.getElementById('selectBtn');
const result = document.getElementById('result');
selectBtn.addEventListener('click', () => {
selectBtn.classList.add('shake');
result.classList.add('bounce');
setTimeout(() => {
selectBtn.classList.remove('shake');
result.classList.remove('bounce');
}, 500);
const randomIndex = Math.floor(Math.random() * emojis.length);
counts[randomIndex]++;
result.textContent = emojis[randomIndex];
document.getElementById(`count${randomIndex}`).textContent = counts[randomIndex];
});
</script>
</body>
</html>
```