Go straight to the live game page.
One of my front end projects at The Iron Yard is an interactive memory game built with HTML, CSS, and JavaScript. Using DOM manipulation, the cards change appearance as the user interacts with the game. (Check out the game and give it a try).
Flexbox was used to control the spacing and placement so that most elements will resize for various devices. However, the game board for the card is not currently responsive.
I used Sketch to revisit the project and mock up the home screen and game board for mobile. Below are the prototypes followed by the considerations for scaling down the game.
- In a memory matching game it is ideal for the full game board to be in view so the player can build a mental record of each card’s location as they are revealed.
- To fit the full board in the mobile window, the card size will need to be reduced.
- Eliminating the need to scroll should also reduce the likelihood of stray clicks.
- On mobile the player will interact with the cards by touching the screen. For this reason the size of the cards must be considered so that it is easy to select the intended card and see the detail of the image.
- After working in Sketch, I decided that 80px would be the minimum size that still allows for ease of selection. It would be ideal to test this with a mix of users.
- The 4 column x 4 row card layout that works on larger screens will translate to mobile by reducing the card size from 120px square to 80px square.
- This option fits a 16 card game for twins edition (eight pairs) and also accommodate a 24 (eight sets of three) for triplets edition.
- Another option would be to opt for fewer but larger cards. This might work for an easy mode with a max of 12 cards (six pairs).
Sketch makes it convenient to visualize and adjust the sizing and layout options vs. playing with these types of details in the code.
Here are the prototypes at actual size:
Here's The Dill 