130:00 🕒🎉
💰 ¥0
🎚️賞金アップレバー:
🎯 ミッション: 残り90分まで！
🔧 レバー数: 0
💴 賞金単価: ¥100
💴 賞金単価: ¥100
🏁 ミッション終了 🏁
💎 賞金単価をアップせよ！
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>逃走中タイマー風アプリ</title>
<style>
@keyframes bounce {
0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
40% { transform: translateY(-20px); }
60% { transform: translateY(-10px); }
}
@keyframes flash {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
.animate-bounce {
animation: bounce 2s infinite;
}
.animate-flash {
animation: flash 1s infinite;
}
@keyframes shake {
0% { transform: rotate(0deg); }
25% { transform: rotate(5deg); }
50% { transform: rotate(0deg); }
75% { transform: rotate(-5deg); }
100% { transform: rotate(0deg); }
}
.animate-shake {
animation: shake 0.5s;
}
</style>
</head>
<body>
<div id="timer" style="font-size:32px; text-align:center; margin-top:20px;">130:00 🕒🎉</div>
<div id="reward" style="font-size:24px; text-align:center; margin-top:10px;">💰 ¥0</div>
<div id="controls" style="text-align:center; margin-top:20px;">
<button id="start" style="font-size:16px; margin:5px;">🏁スタート</button>
<button id="stop" style="font-size:16px; margin:5px;">⏹️ストップ</button>
<button id="fast" style="font-size:16px; margin:5px;">⏩早送り</button>
<button id="rewind" style="font-size:16px; margin:5px;">⏪巻き戻し</button>
<button id="reset" style="font-size:16px; margin:5px;">🔄リセット</button>
</div>
<div id="lever-section" style="text-align:center; margin-top:20px; display:none;">
<span>🎚️賞金アップレバー:</span>
<button class="lever" style="font-size:20px; margin:5px;">🔧</button>
<button class="lever" style="font-size:20px; margin:5px;">🔧</button>
<button class="lever" style="font-size:20px; margin:5px;">🔧</button>
</div>
<div id="mission" style="text-align:center; margin-top:10px; display:none;">
🎯 ミッション: 残り90分まで！
</div>
<div id="status" style="position:absolute; top:10px; right:10px; text-align:right; display:none;">
🔧 レバー数: <span id="lever-count">0</span><br>
💴 賞金単価: ¥<span id="unit">100</span>
</div>
<div id="end-message" style="position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); font-size:24px; display:none;">
🏁 ミッション終了 🏁
</div>
<div id="upgrade-message" style="position:absolute; top:70px; right:10px; font-size:16px; display:none;">
💎 賞金単価をアップせよ！
</div>
<script>
let totalSeconds = 130 * 60;
let reward = 0;
let timerInterval;
let unit = 100;
let leverCount = 0;
let missionActive = false;
const timerElement = document.getElementById('timer');
const rewardElement = document.getElementById('reward');
const startBtn = document.getElementById('start');
const stopBtn = document.getElementById('stop');
const fastBtn = document.getElementById('fast');
const rewindBtn = document.getElementById('rewind');
const resetBtn = document.getElementById('reset');
const leverSection = document.getElementById('lever-section');
const levers = document.querySelectorAll('.lever');
const statusSection = document.getElementById('status');
const leverCountElement = document.getElementById('lever-count');
const unitElement = document.getElementById('unit');
const missionElement = document.getElementById('mission');
const endMessage = document.getElementById('end-message');
const upgradeMessage = document.getElementById('upgrade-message');
let oneMinuteAudio = new Audio('data:audio/wav;base64,UklGRiQAAABXQVZFZm10IBAAAAABAAEAESsAACJWAAACABAAZGF0YRAAAAAA'); // Silent audio
function updateDisplay() {
let minutes = Math.floor(totalSeconds / 60);
let seconds = totalSeconds % 60;
timerElement.textContent = `${String(minutes).padStart(2,'0')}:${String(seconds).padStart(2,'0')} 🕒🎉`;
rewardElement.textContent = `💰 ¥${reward.toLocaleString()}`;
leverCountElement.textContent = leverCount;
unitElement.textContent = unit;
}
function startTimer() {
if (timerInterval) return;
timerInterval = setInterval(() => {
if (totalSeconds > 0) {
totalSeconds--;
reward += unit;
updateDisplay();
if (totalSeconds === 1) {
oneMinuteAudio.play();
}
if (totalSeconds === 100 * 60 && !missionActive) {
missionActive = true;
missionElement.style.display = 'block';
leverSection.style.display = 'block';
upgradeMessage.style.display = 'block';
statusSection.style.display = 'block';
}
if (totalSeconds === 90 * 60) {
endMission();
}
} else {
clearInterval(timerInterval);
}
}, 1000);
}
function stopTimer() {
clearInterval(timerInterval);
timerInterval = null;
}
function fastForward() {
if (totalSeconds > 60) {
totalSeconds -= 60;
reward += 60 * unit;
updateDisplay();
}
}
function rewind() {
totalSeconds += 60;
reward -= 60 * unit;
if (reward < 0) reward = 0;
updateDisplay();
}
function resetTimer() {
stopTimer();
totalSeconds = 130 * 60;
reward = 0;
unit = 100;
leverCount = 0;
missionActive = false;
leverSection.style.display = 'none';
missionElement.style.display = 'none';
statusSection.style.display = 'none';
upgradeMessage.style.display = 'none';
endMessage.style.display = 'none';
updateDisplay();
}
function endMission() {
stopTimer();
endMessage.style.display = 'block';
setTimeout(() => {
endMessage.style.display = 'none';
}, 10000);
upgradeMessage.style.display = 'none';
missionElement.style.display = 'none';
}
startBtn.addEventListener('click', () => {
startBtn.classList.add('animate-bounce');
setTimeout(() => { startBtn.classList.remove('animate-bounce'); }, 1000);
startTimer();
});
stopBtn.addEventListener('click', () => {
stopBtn.classList.add('animate-flash');
setTimeout(() => { stopBtn.classList.remove('animate-flash'); }, 1000);
stopTimer();
});
fastBtn.addEventListener('click', () => {
fastBtn.classList.add('animate-shake');
setTimeout(() => { fastBtn.classList.remove('animate-shake'); }, 500);
fastForward();
});
rewindBtn.addEventListener('click', () => {
rewindBtn.classList.add('animate-shake');
setTimeout(() => { rewindBtn.classList.remove('animate-shake'); }, 500);
rewind();
});
resetBtn.addEventListener('click', () => {
resetBtn.classList.add('animate-flash');
setTimeout(() => { resetBtn.classList.remove('animate-flash'); }, 1000);
resetTimer();
});
levers.forEach((lever) => {
lever.addEventListener('click', () => {
if (missionActive && totalSeconds <= 100 * 60 && totalSeconds > 90 * 60 && leverCount < 3) {
lever.classList.add('animate-shake');
setTimeout(() => { lever.classList.remove('animate-shake'); }, 500);
leverCount++;
unit += 100;
upgradeMessage.textContent = `🔼 賞金単価をアップしました！`;
updateDisplay();
if (leverCount === 3) {
leverSection.style.display = 'none';
}
}
});
});
updateDisplay();
</script>
</body>
</html>
```