|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Stone Paper Scissor Lizard Spock</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<style> |
|
|
@keyframes bounce { |
|
|
0%, 100% { transform: translateY(0); } |
|
|
50% { transform: translateY(-20px); } |
|
|
} |
|
|
.bounce-animation { |
|
|
animation: bounce 0.5s ease infinite; |
|
|
} |
|
|
.choice-btn { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
.choice-btn:hover { |
|
|
transform: scale(1.1); |
|
|
} |
|
|
.winner { |
|
|
box-shadow: 0 0 20px 5px rgba(59, 130, 246, 0.7); |
|
|
} |
|
|
.pulse { |
|
|
animation: pulse 1.5s infinite; |
|
|
} |
|
|
@keyframes pulse { |
|
|
0% { transform: scale(1); } |
|
|
50% { transform: scale(1.05); } |
|
|
100% { transform: scale(1); } |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gradient-to-br from-gray-900 to-gray-800 min-h-screen text-white"> |
|
|
<div class="container mx-auto px-4 py-8 flex flex-col items-center"> |
|
|
<h1 class="text-4xl md:text-5xl font-bold mb-2 text-center bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-purple-600"> |
|
|
Stone Paper Scissor Lizard Spock |
|
|
</h1> |
|
|
|
|
|
<div class="mb-8 text-center"> |
|
|
<p class="text-lg text-gray-300 mb-4">The classic game with a <span class="font-bold text-purple-400">Big Bang Theory</span> twist!</p> |
|
|
|
|
|
<div class="bg-gray-800 rounded-lg p-4 max-w-md mx-auto"> |
|
|
<h3 class="text-xl font-semibold mb-2 text-blue-300">Rules:</h3> |
|
|
<ul class="text-left space-y-1 text-gray-300"> |
|
|
<li><span class="font-bold">Scissors</span> cut <span class="font-bold">Paper</span></li> |
|
|
<li><span class="font-bold">Paper</span> covers <span class="font-bold">Rock</span></li> |
|
|
<li><span class="font-bold">Rock</span> crushes <span class="font-bold">Lizard</span></li> |
|
|
<li><span class="font-bold">Lizard</span> poisons <span class="font-bold">Spock</span></li> |
|
|
<li><span class="font-bold">Spock</span> smashes <span class="font-bold">Scissors</span></li> |
|
|
<li><span class="font-bold">Scissors</span> decapitate <span class="font-bold">Lizard</span></li> |
|
|
<li><span class="font-bold">Lizard</span> eats <span class="font-bold">Paper</span></li> |
|
|
<li><span class="font-bold">Paper</span> disproves <span class="font-bold">Spock</span></li> |
|
|
<li><span class="font-bold">Spock</span> vaporizes <span class="font-bold">Rock</span></li> |
|
|
<li><span class="font-bold">Rock</span> crushes <span class="font-bold">Scissors</span></li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="w-full max-w-2xl"> |
|
|
<div class="flex justify-between items-center mb-8"> |
|
|
<div class="text-center"> |
|
|
<h3 class="text-xl font-semibold mb-2">You</h3> |
|
|
<div class="text-2xl font-bold text-blue-400" id="player-score">0</div> |
|
|
</div> |
|
|
<div class="text-center"> |
|
|
<h3 class="text-xl font-semibold mb-2">Round</h3> |
|
|
<div class="text-2xl font-bold text-purple-400" id="round">1</div> |
|
|
</div> |
|
|
<div class="text-center"> |
|
|
<h3 class="text-xl font-semibold mb-2">Computer</h3> |
|
|
<div class="text-2xl font-bold text-red-400" id="computer-score">0</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex justify-center mb-12"> |
|
|
<div class="relative w-32 h-32 md:w-40 md:h-40 bg-gray-800 rounded-full flex items-center justify-center mx-4" id="player-choice"> |
|
|
<div class="text-4xl md:text-5xl" id="player-icon"></div> |
|
|
</div> |
|
|
<div class="flex items-center mx-4"> |
|
|
<div class="text-xl md:text-2xl font-bold" id="result-text">VS</div> |
|
|
</div> |
|
|
<div class="relative w-32 h-32 md:w-40 md:h-40 bg-gray-800 rounded-full flex items-center justify-center mx-4" id="computer-choice"> |
|
|
<div class="text-4xl md:text-5xl" id="computer-icon"></div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-3 md:grid-cols-5 gap-4 mb-8"> |
|
|
<button class="choice-btn bg-blue-600 hover:bg-blue-700 rounded-full p-4 flex flex-col items-center justify-center transition-all" data-choice="rock"> |
|
|
<i class="fas fa-hand-rock text-3xl mb-2"></i> |
|
|
<span>Rock</span> |
|
|
</button> |
|
|
<button class="choice-btn bg-green-600 hover:bg-green-700 rounded-full p-4 flex flex-col items-center justify-center" data-choice="paper"> |
|
|
<i class="fas fa-hand-paper text-3xl mb-2"></i> |
|
|
<span>Paper</span> |
|
|
</button> |
|
|
<button class="choice-btn bg-red-600 hover:bg-red-700 rounded-full p-4 flex flex-col items-center justify-center" data-choice="scissors"> |
|
|
<i class="fas fa-hand-scissors text-3xl mb-2"></i> |
|
|
<span>Scissors</span> |
|
|
</button> |
|
|
<button class="choice-btn bg-yellow-600 hover:bg-yellow-700 rounded-full p-4 flex flex-col items-center justify-center" data-choice="lizard"> |
|
|
<i class="fas fa-hand-lizard text-3xl mb-2"></i> |
|
|
<span>Lizard</span> |
|
|
</button> |
|
|
<button class="choice-btn bg-purple-600 hover:bg-purple-700 rounded-full p-4 flex flex-col items-center justify-center" data-choice="spock"> |
|
|
<i class="fas fa-hand-spock text-3xl mb-2"></i> |
|
|
<span>Spock</span> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="text-center"> |
|
|
<button id="reset-btn" class="bg-gray-700 hover:bg-gray-600 px-6 py-2 rounded-full font-semibold transition-all"> |
|
|
Reset Game |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div id="game-over-modal" class="fixed inset-0 bg-black bg-opacity-70 flex items-center justify-center hidden z-50"> |
|
|
<div class="bg-gray-800 rounded-xl p-8 max-w-md w-full mx-4 text-center"> |
|
|
<h2 class="text-3xl font-bold mb-4" id="game-over-text">Game Over!</h2> |
|
|
<p class="text-xl mb-6" id="final-result">You won the game!</p> |
|
|
<button id="play-again-btn" class="bg-blue-600 hover:bg-blue-700 px-6 py-3 rounded-full font-semibold text-lg transition-all"> |
|
|
Play Again |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
document.addEventListener('DOMContentLoaded', () => { |
|
|
|
|
|
let playerScore = 0; |
|
|
let computerScore = 0; |
|
|
let round = 1; |
|
|
const maxRounds = 5; |
|
|
|
|
|
|
|
|
const playerScoreEl = document.getElementById('player-score'); |
|
|
const computerScoreEl = document.getElementById('computer-score'); |
|
|
const roundEl = document.getElementById('round'); |
|
|
const playerChoiceEl = document.getElementById('player-choice'); |
|
|
const computerChoiceEl = document.getElementById('computer-choice'); |
|
|
const playerIconEl = document.getElementById('player-icon'); |
|
|
const computerIconEl = document.getElementById('computer-icon'); |
|
|
const resultTextEl = document.getElementById('result-text'); |
|
|
const choiceButtons = document.querySelectorAll('.choice-btn'); |
|
|
const resetBtn = document.getElementById('reset-btn'); |
|
|
const gameOverModal = document.getElementById('game-over-modal'); |
|
|
const gameOverTextEl = document.getElementById('game-over-text'); |
|
|
const finalResultEl = document.getElementById('final-result'); |
|
|
const playAgainBtn = document.getElementById('play-again-btn'); |
|
|
|
|
|
|
|
|
const choiceIcons = { |
|
|
rock: 'fas fa-hand-rock', |
|
|
paper: 'fas fa-hand-paper', |
|
|
scissors: 'fas fa-hand-scissors', |
|
|
lizard: 'fas fa-hand-lizard', |
|
|
spock: 'fas fa-hand-spock' |
|
|
}; |
|
|
|
|
|
|
|
|
const gameRules = { |
|
|
rock: ['scissors', 'lizard'], |
|
|
paper: ['rock', 'spock'], |
|
|
scissors: ['paper', 'lizard'], |
|
|
lizard: ['paper', 'spock'], |
|
|
spock: ['rock', 'scissors'] |
|
|
}; |
|
|
|
|
|
|
|
|
const choiceColors = { |
|
|
rock: 'bg-blue-600', |
|
|
paper: 'bg-green-600', |
|
|
scissors: 'bg-red-600', |
|
|
lizard: 'bg-yellow-600', |
|
|
spock: 'bg-purple-600' |
|
|
}; |
|
|
|
|
|
|
|
|
choiceButtons.forEach(button => { |
|
|
button.addEventListener('click', () => { |
|
|
if (round > maxRounds) return; |
|
|
|
|
|
const playerChoice = button.dataset.choice; |
|
|
playRound(playerChoice); |
|
|
}); |
|
|
}); |
|
|
|
|
|
resetBtn.addEventListener('click', resetGame); |
|
|
playAgainBtn.addEventListener('click', resetGame); |
|
|
|
|
|
|
|
|
function playRound(playerChoice) { |
|
|
|
|
|
choiceButtons.forEach(btn => btn.disabled = true); |
|
|
|
|
|
|
|
|
playerIconEl.className = `${choiceIcons[playerChoice]} text-4xl md:text-5xl`; |
|
|
playerChoiceEl.className = `relative w-32 h-32 md:w-40 md:h-40 ${choiceColors[playerChoice]} rounded-full flex items-center justify-center mx-4 bounce-animation`; |
|
|
|
|
|
|
|
|
const choices = ['rock', 'paper', 'scissors', 'lizard', 'spock']; |
|
|
const computerChoice = choices[Math.floor(Math.random() * choices.length)]; |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
computerIconEl.className = `${choiceIcons[computerChoice]} text-4xl md:text-5xl`; |
|
|
computerChoiceEl.className = `relative w-32 h-32 md:w-40 md:h-40 ${choiceColors[computerChoice]} rounded-full flex items-center justify-center mx-4 bounce-animation`; |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
determineWinner(playerChoice, computerChoice); |
|
|
}, 500); |
|
|
}, 500); |
|
|
} |
|
|
|
|
|
function determineWinner(playerChoice, computerChoice) { |
|
|
|
|
|
playerChoiceEl.classList.remove('bounce-animation'); |
|
|
computerChoiceEl.classList.remove('bounce-animation'); |
|
|
|
|
|
if (playerChoice === computerChoice) { |
|
|
|
|
|
resultTextEl.textContent = "It's a tie!"; |
|
|
resultTextEl.className = "text-xl md:text-2xl font-bold text-yellow-400"; |
|
|
|
|
|
|
|
|
playerChoiceEl.classList.add('winner'); |
|
|
computerChoiceEl.classList.add('winner'); |
|
|
|
|
|
setTimeout(() => { |
|
|
playerChoiceEl.classList.remove('winner'); |
|
|
computerChoiceEl.classList.remove('winner'); |
|
|
}, 1000); |
|
|
} else if (gameRules[playerChoice].includes(computerChoice)) { |
|
|
|
|
|
playerScore++; |
|
|
playerScoreEl.textContent = playerScore; |
|
|
resultTextEl.textContent = "You win!"; |
|
|
resultTextEl.className = "text-xl md:text-2xl font-bold text-green-400"; |
|
|
|
|
|
|
|
|
playerChoiceEl.classList.add('winner'); |
|
|
playerChoiceEl.classList.add('pulse'); |
|
|
} else { |
|
|
|
|
|
computerScore++; |
|
|
computerScoreEl.textContent = computerScore; |
|
|
resultTextEl.textContent = "Computer wins!"; |
|
|
resultTextEl.className = "text-xl md:text-2xl font-bold text-red-400"; |
|
|
|
|
|
|
|
|
computerChoiceEl.classList.add('winner'); |
|
|
computerChoiceEl.classList.add('pulse'); |
|
|
} |
|
|
|
|
|
|
|
|
round++; |
|
|
roundEl.textContent = round; |
|
|
|
|
|
if (round > maxRounds) { |
|
|
setTimeout(() => { |
|
|
showGameOver(); |
|
|
}, 1500); |
|
|
} else { |
|
|
|
|
|
setTimeout(() => { |
|
|
choiceButtons.forEach(btn => btn.disabled = false); |
|
|
playerChoiceEl.classList.remove('pulse'); |
|
|
computerChoiceEl.classList.remove('pulse'); |
|
|
|
|
|
|
|
|
playerIconEl.className = ""; |
|
|
computerIconEl.className = ""; |
|
|
playerChoiceEl.className = "relative w-32 h-32 md:w-40 md:h-40 bg-gray-800 rounded-full flex items-center justify-center mx-4"; |
|
|
computerChoiceEl.className = "relative w-32 h-32 md:w-40 md:h-40 bg-gray-800 rounded-full flex items-center justify-center mx-4"; |
|
|
resultTextEl.textContent = "VS"; |
|
|
resultTextEl.className = "text-xl md:text-2xl font-bold"; |
|
|
}, 1500); |
|
|
} |
|
|
} |
|
|
|
|
|
function showGameOver() { |
|
|
gameOverModal.classList.remove('hidden'); |
|
|
|
|
|
if (playerScore > computerScore) { |
|
|
gameOverTextEl.textContent = "You Won!"; |
|
|
gameOverTextEl.className = "text-3xl font-bold mb-4 text-green-400"; |
|
|
finalResultEl.textContent = `You beat the computer ${playerScore}-${computerScore}!`; |
|
|
} else if (computerScore > playerScore) { |
|
|
gameOverTextEl.textContent = "You Lost!"; |
|
|
gameOverTextEl.className = "text-3xl font-bold mb-4 text-red-400"; |
|
|
finalResultEl.textContent = `The computer beat you ${computerScore}-${playerScore}!`; |
|
|
} else { |
|
|
gameOverTextEl.textContent = "It's a Tie!"; |
|
|
gameOverTextEl.className = "text-3xl font-bold mb-4 text-yellow-400"; |
|
|
finalResultEl.textContent = `The game ended ${playerScore}-${computerScore}!`; |
|
|
} |
|
|
} |
|
|
|
|
|
function resetGame() { |
|
|
|
|
|
playerScore = 0; |
|
|
computerScore = 0; |
|
|
round = 1; |
|
|
|
|
|
|
|
|
playerScoreEl.textContent = playerScore; |
|
|
computerScoreEl.textContent = computerScore; |
|
|
roundEl.textContent = round; |
|
|
|
|
|
|
|
|
playerIconEl.className = ""; |
|
|
computerIconEl.className = ""; |
|
|
playerChoiceEl.className = "relative w-32 h-32 md:w-40 md:h-40 bg-gray-800 rounded-full flex items-center justify-center mx-4"; |
|
|
computerChoiceEl.className = "relative w-32 h-32 md:w-40 md:h-40 bg-gray-800 rounded-full flex items-center justify-center mx-4"; |
|
|
resultTextEl.textContent = "VS"; |
|
|
resultTextEl.className = "text-xl md:text-2xl font-bold"; |
|
|
|
|
|
|
|
|
choiceButtons.forEach(btn => btn.disabled = false); |
|
|
|
|
|
|
|
|
gameOverModal.classList.add('hidden'); |
|
|
} |
|
|
}); |
|
|
</script> |
|
|
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=iarman/bbt-game" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
