Welcome to my second project. This project is a Rock, Paper, Scissors, Lizard, Spock game that involves programming languages like HTML5, CSS3 and JavaScript. This game will demonstrate basic JavaScript functionality.

A live website can be found here.

• 1. UX
  • 1.1. Strategy
    • Project Goals
      • User Goals:
      • User Expectations:
      • Trends of Modern Websites
      • Strategy Table
  • 1.2. Structure
  • 1.3. Skeleton
  • 1.4. Surface
• 2. Features
• 3. Technologies Used
• 4. Testing
• 5. Development Cycle
• 6. Deployment
• 7. End Product
• 8. Known Bugs
• 9. Credits

Go to the top

Everybody knows the basic Rock, Paper, Scissors game, but not everyone knows about the Rock, Paper, Scissors, Lizard, Spock game which originated from the TV show, Big Bang Theory. This game adds 2 extra weapons, Lizard and Spock. This changes the who dynamic of the game giving the player/s more variety to win.

Go to the top

The main goal of this game is to create a fun entertaining game that is interactive to the user and to display the basic use of JavaScript functions. I want the player to be engaged with the game.

First Time Visitor Goals

• As a first-time visitor, I want to be engaged with the concept of the game.
• As a first-time visitor, I want to be able to easily understand the rules of the game.
• As a first-time visitor, I want to play the game to win.

Returning Visitor Goals

• As a Returning Visitor, I want to beat the computer.
• As a Returning Visitor, I want to find the best way to get in contact with the organization with any questions I may have.

Frequent User Goals

• As a Frequent User, I want to check to see if there are any newly animations to the weapons.

The game should be engaging and display a winner and loser.

• The weapon selection is clear.
• The user interface is easy to navigate.
• The game is responsive on all devices including mobile, tablet and desktop.
• To have the ability to contact the creator of the game.

• Mobile gaming (gaming on the go)
• Nostalgia gaming with remastered games
• Virtual reality

As I am unable to include all of the features from the strategy table. I will phase this project in multiple phases. Phase 1 will be what I have identified as a minimum viable product. Please find below the plans I have for each phase.

• Engaging game play
• Score tracking system
• The ability to play against the computer
• Responsive design
• Contact form
• Rules popup modal
• Introduction popup modal

• Caption for the winning weapon
• Dark mode

Go to the top

It is really important to include responsive design in this project as many users are using different devices (mobile, tablet, laptop/PC). This gives the user the best experience on their device.

• Responsive on all device sizes
• Easy navigation through labelled buttons
• Footer at the bottom of the index page that links to the social media website.
• All elements will be consistent including font size, font family, colour scheme.

Go to the top

I used Balsamiq to create my wireframes as this gives the template of the UI. This also shows where all elements will be placed within the screen.

There are 2 versions of each wireframe as one shows the design on a web browser and the other shows a mobile browser format.

Web browser index page:

Mobile index page:

Web browser introduction modal:

Mobile introduction modal:

Web browser rules modal:

Mobile rules modal:

Web browser contact modal:

Mobile contact modal:

Web browser start game:

Mobile start game:

Web browser player win:

Mobile player win:

Web browser player lost:

Mobile player lost:

Web browser player tie:

Mobile player tie:

Go to the top

Please find the colours schemes that I used here.

I decided to use Benne as my font of choice with sans serif as my backup font for browsers that might not support Benne.

Go to the top

• Title and logo are placed at the top of the page.
• Animated background - to give more of a user experience instead of a plain background.

• Introduction button - This button opens up a popup modal. This modal gives an introduction to where the game was initially created. There is also an embedded video of the scene at which the game was created.

• Rules button - This button opens up a popup modal. This modal explains all the rules for the game. Listing the winning possibilities of each weapon. There is also a diagram to show the winning outcomes.

• Start game button - This button will allow the user to navigate to the game page.

• Contact button - This button opens up a popup modal. In this modal, the user can fill out a contact form to contact the owner of the website/game.

