🎲 Let’s Play! 🎉
😃
Current Total: 0
Player 1's Turn 🤺
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Number Avoidance Game 🎮✨</title>
<style>
@keyframes shake {
0% { transform: rotate(0deg); }
25% { transform: rotate(5deg); }
50% { transform: rotate(0deg); }
75% { transform: rotate(-5deg); }
100% { transform: rotate(0deg); }
}
@keyframes pop {
0% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.5); opacity: 0.7; }
100% { transform: scale(1); opacity: 1; }
}
@keyframes sparkle {
0%, 100% { opacity: 0; }
50% { opacity: 1; }
}
</style>
</head>
<body>
<div style="width: 100%; max-width: 400px; height: 100%; max-height: 400px; margin: 0 auto; padding: 10px; box-sizing: border-box; font-family: Arial, sans-serif; text-align: center; position: relative;">
<div style="font-size: 40px; margin-top: 10px;">🎲 Let’s Play! 🎉</div>
<div id="emojiDisplay" style="font-size: 50px; margin: 10px 0;">😃</div>
<div id="currentTotal" style="font-size: 24px; margin: 10px 0;">Current Total: 0</div>
<div id="turnIndicator" style="font-size: 20px; margin: 10px 0;">Player 1's Turn 🤺</div>
<div>
<input type="button" value="+1 ➕" onclick="addNumber(1)" style="font-size: 18px; margin: 5px; padding: 10px 20px; cursor: pointer; animation: pop 1s infinite;">
<input type="button" value="+2 ➕➕" onclick="addNumber(2)" style="font-size: 18px; margin: 5px; padding: 10px 20px; cursor: pointer; animation: pop 1s infinite 0.2s;">
<input type="button" value="+3 ➕➕➕" onclick="addNumber(3)" style="font-size: 18px; margin: 5px; padding: 10px 20px; cursor: pointer; animation: pop 1s infinite 0.4s;">
</div>
<div id="message" style="font-size: 20px; color: red; margin: 15px 0;"></div>
<div id="sparkle" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 60px; animation: sparkle 1s infinite;"></div>
</div>
<script>
let currentTotal = 0;
let currentPlayer = 1;
const emojiList = ["😀","😂","🤪","😎","🥳","😺","🦄","🌟","🎈","✨","💥","🔥","🎉"];
function getRandomEmoji() {
return emojiList[Math.floor(Math.random() * emojiList.length)];
}
function addNumber(n) {
if (currentTotal >= 20) return;
currentTotal += n;
document.getElementById('currentTotal').innerText = `Current Total: ${currentTotal} 🎯`;
document.getElementById('emojiDisplay').innerText = getRandomEmoji();
// Animate emoji
const emoji = document.getElementById('emojiDisplay');
emoji.style.animation = 'shake 0.5s';
setTimeout(() => {
emoji.style.animation = '';
}, 500);
if (currentTotal >= 20) {
document.getElementById('message').innerText = `Player ${currentPlayer} loses! 😱💔`;
document.getElementById('sparkle').innerText = "✨";
disableButtons();
return;
}
currentPlayer = currentPlayer === 1 ? 2 : 1;
document.getElementById('turnIndicator').innerText = `Player ${currentPlayer}'s Turn 🤺`;
}
function disableButtons() {
const buttons = document.querySelectorAll('input[type="button"]');
buttons.forEach(button => {
button.disabled = true;
button.style.cursor = 'not-allowed';
button.style.opacity = '0.5';
});
}
// Keyboard controls
document.addEventListener('keydown', function(event) {
if (currentTotal >= 20) return;
if (event.key >= '1' && event.key <= '3') {
addNumber(parseInt(event.key));
}
});
</script>
</body>
</html>
```