Overview

Rock-Paper-Scissors-Lizard-Spock is an entertaining game of chance that offers a fun twist on the classic Rock-Paper-Scissors. In this expanded version, players choose from five options: Rock, Paper, Scissors, Lizard, or Spock. The computer opponent also makes a random choice, and the user interface displays the outcome—whether the user wins, loses, or draws. Additionally, the game features score tracking, allowing users to keep a record of their wins and losses over multiple rounds. The player has the option to play again after each round.

User stories

• Story one: As a user, I want to play Rock, Paper, Scissors, Lizard, Spock against an opponent, so that I can enjoy a simple yet strategic game.

• Story two: As a user, I want the game to include distinct icons for each option, so that I can easily identify the available choices and see which options have been selected by my opponent.

• Story three: As a user, I want to access the game rules and instructions easily so that I can understand how to play the game correctly.

• Story four: As a user, I want to play against a computer opponent, so that I can enjoy the game even when no other players are available.

• Story five: As a user, I want my wins and losses to be tracked, so that I can monitor my score against the computer's score throughout the duration of the game.

• Story six: As a user, I want a clear explanation of the game rules and a tutorial on how to play, so that I can understand the game and its mechanics.

• Story seven: As a site owner, I want the game to have an engaging and intuitive interface, so that users find it enjoyable and easy to play.

• Story eight: As a user I want feedback on how I did so I know whether the game was a win, loss or a draw.

• Story nine: As a user I want to be able to quickly navigate back to the main page if I want to play again.

Acceptance criteria

• The user should be able to initiate a game of Rock, Paper, Scissors, Lizard, Spock from the game menu.

• The game should provide options for the user to choose between Rock, Paper, Scissors, Lizard, or Spock.

• After the user makes their choice, the opponent (computer or another player) should make their choice.

• The game should determine the winner based on the rules of Rock, Paper, Scissors, Lizard, Spock:
  a. Rock crushes Scissors
  b. Scissors cuts Paper
  c. Paper covers Rock
  d. Rock crushes Lizard
  e. Lizard poisons Spock
  f. Spock smashes Scissors
  g. Scissors decapitates Lizard
  h. Lizard eats Paper
  i. Paper disproves Spock
  j.Spock vaporizes Rock
  

• The game should display the result of the round (e.g., "You win!", "You Lose!", or "It's a tie!").

• The game should keep track of the score, displaying the number of wins, losses for each participant.

• The user should have the option to play again after each round.

• The game should provide a way for the user to exit the game or return to the main menu at any time.

• The game should have a clear and intuitive user interface, guiding the user through each step of the game.

• The game should be playable on different devices and screen sizes, ensuring responsiveness and usability.

• Distinct Icons for Each Option: The game should feature distinct and easily recognizable icons for each available option, including Rock, Paper, Scissors, Lizard, and Spock. Each icon should visually represent its corresponding option accurately, ensuring clarity and consistency in iconography.

• Visual Differentiation: Icons for different options should be visually distinct from one another to prevent confusion and facilitate quick identification. Design elements such as color, shape, and symbolism should be used effectively to differentiate between icons.

• Consistent Iconography: The icons used for each option should maintain consistency across different parts of the game interface, including menus, gameplay screens, and result displays. Users should be able to easily identify each option based on its associated icon regardless of context.

• Opponent's Selection Display: During gameplay, the game interface should clearly indicate the option selected by the opponent using the corresponding icon. The opponent's selected icon should be prominently displayed and easily visible to the player, allowing for quick comparison and decision-making.

• Accessibility Considerations: The icons should be designed with accessibility in mind, ensuring that they are easily distinguishable for users with visual impairments or color deficiencies. Alternative text or labels should be provided for each icon to convey their meaning to users who may rely on assistive technologies.

• Icon Feedback on Interaction: When the player selects an option, the corresponding icon should provide visual feedback to confirm the selection. This feedback may include animations, color changes, or highlighting effects to indicate the active selection to the player.

• Quality and Resolution: The icons should be designed at a sufficiently high resolution to ensure crisp and clear display on various screen sizes and resolutions. Care should be taken to avoid pixelation or distortion when scaling the icons for different display contexts.

