Skip to content

hrithik18k/Rock-Paper-Scissors-game

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

4 Commits
 
 
 
 
 
 
 
 

Repository files navigation

🎮 Rock Paper Scissors

Best of 5. You vs. the machine. May the odds be ever in your favour.

Live Demo HTML CSS JavaScript


✨ Features

  • 🎯 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

🕹️ How to Play

  1. Open the game — live here or via index.html locally
  2. Click 🪨 Rock, 📄 Paper, or ✂️ Scissors
  3. The computer picks simultaneously — winner of the round is shown instantly
  4. First to win the most rounds out of 5 takes the game
  5. Hit Play Again to run it back

🚀 Run Locally

git clone https://github.com/your-username/rock-paper-scissors.git
cd rock-paper-scissors
# open index.html in browser

No dependencies. No build step. Just open and play.


📁 Project Structure

├── index.html     # Game layout — scores, buttons, result areas
├── script.js      # All game logic
└── styles.css     # Styling + 15+ keyframe animations

🧠 Logic Overview

// 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 Highlights

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

🤝 Contributing

Fork it, improve it, PR it. Bug fixes and new features welcome!


Vanilla JS · Deployed on Render · Made by HK

About

No description, website, or topics provided.

Resources

Stars

2 stars

Watchers

0 watching

Forks

Releases

No releases published

Packages

 
 
 

Contributors