🎉 投票アプリ 🎉
❌ 0
⭕ 0
プレーヤー: 456
```html
<!DOCTYPE html>
<html>
<head>
<style>
@keyframes bounce {
0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
40% { transform: translateY(-30px); }
60% { transform: translateY(-15px); }
}
@keyframes shake {
0% { transform: translateX(0); }
25% { transform: translateX(-5px); }
50% { transform: translateX(5px); }
75% { transform: translateX(-5px); }
100% { transform: translateX(0); }
}
.animate-bounce {
animation: bounce 0.5s;
}
.animate-shake {
animation: shake 0.5s;
}
</style>
</head>
<body>
<div style="width: 100%; text-align: center; font-size: 24px; margin-top: 10px;">
🎉 投票アプリ 🎉
</div>
<div style="display: flex; justify-content: space-around; align-items: center; margin-top: 20px;">
<div>
<div id="batsuCount" style="font-size: 48px;">❌ 0</div>
<button id="batsuBtn" style="font-size: 48px; cursor: pointer;">❌</button>
</div>
<div>
<div id="maruCount" style="font-size: 48px; color: #00BFFF;">⭕ 0</div>
<button id="maruBtn" style="font-size: 48px; color: #00BFFF; cursor: pointer;">⭕</button>
</div>
</div>
<div style="text-align: center; margin-top: 20px;">
<button id="decreaseBtn" style="font-size: 24px; padding: 10px 20px; cursor: pointer;">👥 プレーヤー減少</button>
<button id="resetBtn" style="font-size: 24px; padding: 10px 20px; margin-left: 10px; cursor: pointer;">🔄 リセット</button>
</div>
<div style="text-align: center; margin-top: 20px; font-size: 32px;" id="message">プレーヤー: 456</div>
<script>
let players = 456;
let batsu = 0;
let maru = 0;
const batsuBtn = document.getElementById('batsuBtn');
const maruBtn = document.getElementById('maruBtn');
const decreaseBtn = document.getElementById('decreaseBtn');
const resetBtn = document.getElementById('resetBtn');
const batsuCount = document.getElementById('batsuCount');
const maruCount = document.getElementById('maruCount');
const message = document.getElementById('message');
function updateDisplay() {
batsuCount.textContent = `❌ ${batsu}`;
maruCount.textContent = `⭕ ${maru}`;
message.textContent = `プレーヤー: ${players}`;
if (players === 0) {
if (batsu > maru) {
message.textContent = "🛑 ゲーム中止 🛑";
} else if (maru > batsu) {
message.textContent = "✅ ゲーム続行 ✅";
} else {
message.textContent = "🤝 同点 🤝";
}
}
}
batsuBtn.addEventListener('click', () => {
if (players > 0) {
batsu++;
players--;
batsuBtn.classList.add('animate-shake');
setTimeout(() => batsuBtn.classList.remove('animate-shake'), 500);
updateDisplay();
}
});
maruBtn.addEventListener('click', () => {
if (players > 0) {
maru++;
players--;
maruBtn.classList.add('animate-bounce');
setTimeout(() => maruBtn.classList.remove('animate-bounce'), 500);
updateDisplay();
}
});
decreaseBtn.addEventListener('click', () => {
if (players > 0) {
players--;
message.classList.add('animate-shake');
setTimeout(() => message.classList.remove('animate-shake'), 500);
updateDisplay();
}
});
resetBtn.addEventListener('click', () => {
players = 456;
batsu = 0;
maru = 0;
updateDisplay();
});
updateDisplay();
</script>
</body>
</html>
```