⏰ 残り時間: 30:00
💰 現在の賞金: 0円
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>逃走中タイマー風アプリ</title>
<style>
/* アニメーション定義 */
@keyframes bounce {
0% { transform: translateY(0); }
50% { transform: translateY(-10px); }
100% { transform: translateY(0); }
}
@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); }
}
.bounce {
animation: bounce 0.5s;
}
.shake {
animation: shake 0.5s;
}
</style>
</head>
<body>
<div style="text-align:center; font-size:24px; margin-top:20px;">
⏰ 残り時間: <span id="timer" style="font-weight:bold;">30:00</span>
</div>
<div style="text-align:center; font-size:24px; margin-top:10px;">
💰 現在の賞金: <span id="prize" style="font-weight:bold;">0円</span>
</div>
<div style="text-align:center; margin-top:20px;">
<button id="startBtn" style="font-size:16px; padding:10px; margin:5px;">スタート🏁</button>
<button id="stopBtn" style="font-size:16px; padding:10px; margin:5px;">ストップ✋</button>
<button id="restartBtn" style="font-size:16px; padding:10px; margin:5px;">リスタート🔄</button>
<button id="rewindBtn" style="font-size:16px; padding:10px; margin:5px;">巻き戻し⏪</button>
<button id="fastForwardBtn" style="font-size:16px; padding:10px; margin:5px;">早送り⏩</button>
</div>
<div style="text-align:center; margin-top:20px;">
<button id="bonus1000Btn" style="font-size:16px; padding:10px; margin:5px;">1000円ボーナス💎</button>
<button id="bonus3000Btn" style="font-size:16px; padding:10px; margin:5px;">3000円ボーナス💎💎</button>
<button id="stopBonusBtn" style="font-size:16px; padding:10px; margin:5px;">ボーナス停止⏹️</button>
</div>
<div style="text-align:center; margin-top:20px;">
<button id="add100Btn" style="font-size:16px; padding:10px; margin:5px;">1秒100円➕</button>
<button id="add200Btn" style="font-size:16px; padding:10px; margin:5px;">1秒200円➕</button>
</div>
<script>
// 要素の取得
const timerElement = document.getElementById('timer');
const prizeElement = document.getElementById('prize');
const startBtn = document.getElementById('startBtn');
const stopBtn = document.getElementById('stopBtn');
const restartBtn = document.getElementById('restartBtn');
const rewindBtn = document.getElementById('rewindBtn');
const fastForwardBtn = document.getElementById('fastForwardBtn');
const bonus1000Btn = document.getElementById('bonus1000Btn');
const bonus3000Btn = document.getElementById('bonus3000Btn');
const stopBonusBtn = document.getElementById('stopBonusBtn');
const add100Btn = document.getElementById('add100Btn');
const add200Btn = document.getElementById('add200Btn');
// 変数の初期化
let totalSeconds = 1800; // 30分
let prize = 0;
let timerInterval = null;
let bonusInterval = null;
let prizePerSecond = 300;
let bonusActive = false;
// 表示の更新
function updateDisplay() {
const minutes = String(Math.floor(totalSeconds / 60)).padStart(2, '0');
const seconds = String(totalSeconds % 60).padStart(2, '0');
timerElement.textContent = `${minutes}:${seconds}`;
prizeElement.textContent = `${prize.toLocaleString()}円`;
}
// タイマー開始
function startTimer() {
if (timerInterval) return;
timerInterval = setInterval(() => {
if (totalSeconds > 0) {
totalSeconds--;
prize += prizePerSecond;
updateDisplay();
} else {
clearInterval(timerInterval);
timerInterval = null;
}
}, 1000);
}
// タイマー停止
function stopTimer() {
if (timerInterval) {
clearInterval(timerInterval);
timerInterval = null;
}
}
// タイマーリスタート
function restartTimer() {
stopTimer();
totalSeconds = 1800;
prize = 0;
updateDisplay();
}
// タイマー巻き戻し（60秒追加）
function rewindTimer() {
totalSeconds = Math.min(totalSeconds + 60, 1800);
updateDisplay();
}
// タイマー早送り（60秒減少）
function fastForwardTimer() {
totalSeconds = Math.max(totalSeconds - 60, 0);
updateDisplay();
}
// ボーナス開始
function startBonus(amount) {
if (bonusActive) return;
bonusActive = true;
stopTimer();
prizePerSecond = amount;
bonusInterval = setInterval(() => {
prize += prizePerSecond;
updateDisplay();
}, 1000);
}
// ボーナス停止
function stopBonus() {
if (!bonusActive) return;
clearInterval(bonusInterval);
bonusInterval = null;
bonusActive = false;
prizePerSecond = 300;
updateDisplay();
startTimer();
}
// ボタンクリック時のアニメーション
function animateButton(button) {
button.classList.add('shake');
setTimeout(() => {
button.classList.remove('shake');
}, 500);
}
// 各ボタンのイベントリスナー設定
startBtn.addEventListener('click', () => {
startTimer();
startBtn.classList.add('bounce');
setTimeout(() => {
startBtn.classList.remove('bounce');
}, 500);
});
stopBtn.addEventListener('click', () => {
stopTimer();
animateButton(stopBtn);
});
restartBtn.addEventListener('click', () => {
restartTimer();
animateButton(restartBtn);
});
rewindBtn.addEventListener('click', () => {
rewindTimer();
animateButton(rewindBtn);
});
fastForwardBtn.addEventListener('click', () => {
fastForwardTimer();
animateButton(fastForwardBtn);
});
bonus1000Btn.addEventListener('click', () => {
startBonus(1000);
animateButton(bonus1000Btn);
});
bonus3000Btn.addEventListener('click', () => {
startBonus(3000);
animateButton(bonus3000Btn);
});
stopBonusBtn.addEventListener('click', () => {
stopBonus();
animateButton(stopBonusBtn);
});
add100Btn.addEventListener('click', () => {
prize += 100;
prizeElement.classList.add('shake');
updateDisplay();
setTimeout(() => {
prizeElement.classList.remove('shake');
}, 500);
});
add200Btn.addEventListener('click', () => {
prize += 200;
prizeElement.classList.add('shake');
updateDisplay();
setTimeout(() => {
prizeElement.classList.remove('shake');
}, 500);
});
// 初期表示更新
updateDisplay();
</script>
</body>
</html>
```