💣 💨 100:00
💰 0 円
```html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>逃走中タイマー風アプリ</title>
<style>
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
40% {transform: translateY(-30px);}
60% {transform: translateY(-15px);}
}
@keyframes blink {
50% { opacity: 0; }
}
@keyframes pop {
0% { transform: scale(1); }
50% { transform: scale(1.5); }
100% { transform: scale(1); }
}
.click-effect {
display: inline-block;
animation: pop 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
</style>
</head>
<body>
<div style="width: 400px; height: 400px; margin: auto; display: flex; flex-direction: column; justify-content: center; align-items: center; background: linear-gradient(135deg, #ffec99, #ff99cc); border-radius: 20px; box-shadow: 0px 0px 20px rgba(0,0,0,0.2);">
<div id="timer" style="font-size: 2rem; font-family: 'Arial', sans-serif; margin-bottom: 20px;">💣 💨 100:00</div>
<div id="prize" style="font-size: 2rem; font-family: 'Arial', sans-serif;">💰 0 円</div>
<div style="margin-top: 20px;">
<button onclick="increasePrize()" style="font-size: 1.5rem; padding: 10px 20px; background-color: #ffcc00; border: none; border-radius: 10px; cursor: pointer;">💸 プラス 💸</button>
</div>
<div id="click-effect-container" style="position: relative;"></div>
</div>
<script>
let timeRemaining = 6000; // 100 minutes in seconds
let currentPrize = 0;
const timerElement = document.getElementById('timer');
const prizeElement = document.getElementById('prize');
const clickEffectContainer = document.getElementById('click-effect-container');
function formatTime(time) {
const minutes = Math.floor(time / 60).toString().padStart(2, '0');
const seconds = (time % 60).toString().padStart(2, '0');
return `${minutes}:${seconds}`;
}
function formatPrize(prize) {
return prize.toLocaleString('ja-JP') + " 円";
}
function updateDisplay() {
timerElement.innerText = `💣 💨 ${formatTime(timeRemaining)}`;
prizeElement.innerText = `💰 ${formatPrize(currentPrize)}`;
}
function increasePrize() {
if (timeRemaining > 1800) {
currentPrize += 200;
updateDisplay();
}
// Click effect
const effect = document.createElement('div');
effect.className = 'click-effect';
effect.innerText = '🎉';
effect.style.position = 'absolute';
effect.style.left = Math.random() * 300 + 'px';
effect.style.top = Math.random() * 300 + 'px';
clickEffectContainer.appendChild(effect);
setTimeout(() => {
effect.remove();
}, 300);
}
const timerInterval = setInterval(() => {
if (timeRemaining > 1800) {
timeRemaining--;
currentPrize += 200;
updateDisplay();
} else {
clearInterval(timerInterval);
timerElement.style.animation = 'blink 1s infinite';
}
}, 1000);
updateDisplay();
</script>
</body>
</html>
```