This is a fun, interactive, online game that gives players the chance to play against the computer in a non-traditional twist on the game of rock, paper, scissors.
- As a visiting user, I want to play the game against the computer.
- As a visiting user, I want the game controls to be easy to understand.
- As a visiting user, I want to keep score of each win.
- As a visiting user, I want to have instructions of which play beats which.
- As a visiting user, I want to be able to reset the scores and start again.
- As a returning user, I want to be able to navigate the game easily and play repeatedly without issue.
The title is in a vibrant red which draws the users attention. It is also in the font Federant to inkeep with the theme of the game space.
The game is first to score 5 points wins the round. The round counter keeps track of how many rounds the user has won.
The game area displays the players choice and the hosts choice clearly in text and with a symbol to ensure ease of play. All sections have a different colour font to emphasise the different features of the game.
There are 5 buttons for the player to make their choice with. Each button has the text and a symbol representing what they stand for. The buttons are brightly coloured to draw attention and the text is black to ensure plenty of contrast to make it easily legible.
The results area displays either 'Better Luck Next Time.' or 'You Win!' depending on the outcome of the game. This means players are not having to constantly check the rules to see who has won if they are not familiar with the rules before playing.
There is a scoreboard at the bottom of the game area so the player can keep track of their wins and losses.
At the bottom of the game area I have included a reset button so players can reset the score and start again without having to refresh the page.
This section contains an image explaining how the symbols interact with eachother. The background color and title help the page flow from the game section to the how to play section.
The footer contains links to all the social media related to the page and also contains a copyright mark.
- Multiplayer: The ability to play with another person (online or using the same device) instead of always playing the computer.
- Different difficulty levels: Easy (original rock, paper, scissors), Medium (Current game), Hard (add more icons and rules).
The fonts I chose are Federant and Merriweather. Federant is very similar to the Star Trek font which keeps the game on theme due to the addition of the Spock element. I also chose the color scheme based on a color palette created from Star Trek main colors. These colors are vibrant and eyecatching to grab the attention of the user.
- HTML5
- CSS
- Javascript
- Github repository where I pushed all my code using Git in the terminal of my workspace
- CodeAnywhere workspace where I wrote the code, previewed the website and used the terminal to commit and push all code to the repository on Gibhub
- Balsamiq Wireframes to design the layout of the page and what it would look like of different screen sizes
- Google Fonts to import 'Federant' and 'Merriweather' fonts to the style.css file
- Font Awesome to add icon to reset button
- Emojipedia for the rock, paper, scissors, lizard and spock symbols
- Chrome Development Tools to make design changes while viewing the page in chrome in different screen sizes
| ID | Test Subject | Steps Taken | Outcome Generater |
|---|---|---|---|
| 01 | Header | Go to website and check appearance of title, click how to play link | Title is legible and positioned appropriately, how to play link brings me to the how to play section of the page |
| 02 | Background image and overlay | Check appearance of background and overlay | Image covers full background of the chosen size of the game area. The overlay is working to make the text legible. Both have been positioned appropriately |
| 03 | Display of choices | Check appearance of section that displays the choices of the player and the host | Text is legible and positioned appropriately. Both are currently empty as no selections have been made |
| 04 | Results Section | Check appearance of results section | Text is legible and positioned appropriately. It is currently empty as no selections have been made to produce a result |
| 05 | Buttons Section | Check appearance of buttons | Buttons are lgible and positioned appropriately |
| 06 | Rock Button | Click button | 'Rock' and rock symbol are displayed in the 'You' section. Host has generated a random choice. Result is displayed appropriate message. Scores are incremented appropriately |
| 07 | Paper Button | Click button | 'Paper' and paper symbol are displayed in the 'You' section. Host has generated a random choice. Result is displayed appropriate message. Scores are incremented appropriately |
| 08 | Scissors Button | Click button | 'Scissors' and scissors symbol are displayed in the 'You' section. Host has generated a random choice. Result is displayed appropriate message. Scores are incremented appropriately |
| 09 | Lizard Section | Click button | 'Lizard' and lizard symbol are displayed in the 'You' section. Host has generated a random choice. Result is displayed appropriate message. Scores are incremented appropriately |
| 10 | Spock Button | Click button | 'Spock' and spock symbol are displayed in the 'You' section. Host has generated a random choice. Result is displayed appropriate message. Scores are incremented appropriately |
| 11 | Scores section | Check appearance | Scores are legible and positioned appropriatelely. Scores increment correctly after each play |
| 12 | Reset Button | Check appearance of button, click button | Button is clearly legible and positioned appropriately. Confirm message appears. Score is not reset |
| 13 | Confirm Reset | Click Ok | Score is now reset. Rounds counter also resets |
| 14 | Complete Round | Play until one of the scores reach 5 | Pop Up message appears |
| 15 | Player Wins | Play until You score reaches 5 | Pop up message appears telling player they beat the host. |
| 16 | Pop Up | Click ok on pop up message | Scores reset and the Rounds counter increments properly |
| 17 | Rounds Won | Check appearance of Rounds Won Counter | Counter is positioned appropriately and increments correctly |
| 18 | Host Wins | Play until Host score reaches 5 | Pop up message appears telling player they were beaten by the host. Rounds won counter does not change |
| 19 | Pop Up | Click ok on pop up message | Scores reset and Rounds counter does not increment |
| 21 | How to Play | Check appearance | Image is cearly legible and positioned appropriately |
| 21 | Footer | Check appearance of social media links and copyright, click each social media link | Each link open the social nedia website in a new tab, all icons and copyright are positioned appropriately |
- Background image was too bold and made it hard to read the text. I added an overlay to dull the image and make the text more legible.
- Made the buttons bigger to make the writing legible and the symbol more visible.
- Acer Nitro desktop (1920 x 1080}
- Surface Pro 7 (912 x 1368)
- iPad (768 x 1024)
- iPhone 12 pro (390 x 844)
- Galaxy Fold (280 x 653)
- Google Chrome Version 116.0.5845.188 (Official Build) (64-bit)
- Microsoft Edge Version 117.0.2045.31 (Official build) (64-bit)
- Log into Codeanywhere.
- Go to workspace that was created for the project using link copied from Github.
- Open workspace and go to terminal at bottom of page.
- Type 'python3 -m http.server' to open a preview of browser.
- A box will pop up in the bottom right corner of the screen when you can click to open the browser.
- This will open in a new tab.
- Go to setting in the Github repository
- Find 'Pages' in the list on the left side of the page
- Under the section 'Source', choose 'Deploy from Branch'
- Under 'Branch', choose 'Main' and then save
- The link to the website will appear at the top of this page once it is ready. It may take a couple of minutes.
- Color Palette - View Original here
- Game Background Image - View Image here
- Emoji Icons - here
- Game Setup based on youtube video here
- Google Fonts
- Font Awesome
A thank you to my mentor Rohit for all his valuable advice and feedback throughout this project.