• Ultimate RPS is a fun game of Rock, Paper, Scissors which enhances the player's experience with the inclusion of unlockable upgrades. Upgrades include exciting new background colours and added choices of options Lizard and Spock! Play against the computer with increasing levels of difficulty and try to win in as few turns as possible.

Link to the live project (right click to open in new tab)

Link to the project repository (right click to open in new tab)

• Strategy
  • Target Audience
  • User Stories
• Scope
  • Research
  • Future Features
  • Testing
• Structure
  • Wireframes
  • Information Architecture
• Skeleton
  • Current Features
  • Technologies Used
• Surface
  • Design
  • Deployment
• Credits
  • Content
  • Media
  • Acknowledgemnets

• The game is targeted towards children -> young adults, new to computer-gaming -> more experienced players. The site will primarily be used for entertainment purposes but can also be used by those who would like to learn the rules of the classic game of Rock, Paper, Scissors or the updated version of Rock, Paper, Scissors, Lizard, Spock.

These are younger users who perhaps are new to playing computer games but are looking for something fun and engaging.

• As a child, I would like a simple but exciting layout and intuitive design.
• As a child, I wouldn't want to see too many long paragraphs or complicated instructions.
• As a child, I would like to receive positive feedback for progressing through the game and improving my skills.

These are users who are likely to have some experience using internet browsers and playing comuter games.

• As a young-adult, I would like the chance to customise my game to suit my unique style.
• As a young-adult, I would like familiar concepts and lay out so that I can easily navigate the site.
• As a young-adult, I would like a goal to work towards so that I can beat the game.

• Before any planning, I conducted research into other similar games and took note of the rules and format, as well as which features I thought enhanced the player's experience and would be good to include for my target audiences.

• I'd like to include audio feedback of the result of each battle. Positive sounds for a win and negative sounds for loss. This would aid in communication the outcome of the battle to the player and would be especially useful to visually impaired players in particular. A toggle to turn audio on and off would be included in the settings menu.

• Another upgrade which could be included would be swapping out the Font Awesome icons for photos/realistic images or other art-styles such as pixelated/retro.

• I'd like to include online-play so that people from around the world can compete with each other 1 vs 1 matches or in knock-out tournaments. This would keep things interesting for the player and improve the replayability.
• A local multiplayer option would be another desirable option. Players could use letter keys to select their weapon (e.g. a, s & d for player 1 and j, k & l for player 2).

• I'd like to add up to 10 levels and more upgrades to choose from so that the player can play for longer and has more choice of customisation.

• Throughout the project, I relied heavily on Chrome Devtools to help me view this project on different screen sizes so that I could adjust elements, create media queries for responsive design and debug JavaScript by logging outcomes to the console.
• Please follow this link for full list of tests carried out on this website

• After looking at common designs and features and deciding what I would like to include, I mapped out the intended features of the website using Balsamiq to create wireframes of each page view.
• View the wireframes here
• The key differences between planning and the final product are presentation of the settings menu & game rules. Originally I had planned to display these through an extending footer which would slide up from the bottom when one of the links were clicked and shrunk back down once no longer in use. This developed into a message band that slides from top to bottom instead.

• Ultimate RPs is a single-page website which relies on JavaScript to manipulate the DOM and display different areas of the site in pop-up messages.
• The useful information is presented in an animated message container that slides in from the top of the screen and slides out through the bottom of the screen once the user has read the displayed information and interacted with the appropriate buttons.
• The main game area is permanently displayed in the centre of the screen, tucked behind any displayed messages until the user is ready to resume playing. There are only 3 to 5 buttons to interact with but these manipulate various sections of the screen to display the user's choice, computer's choice, the outcome of the game and the amount of wins, losses and draws the user has achieved throughout their session.
• Once a player reaches the next level by incrementing the progress bar to fill the container, a message is displayed via the sliding message container letting the player know that they have leveled-up and offers them 3 upgrades to choose from. Once the player has chosen, the message slides out and the upgrade is applied.
• In the top right of the page is 2 buttons which call the settings menu where a player can enable and disable their unlocked upgrades, or the rules on how to play the game. Both icons temporarily disappear when a message is displayed to avoid overlapping messages.

• Contains the site logo and navigation buttons

• Large and central, the logo features bright and bold colours with text shadow providing a 3D-effect to make it stand out.

• The navigation menu appears in top right on desktop with the icons splitting and appearing in each top corner on mobile to make selection easier on smaller screens.
• A gear icon leads to the settings and a book has been used to represent a rulebook which brings up the game rules/hot to play.

• The main game area; contains boxes to display the user's and computer's choices of weapon, a weapon selection area with 3 to 5 buttons (depending on game mode) and a scoreboard area to communicate the outcome and scores.

• Both blank to start with but later contain large icons representing the weapon choices once a game has been played. On desktop, both appear side-by-side to fill the landscape aspect of the screen, placed one on top of the other on mobile to fit into the the smaller portrait aspect.
• Whilst the player is selecting their choice, a preview is displayed in a pale grey colour so that the user can see what they will be selecting. Once the player has chosen, the icon is displayed in a darker grey along with the computer choice in the other box to indicate that the battle has played-out.

• 3 weapon choices displayed inline (Rock, Paper & Scissors). These buttons are where the player selects their weapon to battle with. This is then shown in the display box.
• After upgrading, the player has the option to add fourth and fifth options of Lizard and Spock to offer more possibilities of battle outcomes. These extra buttons can then be removed again if the player so chooses.

