Welcome to the Rock-Paper-Scissors Game! This project is an interactive browser-based game built using HTML, CSS, and JavaScript. It includes a landing page, a game page where players compete against the computer, and a results page that dynamically updates based on the player's performance.
- Responsive UI: The game is designed to be responsive across devices.
- Dynamic Background: The results page features a dynamic background change based on the game outcome.
- Game Flow:
- Choose between "Rock", "Paper", or "Scissors".
- The computer randomly selects its choice.
- Scores are updated in real-time.
- After 5 rounds, the game displays the final result.
├── index.html # Landing page
├── game.html # Game page
├── result.html # Result page
├── style.css # Styles for the game
└── README.md # This file
index.html: The landing page where the player can start the game.game.html: The main game interface where the player makes their choice and sees the current score.result.html: The final page that shows the result of the game, with a dynamic background change based on whether the player won, lost, or tied.
All the pages are styled with a consistent theme using CSS Flexbox for layout control:
- The main background colors, button styles, and hover effects give the game a polished, engaging look.
- On the result page, the background changes dynamically depending on the game outcome, providing instant feedback to the player.
Example CSS Classes:
.Welcome-container: Used to center the content on the landing page..game-container: Centers the game elements and buttons on the game page..result-container: Dynamically adjusts the result page's background and layout.
To run the game locally:
- Clone this repository:
git clone https://github.com/your-username/rock-paper-scissors-game.git cd rock-paper-scissors-game - Open
index.htmlin your browser to start playing.
If you want to contribute or modify the code, feel free to fork the project and submit pull requests.
The game is live! Play Rock-Paper-Scissors Now
- HTML5
- CSS3 (Flexbox, Transitions)
- JavaScript (DOM manipulation, local storage)
This project helped me learn and apply core web development concepts such as:
- DOM Manipulation using JavaScript
- CSS Flexbox for responsive layouts
- State Management in JavaScript to track player and computer choices
- LocalStorage for persisting game results across pages
- Dynamic UI updates based on user interaction and game outcomes
This project was developed as part of The Odin Project, an open-source curriculum for learning full-stack web development. Huge thanks to their team and community for providing excellent resources.
- Google Fonts for providing the "Agdasima" font used in the project.
- GitHub Pages for hosting the live version of the game.