Rock, Paper, Scissors, Lizard, Spock (abbreviated as RPSLS) elevates the traditional Rock, Paper, Scissors (RPS) game with additional complexity. In RPSLS, each option can defeat two others - for instance, Rock overcomes both Scissors and Lizard, unlike in RPS where each option only beats one other (e.g., Rock defeats Scissors).
This game features a series of five rounds pitting the player against the computer, offering a chance to become accustomed to the nuances of RPSLS. The computer's selections are randomly generated, ensuring unbiased outcomes and a fair playing experience. It's a contest of chance where either the player or the computer could emerge victorious!
Designed for both adults and children, this game is an engaging way to understand RPSLS rules. It presents a more intricate alternative to the classic game, providing fun and interactive play among participants.
This site caters to enthusiasts of the Big Bang Theory, who likely recognize the game from the show. It offers them an opportunity to engage in the game, mirroring its portrayal on TV, against a computer with randomized choices.
Both new and returning users share identical objectives:
To experience the game as depicted in the TV series.
To enjoy a game with a defined objective, including a score tracker.
For new users, to receive a refresher on the game's rules.
- As a user, I want to be able to figure out what the game is.
- As a user, I want to easily be able to understand how to play the game.
- As a user, I want to know what score the game is up too.
- As a user, I want to be able to easily navigate through the game.
- As a user, I want the score to be easily visible so I can clearly see who is winning.
- Home
- This is launch page for the game
- The user will choose one of animated icons
- The user will read the games instructions with Rules buttom
- Score ounter will reflect eighter user won or lost against computer
- Try Again button leads to home page so user can chose again game card/animated icon
- Game cards/Animated icons
- 5 Game Cards of : Rock, Paper, Scissors, Lizard, Spock
- Rules button
- By clicking will show modal screen of rules
- Rules image:
- Score Counter:
- The score is adjusted based on the outcome of each game round. If the user loses, the score decreases.
- Conversely, if the user wins against the computer, the score increases.
- Result w/ Try Again button
- By clicking Try Again button that leads to home page in order to play again with same score
- Footer
- Links to the Webpage of Code Institute will open in a new tab to allow easy navigation for the user.
- Links to the users Github & Linkeding Profile as it gives them an easy contact option via social media.
- Reset button
- Additional Score Counter, in order to have 1 for User and another for Computer
- Pop up modal screen to input User Name
-
Initial flow chart of game logic: *
-
Colour Scheme
- Primary colors used on the website:
- Primary colors used on the website:
-
Typography
- 'Roboto' font is main font used throughout the site with sans-serif as its fallback font in case Roboto doesn't import for some reasson.
-
Wireframes
- Pen and paper in a notebook: simple and effective.
- Gitpod
- To write the code.
- Visual Studio Code
- Integrated Development Environment used for coding
- Github
- Deployment of the website and storing the files online.
- Github
- Cloud-based development environment provided by GitHub.
- Github Copilot
- As assitent in VScode Studio.
- Am I Responsive
- Mockup picture for the README file.
The W3C Markup Validator and W3C CSS Validator services were used to validate every page of the project to ensure there were no errors.
- Fixed bug in JS function related to counting score, first win or lose woud ad +5 or -5 to score, found errir by setting starting count by 0
- Numerous bugs fixed in process of achieving responsivennes
- Upon publishing the site with GitHub it was clear that relative pathways were not working and caused a problem with loading the images on the website. This was easily fixed by updating all the file pathways to absolute.
Nu Html Checker
W3C CSS Validator
JSHint JS Validator
- The website was tested on Google Chrome, Microsoft Edge, and Opera browsers.
- The website was viewed on a desktop computer, laptop, and Samsung Galaxy A52 mobile phone.
- A large amount of testing was done to ensure links between pages are working correctly on all pages.
- Family and friends were asked to review the website for a better understanding of the user experience.
- Dev Tools was used to test how the site looks on various screen sizes.
Google's Lighthouse application
GitHub Pages used to deploy live version of the website.
- Log in to GitHub and locate GitHub Repository
- At the top of the Repository(not the main navigation) locate "Settings" button on the menu.
- Scroll down the Settings page until you locate "GitHub Pages".
- Under "Source", click the dropdown menu "None" and select "Main" and click "Save".
- The page will automatically refresh.
- Scroll back to locate the now-published site link in the "GitHub Pages" section.
By forking the repository, we make a copy of the original repository on our GitHub account to view and change without affecting the original repository by using these steps:
- Log in to GitHub and locate GitHub Repository
- At the top of the Repository(under the main navigation) locate "Fork" button.
- Now you should have a copy of the original repository in your GitHub account.
- Log in to GitHub and locate GitHub Repository
- Under the repository name click "Clone or download"
- Click on the code button, select clone with HTTPS, SSH or GitHub CLI and copy the link shown.
- Open Git Bash
- Change the current working directory to the location where you want the cloned directory to be made.
- Type
git cloneand then paste The URL copied in the step 3. - Press Enter and your local clone will be created.
- General programming concepts and troubleshooting guided by discussions and solutions on Stack Overflow.
- The Rock Paper Scissors Code Tutorial by freeCodeCamp (Tutorial)
- The README template was helpfully provided by Code Institute (template)
- Modals.
- Local Storage.
- Concepts and JavaScript implementation techniques adapted from HackerNoon's tutorial (Tutorial)
- Color contrast checker was used to decide which colors would be used for the website.
- Colour Scheme
- Game Cards: Rock, Paper, Scissors, Lizard, Spock
- Rules Image from wikipedia free stock photos, royalty free images.
- Pixlr Resizing images.
- Layout of Header idea.
- My mentor Mitko Bachvarov who provided helpful feedback and learning links, challenged me to go beyond and above by creating a more complex version of the classic Rock, Paper, Scissors.
- Slack community for encouragement and information.
- Code Institute Hackathons