30: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 buttonPop {
0% { transform: scale(1); }
50% { transform: scale(1.2); }
100% { transform: scale(1); }
}
</style>
</head>
<body>
<div style="width: 400px; height: 400px; margin: 0 auto; text-align: center; border: solid 2px #000; background-color: #f0f0f0; position: relative;">
<div style="font-size: large;">
<div id="time" style="font-size: x-large; font-weight: bold; margin-top: 10px;">30:00</div>
<div id="award" style="font-size: x-large; font-weight: bold; margin-bottom: 10px;">0円</div>
</div>
<div id="buttons" style="position: absolute; bottom: 10px; width: 100%; display: flex; justify-content: center; flex-wrap: wrap;">
<div>
<input type="button" value="🏃 スタート" onclick="startTimer()" style="margin: 5px; padding: 5px;">
<input type="button" value="✋ ストップ" onclick="stopTimer()" style="margin: 5px; padding: 5px;">
<input type="button" value="⏩ 早送り" onclick="fastForward()" style="margin: 5px; padding: 5px;">
<input type="button" value="⏪ 巻き戻し" onclick="rewind()" style="margin: 5px; padding: 5px;">
</div>
<div>
<input type="button" value="💰 1000円ボーナス" onclick="bonus(1000)" style="margin: 5px; padding: 5px;">
<input type="button" value="💰 3000円ボーナス" onclick="bonus(3000)" style="margin: 5px; padding: 5px;">
<input type="button" value="🛑 ボーナス停止" onclick="stopBonus()" style="margin: 5px; padding: 5px;">
</div>
<div>
<input type="button" value="💲 1秒200円" onclick="changeRate(200)" style="margin: 5px; padding: 5px;">
<input type="button" value="💲 1秒100円" onclick="changeRate(100)" style="margin: 5px; padding: 5px;">
</div>
<div>
<input type="button" value="🔄 リスタート" onclick="resetGame()" style="margin: 5px; padding: 5px;">
</div>
</div>
</div>
<script>
let timerInterval;
let bonusInterval;
let timeLeft = 1800;
let award = 0;
let rate = 300;
let isBonusActive = false;
let bonusRate = 0;
function formatTime(seconds) {
let minutes = Math.floor(seconds / 60);
let secondsLeft = seconds % 60;
return `${minutes.toString().padStart(2, '0')}:${secondsLeft.toString().padStart(2, '0')}`;
}
function formatAward(amount) {
return `${amount.toLocaleString()}円`;
}
function startTimer() {
if (timerInterval || timeLeft <= 0) return;
timerInterval = setInterval(() => {
timeLeft--;
if (timeLeft > 0) {
award += (isBonusActive ? 0 : rate);
} else {
clearInterval(timerInterval);
timeLeft = 0;
}
document.getElementById("time").innerText = formatTime(timeLeft);
document.getElementById("award").innerText = formatAward(award);
}, 1000);
}
function stopTimer() {
clearInterval(timerInterval);
timerInterval = null;
}
function fastForward() {
if (timeLeft > 0) {
timeLeft = Math.max(0, timeLeft - 10);
document.getElementById("time").innerText = formatTime(timeLeft);
}
}
function rewind() {
timeLeft = Math.min(1800, timeLeft + 10);
document.getElementById("time").innerText = formatTime(timeLeft);
}
function bonus(amount) {
clearInterval(bonusInterval);
isBonusActive = true;
bonusRate = amount;
bonusInterval = setInterval(() => {
award += bonusRate;
document.getElementById("award").innerText = formatAward(award);
}, 1000);
}
function stopBonus() {
clearInterval(bonusInterval);
isBonusActive = false;
}
function changeRate(newRate) {
rate = newRate;
}
function resetGame() {
stopTimer();
stopBonus();
rate = 300;
timeLeft = 1800;
award = 0;
document.getElementById("time").innerText = formatTime(timeLeft);
document.getElementById("award").innerText = formatAward(award);
}
</script>
</body>
</html>
```