Matthew Koerber

Web and Software Developer



CSS JavaScript HTML



Made for a Javascript class. Originally it only had match detection, a score, and a reset button. The option to match colors and the timer were added after it was graded.


flipped cards
A group of nine cards that were flipped by cheating.

Each card has its own container to avoid shifting the cards around it when flipping. The container also has the click event for the flip bound to it. The cards themselves are comprised of two main containers, a front and a back. The front is rotated 180° around the y axis and when the card is flipped the full card rotates 180°. The flip is achieved through a one second transition. When a match is found the cards will get an overlay and will stay face up.

If match colors is selected it will ask if the game should be reset, and cards reshuffled, now or later. This is mainly to prevent people from switching between modes during play and possibly making the game unwinnable. 

The way the game can tell which cards are what colors is because of classes assigned to each card. The classes allow the different face images to be shown, and also help determine what number the card is and what suit.

The timer counts up from when the first card was flipped and stops when the last match is found. Before starting a game, and when the timer is 00:00 the colon can be clicked to flip all the cards. Once the game is started the clicking the colon won't do anything, but the cards will be face up if the cheat was activated.