• Footer - The footer is placed at the bottom of this page. This contains all social media links that open up in a new tab. When hovering over each icon, the icon magnifies.

• Results - The results section of the page shows the user the outcome of the round.

• Scoreboard - The scoreboard shows the current score between user and computer. When the player/CPU wins the player or CPU badge will turn green, this indicates that the player/CPU has won the round. When the player/CPU loses the player or CPU badge will turn red, this indicates that the player/CPU has lost the round. The badges will turn yellow if the round is a tie.

• Select your weapon - This section allows the player to select their desired weapon. There are 5 icons rock, paper, scissors, lizard, spock. When hovering over each weapon the icon background changes colour to give the user confirmation before selecting the weapon. The icon colours are also in the order of the Olympic rings.

• Player/Computer choices - This section shows the selection of weapons made by the player and the generated weapon selection for the computer. This uses the same icons as the initial weapon selection part.

• Main menu button - This button will take the user back to the index page.

• Winning GIF - If the user has won 3 rounds, the game ends with a winner's GIF. At this point, this removes all the weapon icons and results and left with a new game button, scoreboard and main menu button. This forces the user to restart the game.

• Losing GIF - If the computer has beaten the user to 3 rounds, the game ends with a loser's GIF. At this point, this removes all the weapon icons and results and left with a new game button, scoreboard and main menu button. This forces the user to restart the game.

Go to the top

• HTML5
  • The project uses HyperText Markup Language.
• CSS3
  • The project uses Cascading Style Sheets.
• JavaScript
  • The project uses JavaScript.
• Visual Studio Code
  • The project uses Visual Studio Code.
• Chrome
  • The project uses Chrome to debug and test the source code using HTML5.
• Balsamiq
  • Balsamiq was used to create the wireframes during the design process.
• Google Fonts
  • Google fonts were used to import the "Benne" font into the style.css file which is used on all pages throughout the project.
• GitHub
  • GitHub was used to store the project's code after being pushed from Git.
• JS Fiddle
  • JS Fiddle was used as a playground to test all my code before committing.

Go to the top

For every element that I added to my HTML, I would add the basic CSS to my stylesheet. I would then use the inspect element to try different styles. Once I've got it to my liking I would copy the CSS from google into my stylesheet. This allows me to keep track of the code I am using.

I also added basic functions for my JavaScript that were empty so i could map out the logic of the game.

For every element that I added to my HTML, I would add the basic CSS to my stylesheet. I would then use the inspect element to try different styles. Once I've got it to my liking I would copy the CSS from google into my stylesheet. This allows me to keep track of the code I am using.

For all JavaScript functions, i console logged each function to make sure that the output was correct.

I checked the accessibility of the page using lighthouse.

I used Am I Responsive to make sure that all my pages are responsive to all devices.

I used W3C Markup to check for any errors within my HTML pages. I had no errors in the index and start_game page.

I used W3C CSS Validation to check for any errors within my CSS stylesheet. I had no errors in my CSS file.

I used JS Hint to check for any errors within my JavaScript file. I had no errors in my JavaScript files.

I have tested my site on Safari and google chrome on multiple devices. I also used JS Fiddle as a playground to test all of my code before staging and committing any changes.

These include:

• iPhone X
• iPhone XS Max
• iPad Pro
• Macbook Pro

Please find below my testing process for all pages via mobile and web:

• Animated background - I tested this on Chrome and Safari on all devices.

  • Text:

    • I checked that all text is in the correct and consistent size and font. I also checked that there were no typos.

  • Media:

    • I checked that all images and videos on this page-load. Making sure that the video is played and that all images have alt text if media does not load. It worked as expected.

  • Responsiveness:

    • I checked that all pages and elements were responsive. Checking each page on mobile and website and adjusting screen size to find breakpoints. It worked as expected.

