Mem'rise is a retro, neon colored memory game for all ages. You must memorise a randomly generated sequence of symbols and try to repeat it. The game combines beautifully crafted animations, fonts, and colors with encouraging messages to provide an engaging user experience.
View the Mem'rise website here
The central goal of this project was to create a simple game for all ages that offered a nostalgic experience coupled with a new age design.
This game was created for people who have an interest in neon retro futuristic design.
Their goals are:
- A neon pink and blue theme.
- Relevant graphics to retro futurism.
- An engaging experience.
- Intuitive navigation.
- Easy to understand how it works.
Mem'rise met these goals by:
- Designing a color scheme heavily influenced by neon pink and blue colors.
- Implementing a retro futuristic background, and symbols.
- Adding fun and engaging animations.
- Dislaying relevant navigation links and styling them in approriate places.
- Writing an easy to follow How To Play section.
- Designing a smooth navigation flow.
- Programming a simple game.
The developers goals were to:
- Get a stronger grasp on writing code with a more professional focus.
- Gain a more intrinsic understanding of JavaScript, jQuery, and Jasmine.
- Craft a project to a high standard.
As a player of Mem'rise, I want:
- To play an attractive looking game to keep me focused
- Simple to understand controls, and navigation
- Information on how to use the game, and how to play it
- A sense of achievement when a level is completed
- A heavy influence from the genre of neon, retro futurism
The wireframes were creating using Figma.
The website is a one page design with the relevant menus/views being displayed at the approriate times based on user interaction.
-
Features:
- An animated title of the game
- A big call-to-action Start button which displays the game view
- A How To Play link which displays the help menu
- A Leaderboard with the top scores from fictional players
- A retro futuristic background image
- An audio button that can be toggled to play/pause the background music
-
Features:
- A set of 5 symbols that show animations and box shadow effects when clicked
- A Ready button to begin the game
- A Continue button to continue to the next move/level
- A score that updates everytime the player gets a correct move
- A back arrow which navigates to the main menu
- A menu icon which brings up a menu with a list of navigation links
- Positive messages displayed at random each time the player makes a correct move
-
Features:
- An explanation of how to play the game
- An explanation of how to navigate through the website
- A background overlay that changes depending on the screen size
-
Features:
- A link to the Main menu
- A link to the Help menu
- A back arrow which navigates to the main menu
- A background overlay that changes depending on the screen size
- An audio button that can be toggled to play/pause the background music
-
Features:
- This has a form with which the user is able to send a message to the developer
- It utilises Email.js
-
Features:
- This would have a graph with the user scores, averages, and times played
- It would utilise D3.js
-
Features:
- This would have the option to change the game difficulty between normal and hard
- Normal mode would be the game as it currently is
- Hard mode would make all the symbols spin clockwise increasingly the higher score a player has
-
Features:
- This button would reset the game at any time the user wants
The project uses JavaScript, CSS, and HTML programming languages.
- Cloud9
- The IDE Cloud9 was used throughout the project for development.
- JQuery
- The project uses JQuery to simplify DOM manipulation.
- Jasmine
- This project uses Jasmine to automatically test all the JavaScript and jQuery code.
- Jasmine-jQuery
- This project uses Jasmine-jQuery to allow Jasmine to test jQuery code.
- Bootstrap
- The project uses the Bootstrap framework to help create a responsive design.
- Git
- The project uses Git for version control during the development process.
- GitHub
- The project uses GitHub for a remote repository.
- Google Fonts
- The project uses Google Fonts to style the fonts in the website.
- FontAwesome
- The project uses FontAwesome to create navigation icons.
- Animate.css
- The project uses Animate.css to animate the symbols and the game title.
- Textillate & Lettering
- The project uses Textillate.js with Lettering.js to animate the game title.
- Figma
- The project used Figma to build wireframes in the planning stage of development.
- Pixlr
- The project used Pixlr to add an overlay to the background image which darkened it.
- AutoPrefixer
- The project used AutoPrefixer to add prefixes in the CSS for cross-browser support.
- Google Chrome - Dev Tools
- The project used Google Chrome - Dev Tools to test responsiveness, to debug code by utilising breakpoints and the console, and to speed up the design process.
These tools were used to test the validity of the code for this project:
- W3C HTML Validator was used to validate HTML.
- W3C CSS validator was used to validate CSS.
- JSHint was used to validate JavaScript.
Jasmine.js was used to test the majority of functions within the JavaScript code. It was used alongside Jasmine-jQuery to allow the use of jQuery within the Jasmine tests.
You can find the deployed Jasmine test page here. You can also find the repositories folder for Jasmine here.
A testing matrix was created using a spreadsheet builder in LibreOffice. It details all of the tests to make sure the site is responsive to different screen sizes, devices, and browsers. The testing matrix can be found here.
Note: I was unable to properly test the website on a mobile device with Safari. I didn't have access to one and the in-browser, and downloaded emulators I used didn't show any errors that some users were reporting with the Game View section.
- The project has a minimal design which combines interesting graphics, shadow effects, and animations. All this makes it a unique and attractive experience to keep the player engaged.
- The navigation and controls were designed with simplicity in mind. By placing them in approriate places and using relevant icons/ calls to action they are very intuitive to understand.
- The project comes equipt with a How To guide which tells the user how to play the game and how to navigate the website.
- Each time the player makes a correct selection and progresses to the next level, they are shown a random positive message which offers them a sense of achievement.
- The project uses a neon, retro futuristic background throughout the game as well as effects and fonts relating to the genre.
A click event listener had been added for the Continue button inside the addCount function so that when the Continue button was visible it would add a click event. Once clicked the Continue button would call the function generateMove then hide itself (the Continue button). But an issue occured were it would generate multiple moves once the Continue button was clicked. This was because it added a click event listener EVERY time my addCount function was called. It basically stacked the click listeners so that if, for example, it had been clicked 3 times previously and was clicked again it would run the code inside the click event listener 4 times causing the generateMove function to be called 4 times instead of 1. The developer realised that the click event listener should just be added when the document loads so it only adds it once.
The AWS IDE, Cloud9 was used to develop the project. The version control system, Git was used to commit and track changes. These commits were pushed to the hosting platform GitHub which was used to store the repository, and to deploy the project on GitHub Pages for a live demo. The deployed site is automatically updated through the master branch when new commits are pushed to the repository.
The project, Mem'rise was deployed to GitHub Pages according to these instructions:
- Log into GitHub
- From the repository list on the side bar to the left, select isaacwoodruff/mem-rise.
- From the menu under the repository name, select Settings.
- Scroll down to the GitHub Pages section.
- Under the Source heading click the drop-down menu and from the list select Master Branch.
- Mem'rise is now deployed on GitHub Pages.
- Return to the Github Pages section in the Settings tab to retrieve the link to the deployed site.
-
Follow this link to the main page of the isaacwoodruff/mem-rise repository.
-
On the right side of the page click the green Clone or download button.
-
In the 'Clone with HTTPS' section, copy the URL for the repository.
-
Open Git Bash.
-
Change the current working directory to the location where you want the cloned directory to be made.
-
Type
git clone, and then paste the URL that was copied in Step 3.git clone https://github.com/isaacwoodruff/littlemorganshostel.git -
Press Enter.
Your local clone is now created. If you would like further documentation on cloning a repository, you can read Cloning a repository.
- All text within this project was written by the developer.
- The code for adding cross browser functionality by creating the correct prefixes for the CSS was created by using AutoPrefixer.
- The basic structure/ design idea for setting up a memory game like this was recreated using this tutorial from mrkaluzny.
-
The images from the symbol set in the game view:
-
The background image was downloaded from CellCode.
-
I gained a deeper understanding of Scopes and Closures in JavaScript from this video tutorial Understanding Variable Scope & Closures Without Losing your Mind.
-
I also gained a better understanding of the Call Stack, Event Queue, timeouts, loops, and about Scope from this article Thrown for a loop: understanding for loops and timeouts in JavaScript.
-
I received inspiration for this project from this minimal memory game called circles.
Thanks to:
- My Code Institute Mentor Mark Railton for his advise throughout the development process.
- To all of the Code Institutes Slack community for helping with my issues, reviewing my code, and giving me tips.