This project is designed for Formula One fans like myself to provide a simple yet challenging memory game with a user-friendly design. The goal of the project is to create a game that is both fun and challenging for all Formula 1 fans whether they are new to the sport or a hardcore fan, to achieve this the game will shuffle the cards before each game, keep score and have a time limit.

• UX
• Features
• Technologies Used
• Testing
• Deployment
• Credits

I expect that the majority of the users will fall into the following criteria:

• Be a Formula One Fan.
• A user looking for a time-waster.
• A user looking for a challenging memory game.

• As a user, I want the site to be simple to use and visually appealing.
• As a user, I want the cards to be shuffled every time I play it.
• As a user, I want to be able to see how well I am playing the game (Score).
• As a user, I want instructions on how to play the game.
• As a user, I want to have fun!.

Here are the designs I made for the site.

The wireframes were made using Balsamiq

• Font: I wanted to use a single font throughout the site, it needed to look "racey" to fit in with the Formula 1 theme, with this in mind I decided to use Racing Sans One from Google Fonts.

• Colours: I decided to use a Formula 1 photo as my background, because of this I kept a consistent font colour of white (Hex: '#ffffff' RGB: 'rgb(255, 255, 255)') as it stands out the best from the background. The cards needed to be highlighted when you are hovering over them so I chose a to use a linear gradient of these two colours: Hex: '#b2a9e5', RGB: 'rgb(178,169,229)' and Hex: '#2b94e5', RGB: '(43,148,229)'. Lastly, I chose a simple green colour (Hex: '#16A353' RGB:'rgb(22,163,83)') to highlight when two cards were matched.

• Game Instructions: Tells users how to play the game.
• Contact Form: Allows users to contact me directly to report any bugs with the game.
• Success/Failed Messages: Tells users if they successfully contacted me or not.
• Music: 8-bit Formula 1 theme plays when you begin the game.
• Game Timer: When the game starts a timer begins counting down from 100 when it hits zero the game is over.
• Move Counter: Counts how many moves a user makes while playing.
• Scoring System: Users get points for each match they find, the quicker they find a match the more points they will receive.
  • Match in the first 10 seconds (100 to 90 seconds remaining) = 100 Points
  • Match in the next 10 seconds (90 to 80 seconds remaining) = 90 Points
  • Match in the next 10 seconds (80 to 70 seconds remaining) = 80 Points
  • Match in the next 10 seconds (70 to 60 seconds remaining) = 70 Points
  • Match in the next 10 seconds (60 to 50 seconds remaining) = 60 Points
  • Match in the last 50 seconds (50 to 0 seconds remaining) = 50 Points
• High Score Saving: The game will save the users highest score between sessions in local storage.
• Game Over Screen: When the timer hits zero the game over screen will appear allowing the users to try again.
• Victory Screen: When the user has found all 10 matches before the time runs out the Victory screen will appear showing their score and allowing them to play again.
• Screen Size Message: If the user is using a device with a small screen a message will appear letting them know the game will play better in landscape orientation.
• Defense Function: The game will not allow cards to be flipped if there is a card animation taking place.
• Defense Function: The game will not allow a card to be flipped if it is part of a matched pair.
• Defense Function: The game will allow the same card to be flipped back to hidden until a second card has been selected to check for a match.

After gathering feedback on my project I added the following features:

• Music Toggle: Music can be turned on and off as you play.
• Car Names: The car manufacturer names will appear under the image of each card, makes the game more user friendly towards users unfamiliar with Formula 1.
• Hard Mode: This will remove the car manufacturer names from the cards, for the users who are familiar with Formula 1.

• Global leaderboard based on game scores.
• Global leaderboard based on how fast users beat the game.
• Different game modes such as classic F1 cars and F1 tracks.

• HTML5

  • The project uses HTML5 to provide the content and structure.

• CSS3

  • The project uses CSS3 for styling.

• Google Fonts

  • The project uses Google Fonts to provide the font used on the site.