• Game Menu Buttons

  • Introduction button - When selecting the "introduction" button, a popup modal appears with a short summary of the game with an embedded video. This worked as expected.
  • Rules button - When selecting the "rules" button, a popup modal appears with rules of the game and a diagram showing the winning outcomes. This worked as expected.
  • Start game button - When selecting the "start game" button, the browser redirects to the game page. This worked as expected.
  • Contact button - when selecting the "contact" button, a popup modal appears with a contact form. This worked as expected.

• Footer

  • Facebook - When selecting the Facebook icon, a new tab opens and redirects to the Facebook website. It worked as expected.
  • Twitter - When selecting the Twitter icon, a new tab opens and redirects to the Twitter website. It worked as expected.
  • YouTube - When selecting the YouTube icon, a new tab opens and redirects to the YouTube website. It worked as expected.
  • Instagram - When selecting the Instagram icon, a new tab opens and redirects to the Instagram website. It worked as expected.

• Results - I checked that the result output is displaying the correct caption for the winning / losing outcomes.

• Scoreboard - I checked that the score board increments the correct score for player and computer.

• Select your weapon - I checked that the icons are all the same size and display the correct colours when hovering over them.

• Player/Computer choices - I checked that the player button selected appears in the user choice and that the generated computer choice is displaying correctly.

• Main menu button - When selecting the "main menu" button, the browser redirects to the index page.

• Winning GIF - I checked that the winning GIF is displaying correcting on all devices, ensuring that the GIF is responsive.

• Losing GIF - I checked that the losing GIF is displaying correcting on all devices, ensuring that the GIF is responsive.

Go to the top

There were some elements I changed, re-positioned and added from my original wireframes as they were more visually appealing.

• I didn't change anything on the landing page. All elements were exactly how I imagined from the initial wireframe.

• From the original start game wireframe, there wasn't a results section to caption the winning outcomes. I added this in so the user knows exactly the outcome of the round.
• Added player and CPU labels to the scoreboard.
• Added the Olympic rings logo to this page so the weapons colours can correspond to the colours.
• The player and computer choice circles were removed to save space, I decided to show display them under the player/computer choice headings.
• The scoreboard labels change colour depending on the outcome of the round instead of the player/computer selection circle.
• Added game winning/losing GIFs.

Go to the top

I used the terminal to deploy my project locally. To do this I had to:

1. Create a repository on GitHub.
2. Clone the repository on your chosen source code editor (Visual Studio Code in my case) using the clone link.
3. Open the terminal within Visual Studio Code.
4. Enter "python3 -m http.server" into the terminal.
5. Go to "http://[::]:8000/" on my web browser.
6. All locally saved changes will show up here.

I used GitHub pages to deploy my final project to the cloud. To do this I had to:

1. Create a repository on GitHub.
2. Clone the repository on your chosen source code editor (Visual Studio Code in my case) using the clone link.
3. Add files to Git (staging area) and use the Visual Studio Code to commit changes.
4. Use the terminal within Visual Studio Code to push the code.
5. Go to GitHub and load your repository.
6. Select settings.
7. Select pages on the left menu bar.
8. Click on the master branch.
9. This will now generate a link with your website live.

Go to the top

Please fine below a screenshot of each page:

Home page web UI:

Home page mobile UI:

Start game page web UI:

Start game page mobile UI:

Mid game page web UI:

Mid game page mobile UI:

Winning page web:

Winning page mobile:

Losing page web:

Losing page mobile:

Go to the top

• The close "x" button on the popup modals for the index page is not centred. This was rectified by adding padding to the top of the close button.

• The player/CPU labels on the scoreboard for the game page is not vertically aligned. This was rectified by adding padding to the bottom.

• The placeholder text for the contact form popup modal is too close to the left and top side edge, making the characters of the input text hard to read. The was rectified by adding padding to the left side and padding to the top for the message input.

Go to the top

• The popup modals come from JS Fiddle
• The background animation came from Code Pen

• All images came from Google Images
• All weapon icons came from Font Awesome
• The winner and loser GIFs came from GIPHY
• The game rules came from Big Bang Theory Wiki