Cara McAvinchey
- For fans of Big Bang Theory, this twist on the classic rock, paper, scissors game designed using JavaScript hopes to bring enjoyment to those who would like a 5 minute break whether at home or at work. The sight allows users to play against Sheldon Cooper using 'lizard' and 'spock' as additional choices.
You can view the deployed website here
- ROCK, PAPER, SCISSORS, LIZARD, SPOCK GAME
- The project goal is to create a fully functioning and responsive game using JavaScript.
-
As a first time visitor,
- I want to be able to play the game quickly and learn the rules fast.
- The rules need to be clear to understand and easy to refer back to if needed.
-
As a returning visitor,
- I want to be able to start playing the game once I load the page with very few clicks.
- If I forget the rules, I want to be able to refer back to the rules quickly.
- Paul commutes to work via subway each morning and enjoys a quick 5 minute game as he travels.
- Lisa enjoys a short game between meetings or whilst waiting for appointments. As a Big Bang Theory fan, she enjoys sharing the game with her friends.
- The space background image inspired the color palette of the website and links to the theme of the game.
- The headings and body text are white to ensure clear contrast and readability for the user.
- Background of the header and footer is a light purple to ensure clear contrast and delineation between sections.
- All text and icon elements have a semi-transparent purple background to ensure the text has contrast from the background.
- The icons are orange to add contrast from the purple palette.
- The logo and headings use ZCOOL QingKe HuangYou and body text uses Open Sans with a fall-back font of san-serif.
- The choice of fonts were selected using Google Fonts.
- The headings decrease in size to ensure full responsiveness of the website.
- The background image matches with the space theme of the game and creates a sense of depth without disrupting the foreground.
- The rules image provides a clear diagram of the game moves and results.
- The icons are used consistently across the site for game controls and in the rules.
- The buttons across the site have a subtle grow effect when hovered over by the user.
- The website was designed using flexbox instead of float or grid to avoid fixed heights and ensure responsiveness throughout the website.
- The users are greeted with a menu allowing them to either play the game or read the rules first.
- The close and quit buttons help to easily navigate between areas of the website.
- The game score area shows the icons of each user and their move. The score increments and a message is displayed to show the user the result of their move.
- The controls are buttons with hand icons to easily distinguish between each control.
- If on a smaller screen size, the buttons will respond by stacking on each other.
- The user has a choice of image or info graphic table to refer to when learning the moves.
- This message will appear for users who do not have JavaScript enabled on their browser.
- This footer includes links to the relevant social media sites for game development group who created the site. The links will open to a new tab to allow easy navigation for the user.
- First time users and returning users will be able to connect with players via social media.
- This page was created in case of any broken links or issues. It is styled the same as the rest of the site for familiarity for the user.
- The page includes the navigation which will allow the user to go back to the home page or any page they were previously on.
- Future opportunities for the game include adding a high score function to be able to compete with other users and allowing scores to be saved once a user returns to play again.
- Audio for the game when a user wins or loses can add more interest.
- Adjusting the 'It's a win/lose/tie' text to be insults from Sheldon Cooper himself.
- HTML
- No errors were returned when passing through the official HTML validator
- CSS
- No errors were found when passing through the CSS validator.
- JS validation
- No errors found when passing through the JS validator.
- The below combination of devices, browsers, and operating system were used to test the website. A range of viewport sizes were checked to see if users would have the same experience across multiple devices and browsers.
| TOOL / Device | BROWSER | OS | SCREEN WIDTH |
|---|---|---|---|
| dev tools: Galaxy Fold | Chrome | android | 280 x 653 px |
| dev tools: iPhone SE | safari | iOs | 375 x 667 px |
| dev tools: Pixel 2 | Chrome | android | 411 x 731 |
| real phone: iPhone XR | safari | iOs | 414 x 896 px |
| browserstack: Nexus 7 | Firefox | android | 960 x 600 px |
| browserstack: iPhone 13 Pro | safari | iOs | 390px × 844px |
| real tablet: iPad Pro 11 | Chrome | iOs | 834 x 1075 px |
| real laptop: Macbook Pro | Firefox & Chrome | iOs | 1400 x 766 px |
| broswerstack | Firefox | iOs | 1440 x 672 px |
| browserstack | Edge 99 | windows | 1440 x 672 px |
First time visitor:
- As a first time visitor, I want to be able to play the game quickly and learn the rules fast. The rules need to be clear to understand and easy to refer back to.
- The welcome area with the menu will allow users to navigate the page quickly and easily as needed.
- The rules are displayed both as a visual and infographic grid.
Returning visitor:
- As a returning visitor, I want to be able to start playing the game once I load the page with very few clicks. If I forget the rules, I want to be able to refer back to the rules quickly.
- The close and quit buttons will help users navigate between the rules and game area.
- You can view manual testing of the website here
- The footer doesn't remain fixed at the bottom of the site on all screen sizes, this isn't obvious to the user and doesn't clash with other elements. This will be fixed in future debugging.
- The resizing of the game section for smaller screen sizes had many challenges. Flexbox solved most of the issues using media queries.
- The deployed website was run through web.dev measure to check performance, accessibility, best practices and SEO scores.
- The user will be able to use the tab, arrow and enter keys if needed when navigating the website.
- Click on the settings link in the menu:
- This game was built with the guidance and source code from Mehdi Aoussiad
- Code Institute Student Template: gitpod full template.
- The pairing of ZCOOL QingKe HuangYou and Open Sans were chosen using Google Fonts.
- The colors for the website was generated using Coolers.co.
- The background image was sourced using Pexels.
- The game rules image was sourced using Creative Commons Search.
- The icons for the favicon, footer, about page and location headings were taken from Font Awesome.
- The favicon image was converted using Favicon.io.
- Thank you to my mentor for continuous helpful feedback and support throughout the project.
- The tutors at Code Institute for their patience and support.
- The Code Institute Slack community for tips and guidance.