🌟✨ノバクエスト🎉🎈
🕳️
🕳️
🕳️
🕳️
🕳️
🕳️
🕳️
🕳️
🕳️
⏰30秒 🏆0点
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ノバクエスト</title>
<style>
@keyframes pop {
0% { transform: scale(1); }
50% { transform: scale(1.3); }
100% { transform: scale(1); }
}
@keyframes blink {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
@keyframes shake {
0% { transform: translate(1px, 1px) rotate(0deg); }
10% { transform: translate(-1px, -2px) rotate(-1deg); }
20% { transform: translate(-3px, 0px) rotate(1deg); }
30% { transform: translate(3px, 2px) rotate(0deg); }
40% { transform: translate(1px, -1px) rotate(1deg); }
50% { transform: translate(-1px, 2px) rotate(-1deg); }
60% { transform: translate(-3px, 1px) rotate(0deg); }
70% { transform: translate(3px, 1px) rotate(-1deg); }
80% { transform: translate(-1px, -1px) rotate(1deg); }
90% { transform: translate(1px, 2px) rotate(0deg); }
100% { transform: translate(1px, -2px) rotate(-1deg); }
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes colorChange {
0% { background-color: white; }
100% { background-color: black; }
}
</style>
</head>
<body style="width: 400px; height: 400px; background-color: red; color: black; font-family: Arial, sans-serif; text-align: center; position: relative;">
<div style="font-size: 24px; margin-top: 10px;">🌟✨ノバクエスト🎉🎈</div>
<div id="grid" style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 90%; margin: 20px auto;">
<div class="circle" style="width: 80px; height: 80px; background-color: white; border-radius: 50%; cursor: pointer; position: relative;">
🕳️
</div>
<div class="circle" style="width: 80px; height: 80px; background-color: white; border-radius: 50%; cursor: pointer; position: relative;">
🕳️
</div>
<div class="circle" style="width: 80px; height: 80px; background-color: white; border-radius: 50%; cursor: pointer; position: relative;">
🕳️
</div>
<div class="circle" style="width: 80px; height: 80px; background-color: white; border-radius: 50%; cursor: pointer; position: relative;">
🕳️
</div>
<div class="circle" style="width: 80px; height: 80px; background-color: white; border-radius: 50%; cursor: pointer; position: relative;">
🕳️
</div>
<div class="circle" style="width: 80px; height: 80px; background-color: white; border-radius: 50%; cursor: pointer; position: relative;">
🕳️
</div>
<div class="circle" style="width: 80px; height: 80px; background-color: white; border-radius: 50%; cursor: pointer; position: relative;">
🕳️
</div>
<div class="circle" style="width: 80px; height: 80px; background-color: white; border-radius: 50%; cursor: pointer; position: relative;">
🕳️
</div>
<div class="circle" style="width: 80px; height: 80px; background-color: white; border-radius: 50%; cursor: pointer; position: relative;">
🕳️
</div>
</div>
<div style="margin-top: 10px;">
<button id="startBtn" style="padding: 10px 20px; margin-right: 10px; background-color: white; color: black; border: 2px solid black; border-radius: 5px; cursor: pointer;">🎮スタート</button>
<button id="resetBtn" style="padding: 10px 20px; background-color: white; color: black; border: 2px solid black; border-radius: 5px; cursor: pointer;">🔄リセット</button>
</div>
<div style="margin-top: 10px; font-size: 18px;">
⏰<span id="timer">30</span>秒 🏆<span id="score">0</span>点
</div>
<div id="emojiOverlay" style="position: absolute; top: 0; left: 0; width: 400px; height: 400px; pointer-events: none;"></div>
<script>
const circles = document.querySelectorAll('.circle');
const startBtn = document.getElementById('startBtn');
const resetBtn = document.getElementById('resetBtn');
const timerDisplay = document.getElementById('timer');
const scoreDisplay = document.getElementById('score');
const emojiOverlay = document.getElementById('emojiOverlay');
let activeCircle = null;
let timer = 30;
let score = 0;
let interval = null;
function getRandomCircle() {
const index = Math.floor(Math.random() * circles.length);
return circles[index];
}
function activateCircle() {
if (activeCircle) {
activeCircle.style.backgroundColor = 'white';
activeCircle.innerHTML = '🕳️';
}
activeCircle = getRandomCircle();
activeCircle.style.backgroundColor = 'black';
activeCircle.innerHTML = '🐹';
activeCircle.classList.add('active');
activeCircle.style.animation = 'fadeIn 0.5s';
}
function startGame() {
startBtn.disabled = true;
resetBtn.disabled = false;
timer = 30;
score = 0;
scoreDisplay.textContent = score;
timerDisplay.textContent = timer;
activateCircle();
interval = setInterval(() => {
timer--;
timerDisplay.textContent = timer;
if (timer === 0) {
clearInterval(interval);
alert('時間切れ！スコア: ' + score + '点');
startBtn.disabled = false;
} else {
activateCircle();
}
}, 1000);
}
function resetGame() {
clearInterval(interval);
timer = 30;
score = 0;
timerDisplay.textContent = timer;
scoreDisplay.textContent = score;
if (activeCircle) {
activeCircle.style.backgroundColor = 'white';
activeCircle.innerHTML = '🕳️';
activeCircle.classList.remove('active');
activeCircle = null;
}
startBtn.disabled = false;
}
circles.forEach(circle => {
circle.addEventListener('click', () => {
if (circle === activeCircle) {
score++;
scoreDisplay.textContent = score;
circle.style.backgroundColor = 'white';
circle.innerHTML = '✨';
circle.style.animation = 'pop 0.3s';
showEmoji('👍');
activateCircle();
} else {
showEmoji('❌');
}
});
});
function showEmoji(emoji) {
const span = document.createElement('span');
span.textContent = emoji;
span.style.position = 'absolute';
span.style.left = Math.random() * 350 + 'px';
span.style.top = Math.random() * 350 + 'px';
span.style.fontSize = '24px';
span.style.animation = 'shake 0.5s';
emojiOverlay.appendChild(span);
setTimeout(() => {
emojiOverlay.removeChild(span);
}, 500);
}
startBtn.addEventListener('click', startGame);
resetBtn.addEventListener('click', resetGame);
resetBtn.disabled = true;
</script>
</body>
</html>
```