Matching Game

Game UI
UI that appears when clicked on "pause" button.
UI that appears when the player matches all the cards. It shows star rating and the time taken by the player to match all the cards.

Inspiration

I am fascinated with responsive web designing. And this weekend's theme is board games. So thought to build a responsive web application and that too a board game. This led me to work on this project.

What it does

It is a card matching game that consists of 8 pairs of cards shuffled and arranged as a 4 by 4 grid. A player has to match all the 8 pairs of cards in order to win the game. On winning, he/she can know the time taken by him/her to match all the cards, the number of moves made along with star rating.

How I built it

I have used web designing tools HTML, CSS, and JS to build this game. Firstly, I have ensured to bring an aesthetic feel to the UI. For that, I have used the wobble effect for the cards and added sound effects. Then, coded the logic for flipping the cards, managing star rating, and timer in JavaScript. And finally, I have used media queries in CSS for bringing responsiveness to the application(Mobile view and Tablet view).