⏰30:00⏰
💰0円💰
```html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>楽しい絵文字タイマー</title>
<style>
@keyframes fadeInOut {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
@keyframes bounce {
0%, 100%, 20%, 50%, 80% { transform: translateY(0); }
40% { transform: translateY(-30px); }
60% { transform: translateY(-15px); }
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.animated {
animation: fadeInOut 1s infinite;
}
.bounce {
animation: bounce 2s infinite;
}
.spin {
animation: spin 2s infinite;
}
</style>
</head>
<body>
<div style="text-align: center; width: 400px; height: 400px; position: relative; margin: auto; border: 2px solid black; background-color: #f0f8ff;">
<div style="font-size: 24px; margin: 20px;">
<span class="animated">⏰<span id="time">30:00</span>⏰</span>
</div>
<div style="font-size: 24px; margin: 20px;">
<span class="bounce">💰<span id="reward">0</span>円💰</span>
</div>
<div style="position: absolute; bottom: 20px; width: 100%; display: flex; justify-content: center;">
<button onclick="startGame()" style="font-size: 24px; padding: 10px 20px; margin: 5px;">スタート 🎮</button>
<button onclick="clickFun()" style="font-size: 24px; padding: 10px 20px; margin: 5px;">クリック 😊</button>
</div>
<div id="emoji" style="font-size: 48px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);"></div>
</div>
<script>
let time = 1800; // 30分を秒に変換
let reward = 0;
let timerInterval;
function startGame() {
if (timerInterval) return; // タイマーが既に動いている場合は何もしない
timerInterval = setInterval(() => {
if (time > 0) {
time--;
reward += 9;
updateDisplay();
} else {
clearInterval(timerInterval);
triggerEndAnimation();
}
}, 1000);
}
function updateDisplay() {
const minutes = String(Math.floor(time / 60)).padStart(2, '0');
const seconds = String(time % 60).padStart(2, '0');
document.getElementById('time').innerText = `${minutes}:${seconds}`;
document.getElementById('reward').innerText = reward;
}
function triggerEndAnimation() {
const emojiElem = document.getElementById('emoji');
emojiElem.innerHTML = "🎉✨";
setTimeout(() => {
emojiElem.innerHTML = "";
}, 2000);
}
function clickFun() {
const emojiElem = document.getElementById('emoji');
emojiElem.className = "spin";
emojiElem.innerHTML = "😆👍✨";
setTimeout(() => {
emojiElem.className = "";
emojiElem.innerHTML = "";
}, 1000);
}
</script>
</body>
</html>
```