Charlie Taminian's Logo

scratch a match

Scratch a match game design showing on a desktop machine

Flip, match, win!

A fun little game where the player needs to match a set of cards inorder to win that cash prize. It's a memory game designed as a lottery scratcher!

This project was a lot of fun to work on. From the initial stages of design, I knew I wanted to design something more than your typical matching game. The idea to disguise it as a lottery scratcher came while...well you guessed it, playing a scratcher!

The project features modern JavaScript code to handle the game logic and CSS Flexbox and CSS Grid for the UI elements. The project also features simple and non-obtrusive CSS animations. Go ahead give a try. Good luck!

DEMO LINK

Technologies:

- JavaScript

- HTML5

- CSS Flexbox

- CSS Grid

Scratch a match game design showing on a mobile device Scratch a match game design showing on a mobile device

Mobile Responsive

How do you make a game board look good on all devices? Do you scale the background, buttons and titles individually to make them fit? Or do you simply center the elements on the screen making sure to keep good finger-to-button real estate? This was a hard question to answer!

For this specific situation, it seemed like the best solution was to create several background images with different sizes and place / remove them accordingly. This also meant custom sizing the game grid, buttons and text individually.