🎈
🎉
🎊
🌟
🚀✨ ノバクエスト ✨🚀
🏆 スコア: 0
⏰ 時間: 30秒
```html
<!DOCTYPE html>
<html>
<head>
<title>ノバクエスト</title>
<style>
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
transform: translateY(0);
}
40% {
transform: translateY(-20px);
}
60% {
transform: translateY(-10px);
}
}
@keyframes pulse {
0% {
transform: scale(1);
box-shadow: 0 0 5px rgba(255,255,255,0.5);
}
50% {
transform: scale(1.1);
box-shadow: 0 0 15px rgba(255,255,255,1);
}
100% {
transform: scale(1);
box-shadow: 0 0 5px rgba(255,255,255,0.5);
}
}
.bounce {
animation: bounce 1s;
}
.pulse {
animation: pulse 2s infinite;
}
.active {
background-color: black !important;
animation: pulse 1s infinite;
}
</style>
</head>
<body>
<div style="width: 400px; height: 400px; margin: auto; background-color: red; display: flex; flex-direction: column; align-items: center; justify-content: space-around; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; position: relative; overflow: hidden;">
<!-- Floating Emojis -->
<div style="position: absolute; top: 10px; left: 10px; animation: bounce 2s infinite;">
🎈
</div>
<div style="position: absolute; top: 20px; right: 15px; animation: bounce 2s infinite 0.5s;">
🎉
</div>
<div style="position: absolute; bottom: 15px; left: 20px; animation: bounce 2s infinite 1s;">
🎊
</div>
<div style="position: absolute; bottom: 20px; right: 25px; animation: bounce 2s infinite 1.5s;">
🌟
</div>
<!-- Title -->
<div style="font-size: 24px; color: yellow; text-shadow: 2px 2px 4px #000;">
🚀✨ ノバクエスト ✨🚀
</div>
<!-- Score and Time -->
<div style="display: flex; justify-content: space-around; width: 90%; color: white; font-size: 18px;">
<div>🏆 スコア: <span id="score">0</span></div>
<div>⏰ 時間: <span id="time">30</span>秒</div>
</div>
<!-- Grid of Circles -->
<div style="display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 10px; width: 90%;">
<div class="circle" data-index="0" style="width: 80px; height: 80px; background-color: white; border-radius: 50%; cursor: pointer; transition: background-color 0.3s, transform 0.2s;"></div>
<div class="circle" data-index="1" style="width: 80px; height: 80px; background-color: white; border-radius: 50%; cursor: pointer; transition: background-color 0.3s, transform 0.2s;"></div>
<div class="circle" data-index="2" style="width: 80px; height: 80px; background-color: white; border-radius: 50%; cursor: pointer; transition: background-color 0.3s, transform 0.2s;"></div>
<div class="circle" data-index="3" style="width: 80px; height: 80px; background-color: white; border-radius: 50%; cursor: pointer; transition: background-color 0.3s, transform 0.2s;"></div>
<div class="circle" data-index="4" style="width: 80px; height: 80px; background-color: white; border-radius: 50%; cursor: pointer; transition: background-color 0.3s, transform 0.2s;"></div>
<div class="circle" data-index="5" style="width: 80px; height: 80px; background-color: white; border-radius: 50%; cursor: pointer; transition: background-color 0.3s, transform 0.2s;"></div>
<div class="circle" data-index="6" style="width: 80px; height: 80px; background-color: white; border-radius: 50%; cursor: pointer; transition: background-color 0.3s, transform 0.2s;"></div>
<div class="circle" data-index="7" style="width: 80px; height: 80px; background-color: white; border-radius: 50%; cursor: pointer; transition: background-color 0.3s, transform 0.2s;"></div>
<div class="circle" data-index="8" style="width: 80px; height: 80px; background-color: white; border-radius: 50%; cursor: pointer; transition: background-color 0.3s, transform 0.2s;"></div>
</div>
<!-- Buttons -->
<div style="display: flex; gap: 20px; margin-bottom: 10px;">
<input type="button" value="🚀スタート" id="startBtn" style="padding: 10px 20px; font-size: 16px; cursor: pointer; border: none; border-radius: 5px; background-color: #fff200; color: #000; box-shadow: 0 4px #999;" onclick="startGame()">
<input type="button" value="🔄リセット" id="resetBtn" style="padding: 10px 20px; font-size: 16px; cursor: pointer; border: none; border-radius: 5px; background-color: #00d2ff; color: #fff; box-shadow: 0 4px #999;" onclick="resetGame()" disabled>
</div>
</div>
<script>
let score = 0;
let timeLeft = 30;
let timer;
let activeIndex = -1;
const circles = document.querySelectorAll('.circle');
const scoreSpan = document.getElementById('score');
const timeSpan = document.getElementById('time');
const startBtn = document.getElementById('startBtn');
const resetBtn = document.getElementById('resetBtn');
circles.forEach(circle => {
circle.addEventListener('click', () => {
if (circle.classList.contains('active')) {
score++;
scoreSpan.textContent = score;
circle.classList.remove('active');
circle.classList.add('bounce');
setTimeout(() => {
circle.classList.remove('bounce');
}, 300);
activateRandomCircle();
}
});
});
function startGame() {
startBtn.disabled = true;
resetBtn.disabled = false;
score = 0;
timeLeft = 30;
scoreSpan.textContent = score;
timeSpan.textContent = timeLeft;
activateRandomCircle();
timer = setInterval(countdown, 1000);
}
function resetGame() {
clearInterval(timer);
score = 0;
timeLeft = 30;
scoreSpan.textContent = score;
timeSpan.textContent = timeLeft;
circles.forEach(circle => {
circle.classList.remove('active');
});
startBtn.disabled = false;
resetBtn.disabled = true;
}
function countdown() {
timeLeft--;
timeSpan.textContent = timeLeft;
if (timeLeft <= 0) {
clearInterval(timer);
alert(`🎉時間終了！ あなたのスコアは ${score} です！🎉`);
resetGame();
}
}
function activateRandomCircle() {
let index;
do {
index = Math.floor(Math.random() * 9);
} while (index === activeIndex);
activeIndex = index;
circles[index].classList.add('active');
}
</script>
</body>
</html>
```