🔴
スコア: 0
タイマー: 30秒
```html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>楽しいクリックゲーム</title>
<style>
@keyframes pop {
0% { transform: scale(1); }
50% { transform: scale(1.2); }
100% { transform: scale(1); }
}
@keyframes rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@keyframes fade {
0% { opacity: 1; }
100% { opacity: 0; }
}
</style>
</head>
<body>
<div style="display: flex; flex-wrap: wrap; width: 400px; height: 400px; justify-content: center; align-items: center; position: relative;">
<div id="circle1" onclick="handleClick(this)" style="width: 100px; height: 100px; border-radius: 50%; background-color: white; margin: 5px; display: flex; justify-content: center; align-items: center; font-size: 2em;"></div>
<div id="circle2" onclick="handleClick(this)" style="width: 100px; height: 100px; border-radius: 50%; background-color: white; margin: 5px; display: flex; justify-content: center; align-items: center; font-size: 2em;"></div>
<div id="circle3" onclick="handleClick(this)" style="width: 100px; height: 100px; border-radius: 50%; background-color: white; margin: 5px; display: flex; justify-content: center; align-items: center; font-size: 2em;"></div>
<div id="circle4" onclick="handleClick(this)" style="width: 100px; height: 100px; border-radius: 50%; background-color: black; margin: 5px; display: flex; justify-content: center; align-items: center; font-size: 2em; color: white;">🔴</div>
<div id="circle5" onclick="handleClick(this)" style="width: 100px; height: 100px; border-radius: 50%; background-color: white; margin: 5px; display: flex; justify-content: center; align-items: center; font-size: 2em;"></div>
<div id="circle6" onclick="handleClick(this)" style="width: 100px; height: 100px; border-radius: 50%; background-color: white; margin: 5px; display: flex; justify-content: center; align-items: center; font-size: 2em;"></div>
<div id="circle7" onclick="handleClick(this)" style="width: 100px; height: 100px; border-radius: 50%; background-color: white; margin: 5px; display: flex; justify-content: center; align-items: center; font-size: 2em;"></div>
<div id="circle8" onclick="handleClick(this)" style="width: 100px; height: 100px; border-radius: 50%; background-color: white; margin: 5px; display: flex; justify-content: center; align-items: center; font-size: 2em;"></div>
<div id="circle9" onclick="handleClick(this)" style="width: 100px; height: 100px; border-radius: 50%; background-color: white; margin: 5px; display: flex; justify-content: center; align-items: center; font-size: 2em;"></div>
</div>
<div id="score" style="position: absolute; top: 10px; left: 10px; font-size: 1.5em;">スコア: 0</div>
<div id="timer" style="position: absolute; top: 10px; right: 10px; font-size: 1.5em;">タイマー: 30秒</div>
<script>
let score = 0;
let timer = 30;
let interval;
function handleClick(element) {
if (element.style.backgroundColor === "black") {
element.style.backgroundColor = "white";
element.innerText = '';
score++;
document.getElementById('score').innerText = `スコア: ${score}`;
let whiteCircles = Array.from(document.querySelectorAll('div[style*="background-color: white"]'));
let newBlackCircle = whiteCircles[Math.floor(Math.random() * whiteCircles.length)];
newBlackCircle.style.backgroundColor = "black";
newBlackCircle.innerHTML = '🔴';
element.style.animation = "pop 0.5s";
newBlackCircle.style.animation = "rotate 1s infinite linear";
createEmojiBurst(element);
}
}
function createEmojiBurst(element) {
const emojis = ['🎉', '✨', '💥', '🎈', '🍭'];
emojis.forEach(emoji => {
let span = document.createElement('span');
span.innerText = emoji;
span.style.position = 'absolute';
span.style.left = `${element.getBoundingClientRect().left + 20}px`;
span.style.top = `${element.getBoundingClientRect().top + 20}px`;
span.style.animation = `fade 0.5s`;
document.body.appendChild(span);
setTimeout(() => { document.body.removeChild(span); }, 500);
});
}
function startTimer() {
interval = setInterval(() => {
timer--;
document.getElementById('timer').innerText = `タイマー: ${timer}秒`;
if (timer === 0) {
clearInterval(interval);
alert(`ゲーム終了！最終スコアは ${score} です！`);
document.showToast("再読み込みしてください");
}
}, 1000);
}
startTimer();
</script>
</body>
</html>
```