A Memory game in AngularJs

Just for fun I have tried to recreate a Memory game in AngularJs.
As a kind of game it is not a complicated one, but it was interesting for me to evaluate the time needed in coding using the framework.

The memory game is quite famous among kids, but it is enjoyable even for the adult persons (http://en.wikipedia.org/wiki/Concentration_%28game%29).

Create this first implementation it took me about 3 hours (not in a row and sometime with my daughter that was jumping on my back).
The game is working, but in general as UX it is still rough.

Here the list of the components I created:

Name Type Description
mainCtrl controller it is responsible of the main view and create correctly the directives
board directive it represents the board itself and contains the cards and shows all the informations of the game (very few right now)
card directive it is a card of the memory game. It manages the view and displays the correct side according to the rules of the game.
cardFactory service it creates the card model. It has only one create method.
The model has as properties: id, val, flipped, discovered
as methods: flip(), flipBack()
deckService service it is responsible to create the random deck at the bootstrap of the application.
It has one method: createDeck(numberOfCards)
gameRuleService service it is responsible to apply the rules. The main controller flip a card through this service that verifyes how, if and when to comand to a model to flip or flipBack.
gameInfo constant it contains score, clicks, number of the cards in the deck
run bootstrap it bootstraps the application, creates the deck using the deckService and own the gameInfo constant

Here’s the screenshot of the dependencies (courtesy of the AngularJs batarang for google chrome)

memory-game-dependencies

Here the screenshot of how I organized the files inside the solution.
solution-structure

I prefer to keep the solution clean and to have one file for any service / model / whatever I need.
Normally my tests stay in a folder call test at the same level of the app folder.

The namespaces.js file contains all the definition of the modules, with the dependencies (no need of dependencies in this case)

Here the screenshot of the memory game.
The back of the cards is courtesy of my little boy 🙂

gabriele-memory-game

The source is available here on github

5 thoughts on “A Memory game in AngularJs

  1. Pingback: A platform game in angularjs | Agile. Angular/Js. Asp.NET & TDD

  2. Pingback: A platform game (more or less) in angularjs | Agile. Angular/Js. Asp.NET & TDD

  3. Hi Michele,
    I would like to try your app and possibly extend it as a personal exercise. Is it ok if I clone it? some word on how to run an the angular app locally? Thanks in advance!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s