🍊: 0
🍊
```html
<!DOCTYPE html>
<html>
<head>
<style>
@keyframes bounce {
0% { transform: translateY(0); }
50% { transform: translateY(-20px); }
100% { transform: translateY(0); }
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@keyframes pop {
0% { transform: scale(1); opacity: 1; }
100% { transform: scale(1.5); opacity: 0; }
}
.mikan {
display: inline-block;
font-size: 40px;
cursor: pointer;
animation: bounce 1s infinite;
}
.mikan:hover {
animation: spin 1s infinite;
}
.popup {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 40px;
animation: pop 0.5s;
}
</style>
</head>
<body>
<div style="width: 400px; height: 400px; position: relative; border: 2px solid black; overflow: hidden;">
<div id="board" style="width: 100%; height: 100%; text-align: center; position: relative;">
<div id="score" style="position: absolute; top: 10px; left: 10px; font-size: 24px;">🍊: 0</div>
<div class="mikan" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">🍊</div>
</div>
</div>
<script>
let score = localStorage.getItem('mikanScore') || 0;
document.getElementById('score').textContent = `🍊: ${score}`;
document.querySelector('.mikan').addEventListener('click', (event) => {
score++;
localStorage.setItem('mikanScore', score);
document.getElementById('score').textContent = `🍊: ${score}`;
const popup = document.createElement('div');
popup.textContent = '🍊';
popup.className = 'popup';
document.getElementById('board').appendChild(popup);
setTimeout(() => popup.remove(), 500);
const x = Math.random() * 80 + 10;
const y = Math.random() * 80 + 10;
event.target.style.top = `${x}%`;
event.target.style.left = `${y}%`;
event.target.style.transform = 'translate(-50%, -50%)';
});
</script>
</body>
</html>
```