⏰ 140:00
🤑 賞金: ¥0
```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>
@keyframes blink {
0% { opacity: 1; }
50% { opacity: 0; }
100% { opacity: 1; }
}
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
@keyframes shake {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-5px); }
75% { transform: translateX(5px); }
}
</style>
</head>
<body>
<div style="width: 400px; height: 400px; display: flex; flex-direction: column; justify-content: center; align-items: center; background-color: #FFEC94;">
<div id="timer" style="font-size: 2em; font-weight: bold; margin-bottom: 20px;">⏰ 140:00</div>
<div id="reward" style="font-size: 1.5em; margin-bottom: 20px;">🤑 賞金: ¥0</div>
<input type="button" value="スタート 🎉" onclick="startTimer()" style="font-size: 1.2em; padding: 10px 20px; border-radius: 10px; border: none; background-color: #FF6B6B; color: #FFF; cursor: pointer; animation: bounce 1s infinite;">
</div>
<script>
let timeLeft = 140 * 60; // 140 minutes in seconds
let timerInterval;
let isRunning = false;
let totalReward = 0;
function formatTime(seconds) {
const minutes = Math.floor(seconds / 60);
const secondsLeft = seconds % 60;
return `${String(minutes).padStart(2, '0')}:${String(secondsLeft).padStart(2, '0')}`;
}
function startTimer() {
if (isRunning) return; // Prevent multiple clicks
isRunning = true;
document.querySelector("input[type='button']").disabled = true;
timerInterval = setInterval(() => {
if (timeLeft <= 0) {
clearInterval(timerInterval);
document.querySelector("#timer").style.animation = "blink 1s infinite";
return;
}
timeLeft--;
document.querySelector("#timer").textContent = `⏰ ${formatTime(timeLeft)}`;
if (timeLeft > 80 * 60) {
totalReward += 100;
} else {
totalReward += 300;
}
document.querySelector("#reward").textContent = `🤑 賞金: ¥${totalReward.toLocaleString()}`;
document.querySelector("#timer").style.animation = timeLeft <= 10 ? "shake 0.5s infinite" : "";
}, 1000);
}
document.querySelector("#timer").addEventListener("click", function() {
const confetti = ['🎉', '🎊', '✨', '🎈'];
const randomEmoji = confetti[Math.floor(Math.random() * confetti.length)];
const emojiDiv = document.createElement("div");
emojiDiv.textContent = randomEmoji;
emojiDiv.style.position = "absolute";
emojiDiv.style.top = `${Math.random() * 80}%`;
emojiDiv.style.left = `${Math.random() * 80}%`;
emojiDiv.style.fontSize = "2em";
document.body.appendChild(emojiDiv);
setTimeout(() => emojiDiv.remove(), 1500);
});
</script>
</body>
</html>
```