Best of 5. You vs. the machine. May the odds be ever in your favour.
- 🎯 Best-of-5 format — rounds tracked live, winner declared at the end
- 🤖 True random computer opponent using
Math.random() - 📊 Live scoreboard — Player vs Computer, updates every round
- 🎨 15+ CSS animations — entrance effects, win celebration, lose shake, draw sway, victory pulse
- 📱 Fully responsive — works on mobile and desktop
- 🔄 Play Again — full state reset without a page reload
- Open the game — live here or via
index.htmllocally - Click 🪨 Rock, 📄 Paper, or ✂️ Scissors
- The computer picks simultaneously — winner of the round is shown instantly
- First to win the most rounds out of 5 takes the game
- Hit Play Again to run it back
git clone https://github.com/your-username/rock-paper-scissors.git
cd rock-paper-scissors
# open index.html in browserNo dependencies. No build step. Just open and play.
├── index.html # Game layout — scores, buttons, result areas
├── script.js # All game logic
└── styles.css # Styling + 15+ keyframe animations
// Core game loop
function playRound(playerChoice) {
const computerChoice = getComputerChoice(); // random pick
const result = determineWinner(playerChoice, computerChoice); // 'win' | 'lose' | 'draw'
if (result === 'win') playerScore++;
else if (result === 'lose') computerScore++;
updateScores();
displayRoundResult(result, playerChoice, computerChoice);
currentRound >= maxRounds ? endGame() : currentRound++;
}
// Win condition lookup
function determineWinner(player, computer) {
if (player === computer) return 'draw';
if (
(player === 'rock' && computer === 'scissors') ||
(player === 'paper' && computer === 'rock') ||
(player === 'scissors' && computer === 'paper')
) return 'win';
return 'lose';
}State is fully reset on Play Again — scores, round counter, all DOM elements — no reload needed.
| Animation | Trigger |
|---|---|
gradientShift |
Background — runs continuously |
fadeInScale |
Game card on load |
winCelebration |
Round result — win |
loseShake |
Round result — lose |
drawSway |
Round result — draw |
victoryPulse |
Final result — game won |
scorePulse |
Score box on update |
buttonPulse |
Choice button on click |
Fork it, improve it, PR it. Bug fixes and new features welcome!
Vanilla JS · Deployed on Render · Made by HK