This project has taken more then what I’ve intended. In this project, I am creating a memory game called concentration. There are several versions of concentration game. But I’ve implemented the simplest one.
- There 2 pairs of cards with number 1 to 8.
- The cards are laid face down.
- Each turn, the player click a pair of cards to flip.
- If the pair matches, the player score points.
- If the pair is not matched, the pair of cards turns back to face down.
It is a pretty simple project. But it had taken me more time than I should have because I have overcomplicated the overall game design.
Following are the steps I’ve taken to develop the game.
Design game engine
- Card object
- A string value which will be used to compare between two cards for similarity
- A URL to image resource of the card
- To keep track of the current state of the card
- To keep track of whether the card is already matched
- Deck object
- An array of card objects
- shuffle( )
- Shuffle cards
- To put all the cards in the deck face down
- Game object
- current score of the player
- total number of moves made by player
- total number of matched pairs
- a deck to play
- deal( )
- call shuffle of the deck
- checkScore( )
- compare two cards which are facing up for similarity
Provide game functions in service
Create a service called
game. Inside the game.service.ts file define two functions as follow:
- createDeck(count: number)
- Create and return a deck of card with the provided number of cards
- getGame(deck: Deck)
- Create and return a game object using the provided deck
- Uses card object as the data model
- Implements flipping on click event
- Uses a list of CardComponents to create the game board to play
Design game board page
- Create simple and ugly page to stop myself from wasting too much time fiddling with CSS and colors
Lesson learned: Keep it simple and stupid.
Live project link: https://keen-allen-a7c7db.netlify.com/