Match N Link
A fun web puzzle game
MY ROLES

Game Designer

Game Developer

DATE

Nov 2013 - Dec 2013

I LEARNED

Game Design

JavaScript

NEXT STEP

Add hints

Make it responsive

Match N Link is a fun picture matching game. Well, it's a super fun game if you were my classmate of the CMU MHCI program. For the final project of Web Programming course, I designed and developed this game using the avatars of my MHCI classmates and CMU HCI professors.

The basic idea is to remove photo tiles by finding the "clickable pairs". A clickable pair would be two photo tiles of the same person, and they can be connected with no more than three straight lines.

More about The Rules

One line needed to make the connection.

Three lines needed to make the connection.

Four lines needed, wrong!

Special Effects

Just to make it funnier, I added special effects to a few avatars according based on their famous sayings or characteristics. Andre Le for his enthusiasm in LED and all the electrical gadgets; Prof. Scott Hudson for his famous mustache; Prof. Robert Kraut for his representative lying bicycle; Prof. James Morris for his inability in distinguishing Asian female students. Play the game to find out the details!

Algorithms behind

The most challenging part of implementing the game was the algorithm to check whether the two clicked tiles have a path to connect them. If you're interested, keeping reading this part - I use p1, p2 to represent the two photo tiles of the same person. There are four possible conditions for tile p1 and p2:

If p1 and p2 are on the same line (they have same x or same y) and there is no photo tiles on the way the line passes through, there is a connection.

If p1 or p2 is covered by all four photos, there is no possible path.

If p1 and p2 are on the same line but there are photo tiles in between: set p1 as pt0, p2 as pt3, create 2 temporary points pt1,pt2, try to check whether is are three lines to connect pt0-pt1, pt1-pt2, pt2-pt3 by searching through the matrix.

If p1 and p2 are not on the same line: still using pt0,pt1,pt2,pt3, from left to right and from up to bottom to search for possible connect lines for pt0-pt1, pt1-pt2, pt2-pt3.