'Match Me' is a simple card matching / memory game that provides its players a quick and easy way to kill time and have fun.
The target audience for this application are individuals of all ages that can operate a computer, tablet or mobile device.
As a user, I expect to:
- Easily understand what are the game instructions
- Quickly access the game itself
- Have fun playing the game
- Be able to provide feedback to the developers without any difficulty
The website can be split into 3 main sections, each section then leading onto subsections (explained below). A PDF with all the wireframes can be found here.
Please note that the PDF document only includes wireframes for desktop and mobile design. Tablets will take the mobile design when viewed as portrait, and desktop / laptop design when viewed as landscape.
The website's 3 main sections are:
- The start page
- The game page
- The feedback page
All pages use the "Josefin Sans" font from Google Fonts, usually with a large size, in order to give the app a playful look.
The start page has a very simple layout. The title of the game (Match Me) is displayed at the top of the page, and at the centre the user will find two big buttons: "Start Game" and "Instructions".
The first button takes the user to the app's second main section (the game page), while "Instructions" provides the user with information regarding the game's rules and score method.
Clicking the "Instructions" button will open a modal window that can be closed by clicking the "X" on the upper right corner.
At the bottom of this section the user will find a footer containing basic copyright text on the left, social links in the middle and a feedback button ("Report a Bug") on the right. The feedback button sends the user to the website's third main section: the feedback page.
The game page contains a 4x4 grid of cards in the centre of the page and also a few other elements that are important for the game's execution: a countdown timer, a score display, a "bonus mode" display and a restart button.
Whenever the user clicks a card, it will reveal a specific symbol. If the symbols on two cards match, the cards will remain open. Otherwise, they close again.
The timer displays "00:30" (minutes:seconds) when the user enters this section. Countdown only starts once the user clicks on one of the cards.
The score is initially 0, but will increase each time the user matches a pair of cards.
When the "bonus mode" is activated, a smiley face pops up on the screen (upper right on mobile portrait display, center left on mobile landscape and desktop displays). When the bonus is ON, the score amount is duplicated. Activation / de-activation of the bonus mode is done at random times via a Javascript function.
The restart button restarts the game.
At the bottom of this page, the user can also find the same footer as in the start page section. The copyright text at the left side can be clicked, leading the user back to the main page.
When the game is complete, the user is taken to a game over page. The text on this page changes dynamically, depending on whether the user won or lost the game. This subsection also includes a "Replay" button that takes the user back to the game page, allowing them to play a new game. The usual footer and all its functionality can also be found at the bottom of the game over subsection.
The game page incorporates audio effects that are triggered when the following events take place:
- A card is clicked
- A pair is matched
- Bonus event is activated
The feedback page consists of a simple form where the user is required to enter his name, email address and feedback. Once all fields have been filled in, the user can click the "Submit" button and the data will be sent to the developer's email address (in this case, davidej.p.correia@gmail.com). A confirmation of receipt will also be sent to the user's email address.
Once the "Submit" button is clicked, a spinning wheel appears and a few seconds later, the user is taken to a new page that confirms if the submission was successful or not (wireframe example can be found here).
After feedback submission (whether successful or not), a "New Game!" button becomes visible, allowing users to return to main section 2 (the game page).
The form page also includes a 'Back' button that allows the user to go back to section 1 (the start page).
At this stage, the following features / improvements could be implemented to boost UX:
-
Hover states on the footer buttons / links could change colour, to make it clearer to the user that these elements lead somewhere.
-
Game cards would benefit from a more imaginative design.
-
The game instructions are sitting inside a modal window, which feels a bit overwhelming on mobile devices. Instead of a modal window, it might be worth generating an HTML page for the instructions.
-
The game should allow the user to change between difficulty levels, making it more challenging.
-
The user should be able to define the value for the countdown timer, instead of the default 30 seconds. This will also help in making the game more challenging.
Screenshots of the final developed product can be found below:
The following languages were used in the development of this website: HTML, CSS and Javascript.
In addition to "vanilla" JS, the Jquery library was also used, in particular a jquery modal developed by GitHub user Kyle Fox.
The API EmailJS was used on section 3 of this website (the feedback page), in order to allow the user to send feedback to the developer.
For the game cards pictures, the following framework was used: https://ionicons.com/.
Testing was done locally with Visual Studio Code and extension 'Live Server'. The same testing was also performed on the version deployed to GitHub, after creating a GitHub page.
The following elements were tested on section 1 of this app:
- The "Start Game" button.
- The "Instructions" button.
- The footer links / buttons.
The "Start Game" button triggers two JS functions: "loadPage" and "startGame". The first function loads all HTML elements for section 2 (game page), while the latter loads javascript functionality related to the game page itself.
The "Instructions" button does what is expected: opens up a modal with the game's rules / score method.
The links on the footer will navigate to the expected webpages, opening up on new browser tabs.
The copyright button on the left will reload the main page, and the "Report a Bug" button will lead the user to section 3 (feedback page).
The following elements / events were tested:
- Card display behaviour
- Timer countdown
- Score increase
- Bonus event
- Restart button
- Audio events
- Game Over behaviour
- Card Shuffle
All cards are initially presented with their pictures covered. Clicking on a card toggles the required CSS styles to reveal the card's picture. The CSS style '.disabled' prevents the user from clicking the exact same card again. Clicking a second card will result in one of the two actions below:
- If the cards match, the CSS styles do not change and the cards remain open.
- If the cards don't match, the CSS styles are reverted and the user is able to click the cards again.
The timer initially displays "00:30" (minutes:seconds). The countdown only starts once one of the game cards is clicked, triggering the function called "countdown". This function triggers an interval (setCountdown) that updates the timer every second.
The function "countdown" also contains code that prevents a few bugs:
- Prevent subsequent card clicks from retriggering the "countdown" function.
- Display a 0 in front of minutes or seconds, when the value of both is less than 10 (i.e. display 09:10, instead of 9:10).
- Prevent the seconds counter from reaching negative values (i.e. -01, -02...).
The score starts with a display of 0. When a pair is matched, the function "increaseScore" is triggered. This function takes the current time (converting minutes to seconds) and then multiplies the total number of seconds by 100 or 200 (if the bonus mode is ON). I played the game, console logging the score and time whenever a pair was matched. Results on the console log matched the update on the DOM with and without the bonus mode ON.
The bonus event starts when the first card is clicked, triggering a JS function called "smileyBonus". This function sets an interval that runs every 5 seconds. With each occurrence, it generates a number between 0 and 500. If the number is even, it will activate the bonus if it's off, or de-activate it, if it's on.
I tested this functionality by console logging the random number generated and it performs as expected: if even, the CSS styles are toggled and reflected on the DOM (smiley face shows up when bonus mode is ON and disappears when OFF), and the boolean "smileyBonusActivated" is updated accordingly.
The "Restart" button does as expected: it clears all intervals that are running ("setCountdown" and "smileyEvent"), reloads the DOM and retriggers the "startGame" function.
Retriggering the "startGame" function will "refresh" all outer scope variables:
-
addTimeBonus - resets if to 'false', otherwise the timer will jump from 00:30 to 00:39 (time bonus will kick in if state is left as 'true' from a previous game).
-
smileyBonusActivated - resets it to 'false', otherwise boolean value and CSS styles won't match (smiley face will pop up, but boolean value is actually false and no bonus is applied).
-
intervals - cleans up array, so that it may start empty.
-
pairsMatched - clears array back to 0 (empty), otherwise it will contain a value from a previous game, causing a false victory or not triggering game over when all pairs are matched.
Played the game and audio events trigger when expected:
- When a card is clicked
- When a pair is matched
- When bonus mode is activated
There is a current bug: when two cards are clicked almost simultaneously, the card open sound will only trigger once. Further research needs to be done on this.
The "gameOver" function is triggered when the timer goes below 0 seconds or when all pairs are matched.
For the timer, I console logged the seconds countdown and, as expected, it triggers "gameOver" when the value hits '-1'. All intervals running are cleared at this stage.
The function "allPairsMatched" checks if all 16 cards have been matched. I console logged the result of the variable "pairsMatched" and, as expected, it triggers "gameOver" when it hits 16.
The "gameOver" function will clear all intervals that are currently running. It will then load the DOM with the "Game Over" subsection. The 'H1' element updates as expected:
- It states "You Won :)" if all cards are matched.
- It states "You Lost :(" if the user runs out of time.
I console logged the final score before the "gameOver" function is triggered and it reflects what is stated on the 'p' element of the "Game Over" page.
The "Replay" button on the "Game Over" subsection reloads the game page and retriggers the "startGame" function. No issues found whilst replaying the game (timer, score, bonus and other elements behave as expected).
Similarly, no issues found on the footer of the "Game Over" subsection:
-
The will navigate to the expected webpages, opening up on new browser tabs.
-
The copyright button on the left will reload the main page, and the "Report a Bug" button will lead the user to section 3 (feedback page).
I tested the "shuffleCards" function by console logging the end result of the 'cards' array. In all events, the array was always different and did not contain duplicated values.
The following items were tested on the feedback page:
- Form input text elements
- Submit button
- EmailJS
- Spinning Wheel
- Back button
Tested if it's possible to submit a form with incorrect information (no name, invalid email address, no comments) - this is not possible, as expected.
Clicking the "Submit" button successfully triggers the EmailJS API written inside JS function "formSend".
EmailJS functionality for this project has been set up to send the user's comments to davidej.p.correia@gmail.com, whilst also sending a confirmation message to the user's email.
I tested the above by filling in the form, using insanereason@gmail.com as a user email. The comments on the form were sent to davidej.p.correia@gmail.com and a confirmation was also sent to insanereason@gmail.com.
A successful submission will change the DOM to state that the feedback has been sent.
To simulate a submission error, I changed the EmailJS template used from "send_feedback" to "send_feedbackk". The results were as expected, leading the user to a page that states that not only was the feedback not sent, but also what the error message was.
On both scenarios (successful and error), the user is presented with a "New Game!" button. This button does what is expected: it loads the game page and triggers the "startGame" function.
The spinning wheel kicks in as expected, once the form has been filled in correctly and the 'Submit' button has been clicked.
The visual effect then terminates, once the submission completes or fails.
Clicking the 'Back' button successfully takes the user back to the main page.
The webpage was viewed at several different resolutions, media queries kick in as expected. The following resolutions were tested:
- 360x740 (including landscape mode)
- 375x667 (including landscape mode)
- 411x823 (including landscape mode)
- 414x736 (including landscape mode)
- 375x812 (including landscape mode)
- 768x1024 (including landscape mode)
- 800x1280 (including landscape mode)
- 834x1112 (including landscape mode)
- 600x960 (including landscape mode)
- 1024x1366 (including landscape mode)
- 1280x720
- 1440x900
- 1920x1080
The form page has a bug when viewed on Android phones. When touching on one of the text fields, the virtual keyboard is activated and squeezes the viewport, making it difficult to view the form. A solution for this was found on a stackoverflow discussion. Code can be found below:
setTimeout(function () {
let viewheight = $(window).height();
let viewwidth = $(window).width();
let viewport = $("meta[name=viewport]");
viewport.attr("content", "height=" + viewheight + "px, width=" +
viewwidth + "px, initial-scale=1.0");
}, 300);The website was tested on the following browsers, all displaying similar behaviour:
- Mozilla Firefox (87.0).
- Google Chrome (89.0.4389.114).
- Microsoft Edge (89.0.774.68).
For mobile, I used an Asus Zenphone 5, Android version 9. The following browsers were used for testing:
- Mozilla Firefox (87.0.0-rc.1).
- Google Chrome (89.0.4389.105).
The first stage of development was writing the HTML code for the main page (seen in 'index.html'). I then created more HTML pages for other sections (i.e. game page, feedback form), to use as a visual reference while I was still working on the HTML and CSS bits.
Once I was happy with the HTML structure, I then started applying styles by writing CSS code, which can be seen on file 'styles.css'.
With the HTML and CSS in place, I began writing the Javascript code to add functionality to the page (seen in 'index.js'). Additionally, the HTML code I had on my extra HTML pages (game layout, form, etc.) was copied to a JS module file called 'templates.js'. As stated on section 5.1, these HTML pages were only meant to be used as a visual reference whilst working on HTML / CSS code. The goal is to use Javascript to manipulate the elements on index.html (more specifically, alter the contents inside the div with ID 'js-container').
With most of the JS code written, I then slowly began to add extra features (more media queries, spinning wheel on the form page, etc.) and also fix some bugs I had not previously encountered during development.
The project was deployed to GitHub (username evendoom) via Visual Studio Code.
Once deployed to GitHub, the following steps were taken to create a GitHub Page:
- Access the GitHub repository via an internet browser.
- Click 'Settings'.
- On the new page, scroll down to 'GitHub Pages' and click 'Check it out here!'.
- Select branch (main).
- Select folder (root).
- Click 'Save'.
The following articles / webpages / services were directly used or served as inspiration for this project:
-
The website 'Flat UI colors' provided inspiration regarding color palettes: https://flatuicolors.com/.
-
The primary font style used throughout this website (Josefin Sans) was taken from Google Fonts.
-
All icons used on this website (except the favicon) were taken from Ion Icons.
-
The favicon used on the browser's tab was taken from the following website under 'emoji > alien monster': https://favicon.io/.
-
References to HTML and CSS glyphs can be found on the following website: https://css-tricks.com/snippets/html/glyphs/.
-
The following jQuery code was used for modal implementation: https://jquerymodal.com/.
-
The following jQuery plugin was used for the spinning circle: https://www.jqueryscript.net/loading/circle-indicator-spinner.html
-
Form submission was implemented via EmailJS.
-
The stackoverflow website was used as a reference to some bug solving, particularly to fix the viewport on Android mobile devices when the virtual keyboard is activated: https://stackoverflow.com/questions/32963400/android-keyboard-shrinking-the-viewport-and-elements-using-unit-vh-in-css.
-
The following MDN article gave me a good understanding on how to use modules in javascript: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules.
-
The audio effects used on this game were created on Steinberg Cubase, using a virtual instrument called 'Omnisphere' by Spectrasonics.
README.md written by Davide Correia, 2021