🏅 C-
0pt
✨🎈🎉
🌟🍀🎊
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ポイントカウンター🎉</title>
<style>
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-20px); }
}
@keyframes sparkle {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
.animate-bounce {
animation: bounce 1s infinite;
}
.animate-sparkle {
animation: sparkle 2s infinite;
}
</style>
</head>
<body>
<div style="width:400px; height:400px; background-color:white; color:gray; display:flex; flex-direction:column; align-items:center; justify-content:center; position:relative; font-family: Arial, sans-serif;">
<div id="rank" style="font-size:24px; margin-bottom:10px;">🏅 C-</div>
<div id="points" style="font-size:48px;">0pt</div>
<div style="position:absolute; top:10px; right:10px;">
<span style="font-size:24px;" class="animate-sparkle">✨🎈🎉</span>
</div>
<div style="position:absolute; bottom:10px; left:10px;">
<span style="font-size:24px;" class="animate-sparkle">🌟🍀🎊</span>
</div>
</div>
<script>
const pointsElement = document.getElementById('points');
const rankElement = document.getElementById('rank');
let points = 0;
let rank = 'C-';
const ranks = [
{ threshold: 0, rank: 'C-' },
{ threshold: 100, rank: 'C' },
{ threshold: 250, rank: 'C+' },
{ threshold: 400, rank: 'B-' },
{ threshold: 700, rank: 'B' },
{ threshold: 900, rank: 'B+' },
{ threshold: 1100, rank: 'A-' },
{ threshold: 1350, rank: 'A' },
{ threshold: 1500, rank: 'A+' },
{ threshold: 1800, rank: 'S-' },
{ threshold: 2000, rank: 'S' },
{ threshold: 2200, rank: 'S0' },
{ threshold: 2400, rank: 'S1' },
{ threshold: 2600, rank: 'S2' },
{ threshold: 2950, rank: 'S3' },
{ threshold: 3250, rank: 'S+' },
{ threshold: 4800, rank: 'Z1' },
{ threshold: 5200, rank: 'Z2' },
{ threshold: 5600, rank: 'Z3' },
{ threshold: 7777, rank: 'Z+' },
{ threshold: 10000, rank: 'X' }
];
function updateRank(currentPoints) {
for(let i = ranks.length -1; i >=0; i--){
if(currentPoints >= ranks[i].threshold){
return ranks[i].rank;
}
}
return 'C-';
}
function updateColor(currentPoints) {
const container = document.querySelector('div');
if(currentPoints >= 10000){
container.style.color = 'yellow';
} else {
container.style.color = 'gray';
}
}
function incrementPoints() {
points +=1;
pointsElement.textContent = points + 'pt';
let newRank = updateRank(points);
if(newRank !== rank){
rank = newRank;
rankElement.textContent = '🏅 ' + rank;
rankElement.classList.add('animate-bounce');
setTimeout(() => {
rankElement.classList.remove('animate-bounce');
}, 1000);
}
updateColor(points);
if(points >= 10000){
clearInterval(interval);
}
}
const interval = setInterval(incrementPoints, 100);
</script>
</body>
</html>
```