🎉🚀💰✨🌟🎈🕹️😃😂🙌🎊🍀🌈🎁
00:00
💴 賞金: ¥0
:
```html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>逃走中タイマー</title>
<style>
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-20px); }
}
@keyframes sparkle {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
@keyframes shake {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-5px); }
75% { transform: translateX(5px); }
}
@keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@keyframes fadeInOut {
0%, 100% { opacity: 1; }
50% { opacity: 0.3; }
}
</style>
</head>
<body>
<div style="width:400px; height:400px; background-color:pink; position:relative; overflow:hidden; display:flex; flex-direction:column; align-items:center; justify-content:center; box-sizing:border-box; padding:10px;">
<div id="emoji-container" style="position:absolute; top:5px; left:5px; font-size:24px; animation: rotate 10s linear infinite;">
🎉🚀💰✨🌟🎈🕹️😃😂🙌🎊🍀🌈🎁
</div>
<div style="font-family: serif; font-weight: bold; font-size: 48px; margin-bottom: 10px;">
<span id="timer">00:00</span>
</div>
<div style="font-family: Arial, sans-serif; color: green; font-size: 24px; margin-bottom: 20px;">
💴 賞金: <span id="award">¥0</span>
</div>
<div style="display:flex; gap:10px; margin-bottom: 10px;">
<input type="number" id="minutes" placeholder="分数" min="0" max="200" style="width:60px; padding:5px; font-size:16px; border:2px solid #fff; border-radius:5px; text-align:center;">
<span style="font-size:24px;">:</span>
<input type="number" id="seconds" placeholder="秒数" min="0" max="59" style="width:60px; padding:5px; font-size:16px; border:2px solid #fff; border-radius:5px; text-align:center;">
</div>
<div style="margin-bottom: 20px;">
<input type="number" id="unit-price" placeholder="単価" min="0" max="100000" style="width:140px; padding:5px; font-size:16px; border:2px solid #fff; border-radius:5px; text-align:center; color:green; font-family: 'Courier New', Courier, monospace;">
</div>
<div style="display:flex; gap:10px;">
<button id="start-button" style="padding:10px 20px; font-size:16px; border:none; border-radius:5px; background-color:#ff69b4; color:white; cursor:pointer; animation: sparkle 2s infinite;">
スタート 🚀
</button>
<button id="reduce-button" style="padding:10px 20px; font-size:16px; border:none; border-radius:5px; background-color:#ff69b4; color:white; cursor:pointer; animation: bounce 2s infinite;">
-1分 ⏬
</button>
</div>
<div id="click-effect" style="position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); font-size:50px; pointer-events:none;"></div>
</div>
<script>
let timerInterval;
let remainingSeconds = 0;
let award = 0;
let unitPrice = 0;
let isRunning = false;
const timerDisplay = document.getElementById('timer');
const awardDisplay = document.getElementById('award');
const emojiContainer = document.getElementById('emoji-container');
const clickEffect = document.getElementById('click-effect');
document.getElementById('start-button').addEventListener('click', () => {
if(isRunning) return;
let mins = parseInt(document.getElementById('minutes').value) || 0;
let secs = parseInt(document.getElementById('seconds').value) || 0;
unitPrice = parseInt(document.getElementById('unit-price').value) || 0;
mins = mins > 200 ? 200 : mins;
secs = secs > 59 ? 59 : secs;
unitPrice = unitPrice > 100000 ? 100000 : unitPrice;
remainingSeconds = mins * 60 + secs;
timerDisplay.textContent = `${String(Math.floor(remainingSeconds /60)).padStart(2,'0')}:${String(remainingSeconds %60).padStart(2,'0')}`;
awardDisplay.textContent = `¥${award}`;
isRunning = true;
timerInterval = setInterval(updateTimer,1000);
emojiContainer.style.display = 'block';
});
document.getElementById('reduce-button').addEventListener('click', () => {
if(remainingSeconds >=60){
remainingSeconds -=60;
award += unitPrice;
timerDisplay.textContent = `${String(Math.floor(remainingSeconds /60)).padStart(2,'0')}:${String(remainingSeconds %60).padStart(2,'0')}`;
awardDisplay.textContent = `¥${award}`;
triggerClickEffect('-1分');
}
});
function updateTimer(){
if(remainingSeconds >0){
remainingSeconds--;
timerDisplay.textContent = `${String(Math.floor(remainingSeconds /60)).padStart(2,'0')}:${String(remainingSeconds %60).padStart(2,'0')}`;
if(remainingSeconds <=60){
playBeep();
emojiContainer.style.display = 'none';
}
award += unitPrice;
awardDisplay.textContent = `¥${award}`;
} else{
clearInterval(timerInterval);
isRunning = false;
triggerClickEffect('終了 🎉');
}
}
function playBeep(){
const context = new (window.AudioContext || window.webkitAudioContext)();
const oscillator = context.createOscillator();
oscillator.type = 'sine';
oscillator.frequency.setValueAtTime(1000, context.currentTime);
oscillator.connect(context.destination);
oscillator.start();
oscillator.stop(context.currentTime +0.2);
}
document.querySelectorAll('button').forEach(button => {
button.addEventListener('click', () => {
button.style.transform = 'scale(0.95)';
setTimeout(() => { button.style.transform = 'scale(1)'; }, 100);
});
});
function triggerClickEffect(text){
clickEffect.textContent = text + ' 🎊';
clickEffect.style.opacity = '1';
clickEffect.style.transition = 'opacity 0.5s';
setTimeout(() => {
clickEffect.style.opacity = '0';
}, 1000);
}
</script>
</body>
</html>
```