🧑🤝🧑
🎮 You
🎮 You
🤖
COM 1
COM 1
🦾
COM 2
COM 2
🧙♂️
COM 3
COM 3
😱 You lost!
🃏 The 🐱👤 loses the game!
🃏 The 🐱👤 loses the game!
```html
<!DOCTYPE html>
<html>
<head>
<style>
@keyframes shake {
0% { transform: translate(1px, 1px) rotate(0deg); }
10% { transform: translate(-1px, -2px) rotate(-1deg); }
20% { transform: translate(-3px, 0px) rotate(1deg); }
30% { transform: translate(3px, 2px) rotate(0deg); }
40% { transform: translate(1px, -1px) rotate(1deg); }
50% { transform: translate(-1px, 2px) rotate(-1deg); }
60% { transform: translate(-3px, 1px) rotate(0deg); }
70% { transform: translate(3px, 1px) rotate(-1deg); }
80% { transform: translate(-1px, -1px) rotate(1deg); }
90% { transform: translate(1px, 2px) rotate(0deg); }
100% { transform: translate(1px, -2px) rotate(-1deg); }
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
40% { transform: translateY(-20px); }
60% { transform: translateY(-10px); }
}
@keyframes glow {
0% { box-shadow: 0 0 5px #FFD700; }
50% { box-shadow: 0 0 20px #FFA500; }
100% { box-shadow: 0 0 5px #FFD700; }
}
</style>
</head>
<body>
<div id="game" style="width:400px; height:400px; position:relative; margin:auto; border:4px solid #ff69b4; border-radius:20px; background-color:#fff0f5; overflow:hidden; font-family: Arial, sans-serif;">
<!-- Player 1 -->
<div id="player1" style="position:absolute; top:20px; left:50%; transform:translateX(-50%); text-align:center; font-size:40px;">
🧑🤝🧑<br>🎮 You
</div>
<!-- Player 2 -->
<div id="player2" style="position:absolute; bottom:80px; left:20px; text-align:center; font-size:40px;">
🤖<br>COM 1
</div>
<!-- Player 3 -->
<div id="player3" style="position:absolute; bottom:80px; right:20px; text-align:center; font-size:40px;">
🦾<br>COM 2
</div>
<!-- Player 4 -->
<div id="player4" style="position:absolute; top:200px; left:20px; text-align:center; font-size:40px;">
🧙♂️<br>COM 3
</div>
<!-- Start Button -->
<input type="button" id="startBtn" value="🎲 Start Game 🎲" style="position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); padding:10px 20px; font-size:18px; border:none; border-radius:10px; background-color:#ff69b4; color:white; cursor:pointer; animation: bounce 2s infinite;">
<!-- Result Display -->
<div id="result" style="position:absolute; top:60%; left:50%; transform:translateX(-50%); text-align:center; font-size:24px; display:none; color:#ff4500;">
😱 You lost! <br>🃏 The 🐱👤 loses the game!
</div>
</div>
<script>
const startBtn = document.getElementById('startBtn');
const resultDiv = document.getElementById('result');
const players = ['player1', 'player2', 'player3', 'player4'];
startBtn.addEventListener('click', () => {
// Disable the button to prevent multiple clicks
startBtn.disabled = true;
startBtn.style.cursor = 'not-allowed';
startBtn.style.animation = 'none';
// Randomly select a loser
const loserIndex = Math.floor(Math.random() * players.length);
const loser = players[loserIndex];
// Animate the loser
const loserDiv = document.getElementById(loser);
loserDiv.style.animation = 'shake 0.5s';
loserDiv.style.transform += ' scale(1.2)';
// Show the result after animation
setTimeout(() => {
let emoji = '';
if(loser === 'player1') {
emoji = '😭 You lost!';
} else {
emoji = '🤖 COM ' + (loser.slice(-1)) + ' lost!';
}
resultDiv.innerHTML = emoji + ' <br> 🃏 The 🐱👤 has the 🃏!';
resultDiv.style.display = 'block';
resultDiv.style.animation = 'glow 2s infinite';
}, 600);
});
</script>
</body>
</html>
```