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.

The Game

• 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
  • cardNumber
    • A string value which will be used to compare between two cards for similarity
  • image
    • A URL to image resource of the card
  • isFaceup
    • To keep track of the current state of the card
  • done
    • To keep track of whether the card is already matched
• Deck object
  • cards
    • An array of card objects
  • shuffle( )
    • Shuffle cards
  • flipDown()
    • To put all the cards in the deck face down
• Game object
  • score
    • current score of the player
  • move
    • total number of moves made by player
  • match
    • total number of matched pairs
  • deck
    • 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

Components

• CardComponent
  • Uses card object as the data model
  • Implements flipping on click event
• GameBoardComponent
  • 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/

Github: https://github.com/zkkmin/concentration

I had posted how to add OneMap into your iOS application in previous post. In this tutorial we will try one of the OneMap REST APIs in Swift Playgrounds and see the return results. Xcode Playgrounds is perfect for experimenting with new APIs interactively. We are going to use Address Search API from OneMap.

This allows searching of address data for a given search value.  This also allows support of commands such as AND, OR, including word (+), excluding word (-), and exact phrase search using quotation marks. It will return search results with X,Y coordinates of the searched location.  http://www.onemap.sg/api/help/

First create a new Playgrounds file in xcode. Then import XCPlayground module. After that call XCPSetExecutionShouldContinueIndefinitely and set it true so that execution will continue and we can see the return result from asynchronous REST API calls.

Next, we are going to use NSURLSession to make the REST API call to OneMap service. I use the example URL available in their api help page.

After that we pass the url string to dataTaskWithURL function of the session object and implement a completion handler function to tackle the return result from async call.

We can convert the result JSON data using NSJSONSerialization.JSONObjectWithData method and cast it as NSDationary. And then we can write println statement on the elements of  NSDationary result. The values of the result will be shown interactively at the right column of Playground. We can change the parameter values in the url string and see the result changes interactively.

We will use this API call in the next post, adding OneMap Search Function in iOS App.