Rock-Paper-Scissors Game

Welcome to the Rock-Paper-Scissors project! This README provides an overview of the project, including user experience design, features, technologies used, testing, deployment, and credits.

Visit the deployed website: https://jb060.github.io/rock-paper-scissors/

Table of Contents

1. User Experience (UX)
   1. Project Goals
2. Features
   1. General
   2. Home Section
   3. Instructions Section
   4. Game section
   5. Result Section
3. Technologies Used
   1. Languages Used
   2. Frameworks, Libraries and Programs Used
4. Bugs
5. Testing
   1. Tools testing
   2. Manual Testing
6. Finished Product
7. Improvements
   1. Game_Modes
   2. AI Enhancements
   3. Statistics
   4. Gameplay-Variations
8. Deployment
   1. GitHub_Pages
9. Credits
   1. Content
   2. Media
   3. Code
10. Acknowledgements

User Experience (UX)

Project Goals

The goal of this project is to create a simple, engaging, and responsive Rock-Paper-Scissors game that is easy to play and accessible on various devices. The project aims to deliver a visually appealing interface with clear instructions and immediate feedback on game results.

Features

General

• Responsive Design: Adaptable to different screen sizes and devices:

• Interactive Elements: Buttons and animations to enhance user engagement.

Home Section

• Introduction: Brief overview of the game:
• Start Button: A prominent button to start the game. A prominent button to start the game.

Instructions Section

• How to Play: Simple and clear instructions for playing Rock-Paper-Scissors.
• Rules Explanation : Detailed rules including how to win, lose, or draw.

Game Section

• Choice Buttons: Options to select Rock, Paper, or Scissors.
• Visual Feedback: Displays both user and computer choices with corresponding icons.
• Game Logic: Determines the outcome (win, lose, or draw) based on the choices made.

Result Section

• Outcome Display: Shows whether the user has won, lost, or drawn. lose screen shows you lost the game Tie screen shows you Tie the game Win screen shows you Win the game

• Score Tracker: Keeps track of the number of wins, losses, and draws.

Technologies Used

Languages Used

• HTML5: For structuring the web pages.
• CSS3: For styling and layout.
• JavaScript: For game logic and interactivity.

Frameworks, Libraries, and Programs Used:

• Bootstrap: For responsive design and layout.
• FontAwesome: For icons used in the game.
• Google Fonts: For typography.
• jQuery: For simplifying JavaScript code.
• GitHub: For version control and project hosting.

Bugs

1. Incorrect Winner Determination:

• Bug: The app sometimes declared the wrong winner, especially in edge cases where the user input was not properly validated.
• Fix: Improved the game logic to handle all possible outcomes correctly and added additional validation for user input.

2. Unresponsive User Interface:

• Bug: The UI would become unresponsive after multiple rounds of the game.
• Fix: Optimized the event handling and ensured proper cleanup of resources after each game round.

3. Score Reset Issue:

• Bug: The score counter was not resetting correctly when a new game session started.
• Fix: Implemented proper state management to reset the score and game state at the start of each new session.

4. Crash on Invalid Input:

• Bug: The app would crash if the user entered an invalid move (anything other than rock, paper, or scissors).
• Fix: Added input validation to handle invalid entries gracefully and prompt the user to enter a valid move.

Testing

Tools Testing

• Lighthouse: Check performance, accessibility, best practices, and SEO.
• W3C Validators: HTML and CSS validation for code quality.

Manual Testing

• Cross-Browser Testing: Ensured compatibility across multiple browsers (Chrome, Firefox, Safari).
• Device Testing: Verified functionality on various devices (desktops, tablets, smartphones).
• Functional Testing: Checked that all buttons, game logic, and feedback mechanisms work as expected.

Finished Product

• The finished Rock-Paper-Scissors game is fully functional and responsive, providing a seamless user experience with an intuitive interface and real-time feedback. Screenshots and live demo links are available in the project repository.

Improvements

The game at the minute is functional, but lacks a theme, I would like to make the following improvements in the future to make the game a lot better for users:

Game Modes:

• Single Player: Play against the computer.
• Multiplayer: Two players can play against each other on the same machine.
• Online Multiplayer: Implement online multiplayer functionality.

AI Enhancements:

• Difficulty Levels: Implement different difficulty levels by varying the computer’s strategy.
• Learning AI: Implement a learning algorithm where the computer improves its strategy based on past games.

Statistics:

• Score Tracking: Keep track of scores across multiple rounds.
• Game History: Display the history of moves and outcomes.

Gameplay Variations:

• Extended Choices: Include additional choices like Rock-Paper-Scissors-Lizard-Spock.
• Custom Rules: Allow users to create their own rules or variations.

Deployment:

GitHub Pages This website was developed using GitPod, which was then committed and pushed to GitHub using the GitPod terminal. Here are the steps to deploy this website to GitHub Pages from its GitHub repository:

1. Log in to GitHub and locate the GitHub Repository.

2. At the top of the Repository, locate the Settings button on the menu.

3. Alternatively click here for a GIF demonstration of the process. Please scroll down the Settings page until you find the Pages section.

4. Under Source, click the None dropdown and select Master Branch.

5. The page will refresh automatically and generate a link to your website.

Credits

Content

• Game Logic: Custom JavaScript code developed to implement game functionality.
• Text: Instructions and game descriptions written by Jason Byrne.

Media

• Icons: Sourced from FontAwesome.
• Graphics: Created Photoshop for visual elements in the game.

Code

• Inspiration: Various online resources and tutorials inspired and guided the development process.
• Here lies the code for the function for the scorekeeping of the game.

Acknowledgements

• Mentor: Thanks to my mentor Marcel who has provided me with great insight into the world of javascript and his experience within the space.
• Slack Community: Thanks to the online development communities and tutorial creators who provided valuable insights and guidance.
• Feedback: Appreciation to the users who provided feedback during testing and helped refine the game.

Thank you for exploring the Rock-Paper-Scissors game! Enjoy playing!