• The scoreboard area is made up of the outcome display, progress bar and scores display stacked atop each other.
• The progress is incrememented after each battle to either increase with a win, decrease with a loss or stay the same with a draw. Once the bar fills up, the player reaches the next level and unlock an upgrade. The bar is used to make it easy for the user to track their progress towards the next upgrade. The requirement to fill the bar gets more difficult with each level.
• 3 scores are displayed below: Wins, Losses and Draws. The current level is also tracked and displayed. The goal of the game is to beat the computer in as many turns as possibly so these scores can help the player track their progress and their ratio of successes and fails.

• Sliding in from the top of the screen when called, the message container can host 5 different messages. Some message can only be removed by selecting one of the button options whilst others can be removed with an exit icon in the top right. Slides out at the bottom of the screen when dismissed.
• Sizing differences between mobile and desktop but otherwise largely unchanged.
• The game buttons and navigation icons are disabled when a message is being displayed to avoid the game playing-out when not intended.

• Welcomes the player to the game and gives them the opportunity to check the rules and settings before beginning the game. Or they can jump straight in with the Begin! button. Slides out when

• Can be called from the welcome message before the player begins the game if they have not played before. Can also be called by clicking the gear icon in the top right of the screen once the game has begun if a player needs some more help later on.
• Includes a brief paragraph with a description of the game and it's mechanics and an unordered list with details the outcome of each battle combination. The user can refer to this if they are unsure which weapon wins in a battle or if they are confused why a certain weapon would beat another.

• This is where the user can toggle their unlocked upgrades on and off and choose between available background themes.
• The player may choose to swap out a background if they find it harder to view the content on certain colours/patterns so it was important to include an pportunity for them to do so.
• The addiditon of the Lizard & Spock buttons can make the game significantly more difficult so an option to remove them has been provided for players who do not wish to use them.
• buttons are disabled and greyed out

• Appears when the player has beaten the computer enough times to fill the progress bar and reach the next level. Provides the player with 3 (or less) random locked upgrades to choose from and is dismissed once one has been chosen. The ability to select an upgrade between levels is a way of rewarding the player for player and progressing and provide them with some customisation options.
• If there are less than 3 locked upgrades, any remaining buttons are disabled and display a message to say that no more upgrades are available to unlock.

• Once the player has completed the game and beat all 5 levels, one final message is displayed to congratulate them and ask if they would like to restart and try to beat their score. This message can only be removed by clicking restart.
• The total number of turns it took for the player to complete the game is repoorted back to them so they have a goal to beat next time they play.

• Different backgrounds are unlocked by playing the game and progressing through the levels. These are applied when unlocked and can be changed again in the settings menu if the player so chooses.

• This is the standard background and features a subtle gradient from mint grenn to pale blue. It is a soft background and harmonises well with the other colours used on the site.

• Very similar to the blue theme, the pink theme is a subtle gradient of pale pink to a darker pink.

• This is the boldest background of the game. I suspect that it will be the most popular amongst players as it adds an extra layer of excitement to the game. A transparent white backing is added to the scoreboard so that the text can be more easily read against the busy background.

• The dark theme will be good for those who are playing in a dark room and find the lighter colours too much for their eyes. It also ups the contrast between elements if the player is having trouble viewing the screen in very bright light. The text on the screen is changed from grey to white to provide sufficient contrast. The gradient is similar to that of the blue and pink themes.

• A custom 404 page has been added for broken links and navigation back to the main page

• HTML
• CSS
• Git for version control
• JavaScript

• Gitpod to alter and manage website files
• Github to create and store website files
• Github Pages to deploy site
• Chrome Devtools to test site throughout process
• Balsamiq to create wireframes
• Coolors to choose a colour scheme
• CSS Gradient to help with CSS gradients for website backgrounds
• Google Fonts for the website font (Cabin)
• Font Awesome used to add icons
• Favicon.io used to create favicon
• Code Institute fullstack developer course to learn how to create
• W3Schools for help with common coding issues
• Am I Responsive? for device simulations

• The colour-scheme is vibrant but soft to provide a pleasing display without distracting from the game-play.
• For the upgrades, bolder colours and patterns were chosen to improve player customisation and feeling of reward and excitement.
• I used Coolors to help pick a colour scheme and CSS Gradient to help with coding the CSS gradients.
• There is a 135 degree angled gradient across all backgrounds ranging from more subtle to very striking.
• For the standard displa, the base colours are pale blue, mint green and a warm off-white with mustard and lime green acting as highlights.

• There are currently no images used in this site.

• All text is in the Cabin font. It is a humanist sans which is clear and easily read at both larger and smaller font sizes. It’s classic-yet-modern style pairs well with the softer colours and rounded edges of the website.
• Sans serif has been used as the fallback option since it is the closest web-safe font.

• Font Awesome icons were used for navigation buttons as well as for the main game display.

• This site was deployed on Github Pages, following the below steps:
  1. Acces the Github repository here
  2. Navigate to the Settings tab (far right tab)
  3. Open the Pages information
  4. Select branch main
  5. Wait for site to deploy (this make take a few minutes)
• Access the live site here

• Websites used for initial research:
• Issue with trying to display the chosen weapon icon by using code to map the index in an array solved with code from Borislav Hadzhiev
• CSS Code for colourful 3D heading from [Mandy Michael](code for 3D effect from https://codepen.io/mandymichael/pen/VprZaq)
• Code for preloading and preconnecting links suggested by Chrome Devtools Lighthouse feature
• 3D buttons inspired by Arron Hunt but heavily edited by myself to suit my design

• All icons from Font Awesome
• All CSS gradients achieved with CSS Gradient

• Code Institute for providing excellent learning content and project idea
• Reuben Ferrante as my mentor and providing vital feedback throughout the project's development
• W3Schools for quick and easy guidance on HTML and CSS
• The users of Stack Overflow for asking and answering some of the harder JavaScript questions
• Other CI students for sharing their work and providing inspiration and guidance

Becky Skelcher 2022