/Flip

A logic puzzle game that challenges player to find a way to flip all squares to the same color, built in JavaScript, JQuery, and CSS. Play it on your phone!

Primary LanguageCSS

Flip

Flip is a logic puzzle game. You have a grid of squares. You can flip a square by clicking it. But when you clicking a square, all adjacent squares will also flip at the same time. Your challenge is to turn all squares flip into pink color. See how far you can go?

Demo

Demo

Features and Implementation

I used JavaScript and JQuery to dynamically handle DOM elements as well as implement flipping logic. Each square will resize automatically according to different levels. I also leveraged CSS3 features to present popup modals for display information and implement responsive web design to improve the User Interface(UI). Applied Window localStorage to memorize the current level.

Game View

Game View

Mobile View

Mobile

Popup Modals - Game Rule

Info Modals

Dynamically resizing

Congra Modals

Future Directions

  • Implement an algorithm to provide hints.