• User Testing for Icon Recognition: The game interface, including the icons for each option, should undergo user testing to assess their effectiveness in facilitating quick and accurate decision-making. User feedback should be collected to identify any issues or areas for improvement in icon recognition and visibility.

• Initiating Single Player Game: The user should be able to initiate a single-player game against a computer opponent from the game menu. There should be a clear option or button to start a single-player game visible to the user.

• Computer Opponent Selection: When starting a single-player game, the user should be automatically matched with a computer opponent. The computer opponent should provide a suitable level of challenge to the user, adjusted based on the user's skill level if applicable.

• Gameplay Experience: The gameplay against the computer opponent should follow the same rules and mechanics as playing against another human player. The computer opponent should make randomized, providing an engaging gameplay experience for the user.

• Feedback and Result Display: After each round, the game should display the user's choice, the computer opponent's choice, and the result of the round (win, lose, or tie). The user should receive clear and immediate feedback on the outcome of each round, enhancing the gaming experience.

• Scalability and Performance: The single-player mode should be scalable and performant, ensuring smooth gameplay even with complex decision-making algorithms for the computer opponent. The game should handle the computation required for the computer opponent's moves efficiently, avoiding delays or lags in gameplay.

• Game Navigation: The user should have the option to play multiple rounds against the computer opponent without interruptions.

• User Interface and Experience: The user interface should provide a seamless and intuitive experience for interacting with the game, including selecting moves and viewing game results. The game should maintain a consistent visual style and layout across different screens and devices, ensuring accessibility and usability.

• Persistent Tracking: The game should maintain a persistent record of the user's and computer's score across multiple gaming rounds.

• Display of Performance Metrics: The user should have access to a dedicated section or interface within the game where their wins and losses are displayed. The performance metrics should be presented clearly and comprehensively, allowing the user to easily interpret their gameplay statistics.

• Real-Time Updates: The wins and losses count should be updated in real-time during gameplay, reflecting the outcome of each round accurately. The user should see immediate changes to their performance metrics after completing a round, providing instant feedback on their gameplay.

• Access to Game Rules: The game should provide a dedicated section or menu option where users can access the game rules. Users should be able to navigate to the game rules easily from the main menu or within the game interface.

• Comprehensive Rule Explanation: The game rules section should include a comprehensive explanation of all the rules and mechanics of the game. Each rule should be clearly defined and accompanied by examples or illustrations to aid understanding.

• Tutorial Integration: The game should include an interactive tutorial mode that guides users through the gameplay mechanics step by step. The tutorial should cover basic actions, such as navigating menus and making selections, as well as more advanced gameplay elements.

• Interactive Learning Experience: The tutorial should offer interactive elements, such as audible and visual instructions to engage users in the learning process.

• Clear Instructions and Guidance: Instructions provided in the tutorial should be clear, concise, and easy to follow, catering to users of all skill levels and sensory capabilities. The tutorial should offer contextual guidance and tips to help users understand the significance of each gameplay rule and how to apply them effectively.

• Accessibility Considerations: The tutorial should be accessible to users with diverse needs and preferences, including options for adjusting text size, contrast, and audio settings. The game should provide alternative formats or supplementary materials for users who may require additional assistance in understanding the game rules.

• Visual Design: The game interface should feature visually appealing graphics, animations, and color schemes that capture the attention of users. The design should be consistent with the overall aesthetic of the website, maintaining brand identity and a consistent theme throughout.

• User-Friendly Navigation: The game interface should have intuitive navigation menus and buttons that are easy to locate and use. Users should be able to navigate between different sections of the game, such as rules and gameplay screens without confusion.

• Responsive Design: The game interface should be responsive and adaptive to different screen sizes and devices, including desktops, laptops, tablets, and smartphones. Elements of the interface should adjust dynamically to ensure optimal viewing and interaction experiences across various devices.

• Clear Information Hierarchy: The layout of the game interface should prioritize important information and actions, guiding users' attention effectively. Key elements, such as game instructions, player stats, and navigation controls, should be prominently displayed and easily accessible.

• Interactive Elements: The interface should incorporate interactive elements, such as buttons, sliders, and input fields, to facilitate user engagement and interaction. Users should receive immediate feedback when interacting with elements, such as button clicks or menu selections, to confirm their actions.

