🎉💰 0円 🤑🎊
🐱
🦄
🐸
🦊
```html
<!DOCTYPE html>
<html>
<head>
<style>
@keyframes bounce {
0% { transform: translateY(0); }
50% { transform: translateY(-20px); }
100% { transform: translateY(0); }
}
@keyframes float {
0% { transform: translateY(0); opacity: 1; }
100% { transform: translateY(-50px); opacity: 0; }
}
@keyframes sparkle {
0% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.5); opacity: 0.5; }
100% { transform: scale(1); opacity: 0; }
}
</style>
</head>
<body>
<div style="width: 400px; height: 400px; position: relative; background-color: #f0f8ff; overflow: hidden; border: 2px solid #ccc; border-radius: 10px;">
<div style="position: absolute; top: 20px; left: 50%; transform: translateX(-50%); font-size: 24px;">
🎉💰 <span id="prize" style="color: black;">0</span>円 🤑🎊
</div>
<div style="position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);">
<button id="upgradeBtn" style="padding: 10px 20px; font-size: 16px; border: none; border-radius: 5px; cursor: pointer; background-color: #ffeb3b;">賞金アップ！🚀</button>
</div>
<!-- Animated Emojis -->
<div style="position: absolute; top: 50px; left: 20px; font-size: 30px; animation: bounce 2s infinite;">🐱</div>
<div style="position: absolute; top: 150px; right: 30px; font-size: 30px; animation: bounce 2s infinite 0.5s;">🦄</div>
<div style="position: absolute; bottom: 100px; left: 50px; font-size: 30px; animation: bounce 2s infinite 1s;">🐸</div>
<div style="position: absolute; bottom: 150px; right: 70px; font-size: 30px; animation: bounce 2s infinite 1.5s;">🦊</div>
<canvas id="confetti" width="400" height="400" style="position: absolute; top: 0; left: 0; pointer-events: none;"></canvas>
<script>
const prizeElement = document.getElementById('prize');
const upgradeBtn = document.getElementById('upgradeBtn');
let prize = 0;
let rate = 100;
let interval;
let timeLeft = 600; // 10 minutes in seconds
function updatePrize() {
prize += rate;
prizeElement.textContent = prize.toLocaleString();
if (rate === 1000) {
prizeElement.style.color = 'gold';
} else {
prizeElement.style.color = 'black';
}
if (timeLeft > 0) {
timeLeft--;
if (timeLeft === 0) {
clearInterval(interval);
upgradeBtn.disabled = true;
upgradeBtn.style.backgroundColor = '#ccc';
alert('時間終了！賞金は ' + prize.toLocaleString() + '円になりました！🎊');
}
}
}
interval = setInterval(updatePrize, 1000);
upgradeBtn.addEventListener('click', () => {
if (rate === 100) {
rate = 1000;
} else {
rate = 100;
}
// Create sparkles
const confettiCanvas = document.getElementById('confetti');
const ctx = confettiCanvas.getContext('2d');
const colors = ['#FFC107', '#FF5722', '#4CAF50', '#03A9F4', '#E91E63'];
for (let i = 0; i < 20; i++) {
const x = Math.random() * 400;
const y = 200;
const size = Math.random() * 5 + 5;
const color = colors[Math.floor(Math.random() * colors.length)];
ctx.fillStyle = color;
ctx.beginPath();
ctx.arc(x, y, size, 0, Math.PI * 2);
ctx.fill();
}
// Animate confetti
let opacity = 1;
const animation = setInterval(() => {
ctx.clearRect(0, 0, 400, 400);
opacity -= 0.05;
if (opacity <= 0) {
clearInterval(animation);
} else {
ctx.globalAlpha = opacity;
}
}, 50);
// Button animation
upgradeBtn.style.transform = 'scale(1.1)';
setTimeout(() => {
upgradeBtn.style.transform = 'scale(1)';
}, 100);
});
</script>
</div>
</body>
</html>
```