Skip to content

shashankBgowda/Rock-Paper-Scissors

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 

History

5 Commits
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

Rock-Paper-Scissors

Rock-Paper-Scissors game is built with HTML, CSS and JS.

Rock-Paper-Scissors Game

A simple Rock-Paper-Scissors game built using HTML, CSS, and JavaScript. This game allows users to play against the computer in a fun and interactive way.

๐Ÿš€ Features

  • Interactive UI with images for rock, paper, and scissors.
  • Randomized computer moves for a fair game.
  • Score tracking for both player and AI.
  • Engaging UI feedback for wins, losses, and ties.

๐Ÿ› ๏ธ Technologies Used

  • HTML: Structure of the game.
  • CSS: Styling and layout.
  • JavaScript: Game logic and interactivity.

๐ŸŽฎ How to Play

  1. Click on Rock, Paper, or Scissors.
  2. The computer will randomly select one of the three options.
  3. The result will be displayed:
    • โœ… You Win โ€“ Your choice beats the computer's.
    • โŒ You Lose โ€“ The computer's choice beats yours.
    • ๐Ÿค It's a Draw โ€“ Both choices are the same.
  4. Scores will be updated accordingly.
  5. Play again to improve your score!

๐Ÿ“‚ Project Structure

Rock-Paper-Scissors-Game/
โ”‚โ”€โ”€ index.html       # Main HTML file
โ”‚โ”€โ”€ style.css        # Styling file
โ”‚โ”€โ”€ app.js           # JavaScript game logic
โ”‚โ”€โ”€ images/          # Folder for game images (Add images here)
โ””โ”€โ”€ README.md        # Project documentation

๐Ÿ–ฅ๏ธ Setup and Usage

  1. Clone the repository:
    git clone https://github.com/yourusername/Rock-Paper-Scissors-Game.git
  2. Open the index.html file in any modern web browser.

๐Ÿ”ง Fixing Broken Image Paths

Currently, the images in index.html and style.css are set to an absolute local path. To fix this:

  • Move your images to a local images/ folder inside the project directory.
  • Update the image paths in htmlfile.html and style.css, for example:
    <img src="images/rock.png" alt="Rock">
    background-image: url('images/background-img.webp');

๐Ÿ“Œ Improvements to Consider

  • Adding animations for a better user experience.
  • Allowing users to set their names.
  • Implementing a best-of-three or best-of-five mode.

๐Ÿ† Author

Developed by Shashank B G.

Enjoy the game and feel free to contribute! ๐ŸŽ‰

About

Rock-Paper-Scissors game is built with HTML, CSS and JS.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published