Can you see where the assassins are?
A game to train your memory and have fun while doing it.
The goal for this project is to train the user's memory, using images from the well known game franchise Assassin's Creed to create a more fun experience for the user. But also to make it a little harder, because multiple detailed pictures are a lot harder to remember than standard icons.
- Find out how good your memory is.
- Have fun with nostalgia. if you have played the games that is.
- Improving your memory by trying to beat your own score.
- As a user, I want a well organised site that looks attractive.
- As a user, I want a site that loads properly and doesn't crash.
- As a user, I want to improve my score and time. So i can see the result the game has had on my memory.
- As a site owner I want to help my users improve their memory by trying to beat their own score.
- Have an intuitive layout that is easy to use.
- Recognizable images from the main characters of the Assassin's Creed games.
- Having a clear target to improve on. (replay value)
- Game is easy to use and gives no errors.
- Content is appealing
- Game is a challenge, but not extremely difficult.
When thinking about how to design the game, I didn't want to make something to difficult that doesn't have to be difficult. Eventually I found this tutorial and used it as the base for my game.
Later on in the project I found this tutorial. There were similar design choices as in the first one I found. But it gave me some good ideas to expand on.
- The main font used across the game is Oswald.
- The fond used for the play again button on the congratulations modal is Gloria Hallelujah.
- for the title of the game I used a custom font called assassin. This font is used for the title of the Assassin's creed games. So it fits very well.
Icons used were provided by Font Awesome, used in moderation and are self-explanatory.
Color choices are based on colors that are used a lot in the Assassin's Creed games.
- Black #000000
- Gold #D4AF37
- Red #880808
- White #FFFFFF
- Blue #023ee4
To make my wireframes I used balsamiq.
You can find my wireframes here.
Direct link to wireframes:
Features that have been implemented:
- A challenging memory game.
- Ranking system that you can improve on.
- Images that fit the subject of the game to make it more appealing.
Features that have NOT been implemented:
- Reset button in score board. Which is visible in the wireframes. There just wasn't enough time to get that future working after all the mayor changes that already had taken place.
Explanation: Due to time constraints i did not get the chance to implement this feature.
Features that will be implemented in the future:
- Reset button in the score board, for faster restarting.
- Better score system, possibly online against other people.
- More picture combinations then just the main assassins from the game.
- Social media pages to interact with the community.
-
User story to be tested:
-
As a user, I want a well organised site that looks attractive.
- Tested layout and functionality on all screensizes and everything looks great and works as expected.
-
-
User story to be tested:
-
As a user, I want a site that loads properly and doesn't crash.
- Tested loading of the site and loads as expected and does not crash at any point.
-
-
User story to be tested:
-
As a user, I want to improve my score and time. So i can see the result the game has had on my memory.
- Tested the score system and timer. Works as expected and can be improved upon by the user.
-
- I had one friend test my game. And all the feedback was according to the user goals and stories I have written.
- As the responsiveness did not work as intended at first, I decided to proceed with a mobile first approach in mind and adjusted the CSS according to the most common screen sizes.
- Everything looks according to the design also used by Ubisoft for the Assassin's creed franchise.
-
Error: The element a must not appear as a descendant of the button element.
-
Description: There were no noticeable issues with this issue but after running it true the HTML validator this error came up.
-
Fixed: by deleting all a elements out of the button elements.
-
Error: (Value Error: visibility show is not a visibility value.)
-
Description: It did not bring forward any issues but in the .startoverlay class in CSS, the visibility value was set to show which is not a correct value for visibility.
-
Fixed: by changing show to visible.
-
Error: ( HTML, body Parse Error ??)
-
Description: Unnecessary use of class naming. Everything worked as intended after the fix was applied.
-
Fixed: by deleting the HTML, body class and adding the values in it to the body class.
-
Warnings: Undefined variables and missing semicolons
-
Description: Issues such as missing semicolon and undefined variables came up when checking code with JS hint.
-
Fixed: by adding semicolons in the right places and giving the undefined variables
-
Error: (function playAgain() {overlay.classList.remove("show");location.reload(true);})
-
Description: When checking code with JS hint an error concerning this piece of code came up. The word reload was crossed out came up. After a quick google search a solution was found.
-
Fixed: by removing the true value out of the function, the error was fixed. As the true value was obsolete in this instance.
-
Error: ('backface-visibility' is not supported by Safari, iOS Safari. Add '-webkit-backface-visibility' to support Safari 5.1+, iOS Safari 5+.)
-
Description: When checking for issues in DevTools this error came up.
-
Fixed by adding '-webkit-backface-visibility' to backface styling in CSS file.
-
Warning: ('content-type' header charset value should be 'utf-8'.)
-
Description: When checking the DevTools for issues this warning came up.
Not able to fix warning due to it probably being a network issue which I can't fix.
-
Warning: ('content-type' header media type value should be 'image/x-icon', not 'image/vnd.microsoft.icon'.)
-
Description: When checking the DevTools for issues this warning came up.
-
Not able to fix warning due to it probably being a network issue which I can't fix.
-
Error: (A 'cache-control' header is missing or empty.)
-
Description: When checking the DevTools for issues this warning came up.
-
Not not able to fix error due to it probably being a network issue also.
This project is developed on Gitpod, using git and GitHub to host the repository.
To deploy this repository using GitHub Pages the following steps were made:
- Opened up GitHub in the browser.
- Signed in using username and password.
- Selected my repositories.
- Navigated to ThomasMSmit/Memory-game.
- In the top navigation clicked settings.
- Clicked on the Pages tab on the left side of the screen.
- Selected Master Branch from the Source dropdown menu.
- Clicked to confirm my selection.
- Memory-game live on GitHub Pages.
Cloning Memory-game from GitHub:
- Navigate to ThomasMSmit/Memory-game.
- Go to the code dropdown box.
- Copy the URL in the dropdown box.
- Using your favorite IDE open up your preferred terminal.
- Navigate to your desired file location.
Copy the following code and input it into your terminal to clone Memory-game.
git clone https://github.com/ThomasMSmit/Memory-game
-
Thank you to Sandra Israel-Ovirih. Her project Memory-Game-fend helped me to get my own project going.
-
Thank you to Marina Ferreira. Her JavaScript tutorial for building a memory game really gave me a good base to start my project from.
For generating a table of content
-
Big thanks to Student care. Specifically Alexander, for giving me enough time to finish my project.
-
A BIG thank you to Aukje van der Wal for helping me get back on track and showing me how you should tackle a project.
-
A Thank you to Sean from Tutor support for helping me fix a couple issues I wasn't able to figure out by myself.
Site for educational purposes only!
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent
