Skip to content

Aman11b/Ordin-RPS

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

4 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Ordin-RPS

🎮 Rock-Paper-Scissors Game

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.

🚀 Features

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

📂 Project Structure

├── index.html          # Landing page
├── game.html           # Game page
├── result.html         # Result page
├── style.css           # Styles for the game
└── README.md           # This file

Key HTML Files:

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

🎨 Styling

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.

📜 Installation & Usage

To run the game locally:

  1. Clone this repository:
    git clone https://github.com/your-username/rock-paper-scissors-game.git
    cd rock-paper-scissors-game
  2. Open index.html in your browser to start playing.

If you want to contribute or modify the code, feel free to fork the project and submit pull requests.

🌐 Live Demo

The game is live! Play Rock-Paper-Scissors Now

🛠️ Technologies Used

  • HTML5
  • CSS3 (Flexbox, Transitions)
  • JavaScript (DOM manipulation, local storage)

📖 Learning Experience

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

👏 Credits

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.

Additional Tools & Resources:

  • Google Fonts for providing the "Agdasima" font used in the project.
  • GitHub Pages for hosting the live version of the game.

About

Project Rock Paper Scissors

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published