• Accessibility Features: The game interface should include accessibility features to accommodate users with disabilities or special needs.

• Performance Optimization: The game interface should be optimized for performance, ensuring smooth and responsive interactions even on devices with lower hardware specifications. Load times for interface elements, such as menus and graphics, should be minimized to enhance the overall user experience.

• Consistent Feedback and Messaging: The interface should provide clear and consistent feedback to users in response to their actions, such as success messages, error notifications, and prompts for further engagement. Users should be guided effectively through each step of the gameplay experience, with contextual messages and prompts as needed.

Wireframes

We used Balsamiq to craft wireframes, capturing the visual essence of our game. The following images illustrate the progression of our design:

Languages, Frameworks and Libraries

• HTML5 - Used for designing the structure of the project.
• CSS - Used for styling the project.
• JavaScript - Used to add interactivity to the game.
• Github - Used to store the game source code, for project tracking and for the deployment of the live application.
• Slack - Used for team collaboration and communication.
• Gitpod - The coding environment in which the game was built.
• Balsamiq - Used to create site wireframes.
• Bootstrap - Used for developing a pleasing front end.

Game features

Game title

The game title is prominently displayed at the top of the user interface, ensuring that players always know the name of the game. Styled attractively in an eye-catching shade of orange, the title harmonizes with the overall color scheme of the game, enhancing the visual appeal and maintaining consistency throughout the interface.

Rules

The game includes a "Rules" button that, when clicked, provides users with a comprehensive guide to the game rules. Upon clicking, a modal pops up displaying the following image:

.

Additionally, the voice of Sheldon is heard, offering an auditory explanation of the rules. This combination of visual and auditory guidance ensures that players have a clear understanding of how to play the game.

Score tracking

The game includes a score tracking feature that counts and displays the number of wins for each player. After each round, the player's score is shown on the left side of the UI, while the computer opponent's score appears on the right side. This clear and straightforward layout allows players to easily keep track of the number of games won by both themselves and the computer.

Feedback

The game contains a features that gives the player feedback after each game. It tells the user which option they picked, the option picked by the computer and which participant won the round.

After each game, the player will receive comprehensive feedback that includes the following information:

1. Player's Choice: Clearly state the option the player selected.
2. Computer's Choice: Clearly state the option the computer selected.
3. Round Outcome: Inform the player whether they won or lost the round.

Play again

After each round, the player is presented with a "Play Again" button, allowing them to continue playing the game seamlessly. This button is styled to match the game's theme, ensuring a cohesive look and feel. Upon clicking the button, the user is taken back to the main game interface to start a new round.

Testing

Validation:

https://validator.w3.org/ - One warning only, for missing heading. https://jigsaw.w3.org/css-validator/ -Congratulations, no errors found.

Performance testing

The application was evaluated for speed, loading times, accessibility, and search engine optimization using Google Chrome Lighthouse. The results showed that the game application performed well overall, though there are areas for potential improvement. For instance, enhancing accessibility can be achieved by increasing the contrast between the foreground and background. Additionally, search engine optimization can be improved by including a meta description in the document.

• Browser Compatibility Testing: Ensured compatibility with Chrome, Opera, Microsoft Edge, and Firefox desktop browsers.

• Responsiveness Testing: Utilized Chrome Developer Tools to verify responsiveness across multiple devices: Desktop, Laptop, Moto G4, Galaxy S5, iPhone 5/SE, iPhone 6/7/8, iPhone 6/7/8 Plus, iPad, iPad Pro, Galaxy Fold.

Bugs

The bugs encountered while making this game, included. html positioning for UX. Bug detected in winner results and resolved.

Deployment

The site was deployed to GitHub pages on 28th May 2024. The steps to deploy are as follows: In the GitHub repository, navigate to the Settings tab From the source section drop-down menu, select the Master Branch Once the master branch has been selected, the page will be automatically refreshed with a detailed ribbon display to indicate the successful deployment. The live link can be found here https://safihasan.github.io/the-game-theory-gang1/

Credits

README template

Online Javascript Tutorials

W3schools

Bootstrap

Free icon