Rock, Paper, Scissors, Lizard, Spock, invented by Sam Kass, is an adaptation of the traditional game of chance, Rock, Paper, Scissors. It was popularized by Dr. Sheldon Cooper from "The Big Bang Theory". In "The Lizard-Spock Expansion" episode, it is first used to resolve a TV-watching disagreement between Sheldon and Raj.
The rules for this game are simple, the player picks a variable and reveals it simultaneously as the pc. The winner is the one who gets 10 points first. In a tie, the process is repeated until a winner is found.
Scissors cuts Paper, Paper covers Rock, Rock crushes Lizard, Lizard poisons Spock, Spock smashes Scissors, Scissors decapitates Lizard, Lizard eats Paper, Paper disproves Spock, Spock vaporizes Rock, (and as it always has) Rock crushes Scissors.
The Live Game can be accessed HERE!
- Rock, Paper, Scissors, Lizard, Spock
Header
The Header at the top of the page features a contrasting font that makes it stand out and prominently displays the game's title.
The Rules, Reset button and Score Area
- Rules button:
The modal gives a short overview of the game rules.
The modal contains a close button, which the user can use to close it.
- Reset button:
When clicked, it resets the scores to 0 and removes the choices and the result from the game area.
- Scores area:
The player's score is on the left, increasing after each player's win. The right shows the computer's score, which also updates after each win.
Choices Area
The following section contains the game options that the player can select: Rock, Paper, Scissors, Lizard, Spock. The computer initiates an automatic random play when the player clicks on one option.
The printed name and a Font Awesome icon are used to assist the user in learning the hand movements often associated with the game.
Each button also includes a hoover and an active element for the assistance of users.
User vs Computer Area
The left box displays the player's choice, while the right box displays the computers. This facilitates comparison.
The chosen option displays a humorous picture of the real choice.
Result message Area
The winning decision based on the game's rules is also displayed after each round. It's also beneficial for inexperienced users because they may learn the game's rules while they play.
Win & Lose Modals
When the user or the computer reaches 10 points, there is a popup message saying if the user wins or loses, showing the final scores.
- To store the scores and add a player name, click here.
- To ensure return and new visitors by sharing their high scores or victories on social media.
Rock, paper, scissors, lizard, Spock is a website that aims to explain how pure JavaScript works. The objective is to build a fun, interactive website for individuals of all ages.
Users may play a fun and exciting game of Rock, Paper, Scissors, Lizard, and Spock against the computer, and after each round, they will clearly know who won and got the point. When 10 points are reached, the winner is announced.
- To offer a user-friendly game that is simple to play and comprehend.
- To develop a visually appealing and well-designed game.
- To produce code that complies with best practices.
- To provide clear and concise information about the rules.
- Despite being available to all players, "The Big Bang Theory" fans will love this game because it was inspired by the popular TV program.
- On all platforms, the game is simple to explore and play. The game has simple rules and a clear message. It is entertaining and competitive, and it runs flawlessly. The colours in the game are bright and crisp.
- I want to utilise the website efficiently as a first-time visitor and clearly understand what it is intended to do. I want to play a game naturally, even if the rules are provided.
- As a user, I want the game's design to be elegant and modern. To know who is winning or losing, I need to visualize the game's scores.
- As a returning user, I may have fun playing the game when I'm on the move or in my own time.
The website's detailed design makes the information easily accessible to all visitors. Without having to conduct a thorough search, the information is readily available.
The colour scheme was designed to follow the background gradient colours. The css gradient was created using ColorSpace.
- Rubik Moonrocks: Used for the game title.
- Titillium Web: For the body.
- Caveat: For result message.
The site's images were gathered from free stock photo websites, and the sources are listed in the Credits section. Each photo provided supports the site's theme.
-
Desktop
-
Tablet
-
Mobile
- The website was constantly tested during development using Chrome dev tools.
- Tested all buttons.
- Website tested in Chrome, Firefox, Microsoft Edge, and Brave.
- Lighthouse was used to test the website for Performance, Accessibility, Best Practices and SEO for desktop and mobile:
- HTML
- No errors were returned when passing through the official W3C validator.
- No errors were returned when passing through the official W3C validator.
- CSS
- No errors were found when passing through the official (Jigsaw) validator.
-Javascript - JavaScript was tested using Beautifytools.
- No errors were found when passing through the official (Jigsaw) validator.
- HTML5: Provides the structure and content for the website.
- CSS3: Provides the website styling.
- JavaScript: To create an interactive game that allows users to interact with data.
- Gitpod: to create my Html file, styling sheet, and Javascript before pushing the project to GitHub.
- GitHub: to store my repository for submission.
- Balsamiq Wireframes: to make the wireframes for the website.
- Google Fonts: for the font families, Caveat, Rubik Moonrocks, Titillium Web.
- Am I Responsive?: to ensure the project looked good across all devices.
- Markdown cheat sheet: to complete the Readme.
- Google Chrome DevTools – Used to debug and evaluate the site's responsiveness.
In the GitHub Repository from the project https://github.com/CarmenCantudo/rock-paper-scissors-lizard-spock
- Click the 'Settings' Tab.
- Scroll Down to the Git Hub Pages Heading.
- Select 'Main Branch' as the source.
- The Page will reload 'Settings' again.
- Scroll to GitHub pages heading and there will now be a clickable link https://carmencantudo.github.io/rock-paper-scissors-lizard-spock/
- Click the link for the live deployed page.
- On GitHub, go to CarmenCantudo/rock-paper-scissors-lizard-spock.
- In the top right, click "Fork".
- Go to the main page of the repository.
- Above the file list, click "Code".
- Select HTTPS, SSH, or GitHub CLI and then click copy to clone it.
- Open Git Bash.
- Change the location of your cloned repository.
- Type
git cloneand then paste the URL you copied. - Press “Enter” to create your clone.
- Locate the Repository.
- Click "Code".
- Click Clone or Download.
- Copy the Git URL from the dialogue box.
- Open a terminal window in your choosen directory using your preferred development editor.
- Change the location to where you want the cloned directory to be.
- Type
git clone, and then paste the URL you copied. - Press Enter, and your local clone will be created.
The following images are from Freepick and Pixabay:
- Lizard: Sticker template created by photographeeasia
- Rock: Rocks with grass created by macrovector
- Scissors: Back to school set icons created by stockgiu
- Paper: Wrinkled paper vector created by rawpixel.com
- Spock: Spock created by brenkee
- Game moves: Rock, Paper, Scissors, Lizard, Spock moves
- Favicon: Rock Paper Scissors Icon
Resources used in the process of the Rock, Paper, Scissors, Lizard, Spock game design and build:
- Flexbox: A Complete Guide to Flexbox
- Body background gradient: ColorSpace
- Matrix: How to Code: Rock, Paper, Scissors, Lizard, Spock in JavaScript
- Popup modal: Build a Popup With JavaScript
- Icons taken from: Font Awsome Library
- Help with general questions: StackOverFlow
- Love Maths Code Institute project.