⏱️ゲームタイマー
60:00
💰現在の賞金
¥0
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>逃走中タイマー風アプリ</title>
<style>
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
40% { transform: translateY(-30px); }
60% { transform: translateY(-15px); }
}
@keyframes fade {
from { opacity: 1; }
to { opacity: 0; }
}
</style>
</head>
<body>
<div style="width:400px;height:400px;padding:10px;border:2px solid #000;background-color:#fff;text-align:center;font-family:Arial;">
<div style="font-size:24px;margin-bottom:20px;">⏱️ゲームタイマー</div>
<div id="time" style="font-size:30px;margin-bottom:20px;">60:00</div>
<div style="font-size:24px;margin-bottom:20px;">💰現在の賞金</div>
<div id="prize" style="font-size:28px;">¥0</div>
<div style="margin-top:20px;">
<div style="display:inline-block;margin:5px;"><button onclick="startGame()" style="font-size:18px;">▶️スタート</button></div>
<div style="display:inline-block;margin:5px;"><button onclick="stopGame()" style="font-size:18px;">⏸️ストップ</button></div>
<div style="display:inline-block;margin:5px;"><button onclick="restartGame()" style="font-size:18px;">🔄リスタート</button></div>
</div>
<div style="margin-top:10px;">
<div style="display:inline-block;margin:5px;"><button onclick="rewindGame()" style="font-size:18px;">⏪巻き戻し</button></div>
<div style="display:inline-block;margin:5px;"><button onclick="addBonus()" style="font-size:18px;">🎁ボーナス</button></div>
</div>
</div>
<script>
let time = 3600;
let prize = 0;
let interval;
function pads(number) {
return number < 10 ? '0' + number : number;
}
function displayTime() {
const minutes = pads(Math.floor(time / 60));
const seconds = pads(time % 60);
document.getElementById('time').textContent = `${minutes}:${seconds}`;
}
function displayPrize() {
document.getElementById('prize').textContent = `¥${prize.toLocaleString()}`;
}
function updateGame() {
if (time > 0) {
time--;
prize += 100;
displayTime();
displayPrize();
}
}
function startGame() {
if (!interval) {
interval = setInterval(updateGame, 1000);
}
}
function stopGame() {
if (interval) {
clearInterval(interval);
interval = null;
}
}
function restartGame() {
stopGame();
time = 3600;
prize = 0;
displayTime();
displayPrize();
}
function rewindGame() {
if (time + 60 <= 3600) {
time += 60;
} else {
time = 3600;
}
prize -= 6000;
if (prize < 0) prize = 0;
displayTime();
displayPrize();
}
function addBonus() {
prize += 3000;
displayPrize();
const prizeElement = document.getElementById('prize');
prizeElement.style.animation = 'bounce 0.5s ease-in-out';
setTimeout(() => {
prizeElement.style.animation = '';
}, 500);
}
displayTime();
displayPrize();
</script>
</body>
</html>