• jQuery

  • The project uses jQuery for game functions.

• JavaScript

  • The project uses JavaScript for game functions.

• EmailJS

  • The project uses EmailJS to send emails based on provided contact information.

• VSCode

  • The project developed in Visual Studio Code.

• Git

  • The project uses Git for version control.

• GitHub

  • The project uses GitHub to host the repository and for the live preview of the site.

• Firefox Developer Tools
  • The project used Firefox Developer Tools to test responsiveness, styles, and different layouts throughout development. This also allowed the site to be tested on several other mobile devices.

• Samsung Note 10+

  • The project used a Samsung Note 10+ to test the site on a mobile device.

• HP Envy x360 13

  • The project used an HP Envy x360 13 to test the site on both a 13-inch laptop and a tablet.

• Samsung Galaxy S9/S9+

• iPhone 6/7/8

• iPhone X

• iPad

I used the following web browsers on both desktop (Windows) and mobile (Android) where available.

• Mozilla Firefox

  • Desktop Version: 76.0.1 Mobile Version: 75.0.0-beta.6

• Google Chrome

  • Desktop Version: 81.0.4044.138 Mobile Version: 81.0.4044.138

• Opera

  • Desktop Version: 68.0.3618.99

• Microsoft Edge

  • Desktop Version: 44.18362.449.0

The project was run through both HTML Validation and CSS Validation with no errors found.

I had originally planned to test my project with Jasmine testing, but with the way my project ended up it would require me to write extra code just to be able to test functions. With that in mind, I did manual testing which can be seen here

HTML and CSS tests carried out have been documented and visualised here

1. Site is simple and visually appealing:

   • The feedback I have received so far indicates that this is true.

2. Cards are shuffled every game:

   1. Click on "Click to Start", cards are shuffled.
   2. Beat the game.
   3. Click on "Restart", cards are shuffled.

3. Game is Scored:

   1. Click on "Click to Start".
   2. Get a match in the game, Score increases.

4. Instructions on how to play the game:

   1. Click on "How to Play"
   2. View instructions.

• Background image repeated vertically on mobile devices, fixed by adding further styling options to the body.
• While testing on browsers other than Firefox which was used during site development, I released that the high score wasn't being saved, this issue was fixed by adding localStorage.setItem to my setHighScore() function.
• If the game was being played for the first time the "High Score:" would display undefined until it was set when you beat the game, this issue was fixed by adding an if statement inside the document ready function.

To deploy this page to GitHub Pages from its GitHub repository, the following steps were taken:

1. From the menu items near the top of the page, select Settings.
2. Scroll down to the GitHub Pages section.
3. Under Source click the drop-down menu labelled None and select Master Branch
4. On selecting Master Branch the page is automatically refreshed, the website is now deployed.
5. Scroll back down to the GitHub Pages section to retrieve the link to the deployed website.

To clone this project from GitHub:

1. Under the repository name, click "Clone or download".
2. In the Clone with HTTPs section, copy the clone URL for the repository.
3. Open your IDE of choice.
4. Change the current working directory to the location where you want the cloned directory to be made.
5. Type `git clone`, and then paste the URL you copied in Step 3.

git clone https://github.com/filleben/F1MemoryGame

6. Press Enter. Your local clone will be created.

Further reading and troubleshooting on cloning a repository from GitHub can be found here.

• I achieved base game functionality by following this tutorial by PortEXE
• I got my scoring working by using code from Stack Overflow
• The game uses the Fisher-Yates shuffle to shuffle the cards.
• I styled the background site image using code from CSS Tricks

• The Formula 1 Logo was taken from the Formula 1 Official Site.
• The background image used was taken from the Formula 1 Official Site.
• The Formula 1 car images are taken from the Formula 1 Official Site.
• The background music was made by victoresto99.

• I received inspiration for this project from WebDevSimplified and their Mix-Or-Match project.
• Gerard McBride for helping me through the project with his advice and guidance.