Football Badge Memory Card Game
My project is a memory card game. The idea of the game is to match up all 20 Premier League club badges. When a match has been made the player will be told with a pop up saying it's a match. The game is over when all the badges have been match together.
UX
The website is aimed at any one who likes football or memory card games. The user of this website would be looking to play memory game. The game is a 5 by 8 grid with 40 cards showing, there are 20 pairs to make. The use starts by clicking on a Premier League logo, doing so will flip the card over revealing a club badge. Next the user will click on another Premier League logo and this will flip over revealing another club badge. If the badges are a match then the use will see a pop up saying that they are a match, if not the cards will flip back over. The user will repeat this progress till the board is clear. The game is over when the user has matched up all the club badges.
Balsamiq Wireframes have been added in a separate directory in pdf format. A few changes were made from the original designs.
Features
- Home Page - The first and only page avilable on the website. Everything the user needs to know is on this page. There is no need for other pages.
- Game Description - Game description letting the player know what the game is.
- How To Play - Lets the player know how the game is played
Existing Features
- Memory game - The game has 40 images / 20 pairs of images to match up. The cards flip over when clicked and have a boarder around them so the player knows what they have selected. When a match is made the badges disappear and the player will be notified.
- Pop Up Message - A pop up message appears on the board to let the player know a match has been made. It only appears for one second so it doesn't effect the player.
Features Left to Implement
- Timer - a timer that would count up in seconds to see how long it takes a player to complete the board. Timer would start on submission of the player name and stop when the board is clear.
- Player Name - a input box where the player can input their name. It would link to the leader board.
- Leader Board Table - a leader board to pop up on completion of the game, lets the player see how they compered to other players.
Technologies Used
- HTML and CSS - Two of the main programming languages used to create the website content, layout and styling.
- JavaScript - The third main programming language used. Used to create the memory game.
- Google-Fonts Used for headings and paragraphs, took Lato and Roboto also added some font weights.
- GitHub - Used to host the website repository.
- GitPages - Used to host the live website.
- Balsamiq Used to create the wireframes, the desktop version was used.
- ResizeImage - Used to resize the images for Premier League logo and the club badges.
- Flip-A-Picture - Used to flip the club badges.
- W3Schools - Used in general for ideas.
Testing
- Chrome Developer Tool - Used lots in the design progress of the website to make sure the layout was suitable. Also used to find errors wrong with javascript code when testing the game.
- HTML-Validator - Used to check the HTML code throughout the creation of the project.
- CSS-Validator Used to check the CSS code throughtout the creation of the project.
- JSHint - Used to check Javascript code throughtout the creation of the project.
Testing was done by playing the game. Making sure the correct function were in place and working ie,
- when the player clicked the Premier League logo it flipped over correctly to reveal a badge.
- Masking sure the badge paired up with each other correctly and not mismatch with each other.
- When the player made a match the badges disappeared and the correct message appeared.
- Masking sure the board was random every time the page was loaded up.
During testing the Bootstrap framework caused problems with the layout of the game grid, it made the Premier League logo and the badges not line up. Meaning you could see the badges. This was over some by removing the Bootstrap framework.
During testing the images were mirrored at first due to flipping the cards 180degs. This was solved by flipping over the badges, so they were mirrored already and when flipped in the game they appeared correctly.
Deployment
The project was created on GitPod, so I used GitPages to deploy the website.
To get to the project visit GitHubRepository from there it can be found using the following steps;
-
Click on repositories at the at top of the page.
-
Click on DunnsComicBookShop at the top of repositories page.
-
Click on setting.
-
Scroll down to the section called GitHub Pages.
-
Select the source master branch.
-
Site will then be published at https://ryanlovell89.github.io/Football-Badge-Memory-Game/
-
The repository has also pinned to the top of the overview section, can be accessed from there, then just follow from step 3.
-
The site can also be run locally by creating a clone or download of the repository visit GitHubRepository
-
Click on repositories at the at top of the page.
-
Click on Football-Badge-Memory-Game at the top of repositories page.
-
Click Clone or Download.
You can either open in desktop or use the web url https://github.com/RyanLovell89/Football-Badge-Memory-Game
Credits
Content
The description of the game and rules were written by myself. The images came from different sources and are stated where in the media section.
Media
- The background image for the website take was taken Freepik
- The premier league logo was taken from their wikipedia page Premier-League.
- The club pages were taken from their wikipedia pages;
Acknowledgments
I got the inspiration to create this project myself as I am a big fan of football and enjoy playing games, so I decided to bring them both together.
This website is solely for educational purposes.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent