130:00 ⏰
💰 現在の賞金: 0 円 💸
<!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%, 100% { opacity: 1; }
50% { opacity: 0; }
}
@keyframes bounce {
0%, 100%, 20%, 50%, 80% { transform: translateY(0); }
40% { transform: translateY(-30px); }
60% { transform: translateY(-15px); }
}
</style>
</head>
<body>
<div style="width: 400px; height: 400px; border: 2px solid #000; padding: 10px; position: relative; box-sizing: border-box;">
<div style="font-size: 24px; text-align: center;">
<span id="time" style="font-size: 30px; font-weight: bold;">130:00</span> ⏰
</div>
<div style="font-size: 24px; text-align: center; margin-top: 10px;">
💰 現在の賞金: <span id="prize" style="font-size: 30px; font-weight: bold;">0</span> 円 💸
</div>
<div id="message" style="font-size: 20px; text-align: center; margin-top: 10px;"></div>
<div style="text-align: center; margin-top: 20px;">
<button onclick="start()" style="font-size: 20px; margin: 5px;">🏁 スタート</button>
<button onclick="stop()" style="font-size: 20px; margin: 5px;">⏹ ストップ</button>
<button onclick="reset()" style="font-size: 20px; margin: 5px;">🔄 リセット</button>
<button onclick="fastForward()" style="font-size: 20px; margin: 5px;">⏩ 早送り</button>
<button onclick="rewind()" style="font-size: 20px; margin: 5px;">⏪ 巻き戻し</button>
</div>
<div style="text-align: center; margin-top: 20px;" id="leverArea"></div>
<div id="finalPrize" style="font-size: 20px; text-align: right; position: absolute; top: 10px; right: 10px;"></div>
</div>
<script>
let totalTime = 130 * 60; // 130分を秒に変換
let currentTime = totalTime;
let prizeMoney = 0;
let prizeRate = 100;
let timer;
let missionStarted = false;
let levers = 3;
function updateDisplay() {
let minutes = String(Math.floor(currentTime / 60)).padStart(2, '0');
let seconds = String(currentTime % 60).padStart(2, '0');
document.getElementById('time').innerText = `${minutes}:${seconds}`;
document.getElementById('prize').innerText = prizeMoney.toLocaleString() + ' 円';
}
function start() {
if (!timer) {
timer = setInterval(() => {
currentTime--;
prizeMoney += prizeRate;
updateDisplay();
checkMission();
if (currentTime <= 0) {
clearInterval(timer);
timer = null;
showMessage(`逃げ切れば賞金${Math.floor(prizeMoney / 10000)}万円`);
}
}, 1000);
}
}
function stop() {
if (timer) {
clearInterval(timer);
timer = null;
}
}
function reset() {
stop();
currentTime = totalTime;
prizeMoney = 0;
prizeRate = 100;
missionStarted = false;
levers = 3;
document.getElementById('leverArea').innerHTML = '';
updateDisplay();
document.getElementById('message').innerText = '';
document.getElementById('finalPrize').innerText = '';
}
function fastForward() {
if (currentTime > 60) {
currentTime -= 60;
prizeMoney += prizeRate * 60;
updateDisplay();
}
}
function rewind() {
if (currentTime < totalTime - 60) {
currentTime += 60;
prizeMoney -= prizeRate * 60;
updateDisplay();
}
}
function checkMission() {
if (!missionStarted && currentTime <= (130 - 70) * 60) {
missionStarted = true;
showMessage(`賞金単価をアップせよ`);
showLevers();
}
if (currentTime <= (130 - 60) * 60) {
if (levers === 3) {
prizeRate = 50;
showMessage(`ミッション失敗`, true);
} else {
showMessage(`ミッションクリア`, true);
}
setTimeout(() => document.getElementById('message').innerText = '', 5000);
document.getElementById('leverArea').innerHTML = '';
}
}
function showMessage(text, blink = false) {
let messageDiv = document.getElementById('message');
messageDiv.innerText = text;
if (blink) {
messageDiv.style.animation = 'blink 1s infinite';
} else {
messageDiv.style.animation = '';
}
}
function showLevers() {
let leverArea = document.getElementById('leverArea');
for (let i = 0; i < 3; i++) {
let lever = document.createElement('div');
lever.innerText = `🔧 レバー${i + 1}`;
lever.style.fontSize = '20px';
lever.style.cursor = 'pointer';
lever.onclick = () => toggleLever(lever, i);
leverArea.appendChild(lever);
}
}
function toggleLever(lever, index) {
if (lever.style.transform === 'rotate(45deg)') {
lever.style.transform = '';
levers++;
updatePrizeRate();
} else {
lever.style.transform = 'rotate(45deg)';
lever.style.animation = 'bounce 1s';
levers--;
updatePrizeRate();
}
}
function updatePrizeRate() {
switch (3 - levers) {
case 1:
prizeRate = 200;
break;
case 2:
prizeRate = 300;
break;
case 3:
prizeRate = 400;
break;
}
}
updateDisplay();
</script>
</body>
</html>