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:
|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)
Here the screenshot of how I organized the files inside the solution.
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 🙂
The source is available here on github