In 2011 when I started designing the game/experiment (here the introduction to pawns and tiles) I defined a simple architecture able to manage the minimum requirements. I used jQuery to manipulate and bind DOM and BackboneJs only to manage Models and inheritance.
At that time I preferred not to depend on a JavaScript framework for the infrastructure because I wasn’t sure about the result I would have had to achieve and I wasn’t confident to obtain it with the existing frameworks, because of my lack of knowledge. So I preferred to write more code but to be in full control of this.
jQuery was used only in the EventBinder and RenderService layers, so in case I could be able to remove it completely only substituting the implementation of those layers.
It can seem a little bit paranoid, but in 2008 a team leader asked me to migrate a project from PrototypeJs to jQuery.
At that time it was very common to put javascript code everywhere, directly in page and so on.Solve that request wasn’t been hard, it was been a living hell.
I swore to myself that I would never repeated that error twice.
I created dedicated services and controllers for every aspect of the game, but today I think that some objects have too many responsibilities.
| Name | Description |
|---|---|
| ActionsController | It is bound on the click on a skill button of a pawn or a specific area on the map used by specific skills (ie: move). It has the RenderService and the ActionsService as a dependencies. |
| AddPawnController | It is bound on click of a pawn on the side of the board, but only when the game is in the expected status (ie: the begin of a game). It has renderService, addPawnService as a dependencies |
| AnimationController | It is bound on click of the pawns of your roster to manage highlights and all the animations in the board. It has renderService, turnService, turnController as a dependencies |
| GameController | It is bound on click of the buttons “save” and “end turn”. It has the game Model as a dependency |
| InfoController | It is bound on click on pawns to show additional informations. It has the renderService as a dependency |
| TurnController | It is responsible of the turn, to verify the status of a pawn and the board. |
| Name | Description |
|---|---|
| ActionsService | It is responsible of the usage of a skill by a pawn and apply the game rules for this specific domain. It has the mapService as a dependency |
| AddPawnService | It is responsible only in the adding of new pawns at the begin of a match or in the other cases the game expects it. It has the gameRepository as a dependency |
| AnimationService | It is responsible for the animations of the UI |
| EventService | It is responsible in the binding of the UI, allowing click and interactions all along the board. |
| GameService | It is responsible of the current game. It allows/denies to end a turn, load a specific game or save a move. It has the gameRepository as a dependency |
| MapService | It is responsible of the map: every move, every position, line of sight between pawns, are validated through this service. It has a Map Model as a dependency |
| RenderMapService |
It is responsible to draw and update every object in the map and the map itself. It has the game Model and the RenderContract as a dependencies |
| RenderService | It is the main service to draw or update everything and through the application it is the only render used as a dependency. It has the renderMapService and the renderSideService as a dependencies. |
| RenderSideService | It is responsible to draw and update only the side of the game. It has the game Model and the RenderContract as a dependencies |
| TurnService | It is responsible of the status of the turn, if the player has one or more actions to perform, the kind of actions, etc. |
In javascript is a pain manage dependencies, commonly you inject explicitly your object or sometimes you define some objects as global at your application level.
The last option makes very hard to test your application and you need more integration test or E2E test.
So if you notice something strange, a missing logic in my dependencies, you feel the right way.
Looking at my current workflow few month ago I thought that if I had used AngularJs I could simplify the workflow removing the layers render and eventBinder and at the same time I would solve the problem of the dependency injection and I would do more consistent all the application.
I know that AngularJs is not the correct framework to develop games (look at Angular Sweet Spot section), but for this specific game, by its nature, I’m sure it won’t have side effects using it.
So in the next future I want to have this
Obviously I will have to do a few works because my concept of Controller is not exactly the same of Angular, but I’m quite confident that it won’t take too much time.
Speaking of Models, here the list
| Name | Description |
|---|---|
| Pawn | It is a base class, it defines the common behaviours and properties of every pawn. |
| Knight | It extends the Pawn object adding specific skills and values for the common properties |
| Paladin | It extends the Pawn object adding specific skills and values for the common properties |
| Pretorian | It extends the Pawn object adding specific skills and values for the common properties |
| Sapper | It extends the Pawn object adding specific skills and values for the common properties |
| Scout | It extends the Pawn object adding specific skills and values for the common properties |
| Sniper | It extends the Pawn object adding specific skills and values for the common properties |
| Game | It represents the game itself. The current status of the match and of the turn. Using this object you can retrieve all information you need about the map, pawn’s rosters and so on. |
| Map | It represents the map of the game. You can use it to get information about the content of the coordinates and it is responsible of the changes in the map |
| Roster | It is responsible of every pawn a player owns on the map. You can use it to get a specific pawn of a player, remove it or add it following the game rules. |
| Side | It is responsible of the side of every player. You can use it to know how many pawns a player has in his stock and to get a new pawn of a specific kind and to add it in the roster. |
| Skill | It is a base class, it defines the common properties of every skill. The game rules of every skill right now are applied using every skill through the actionsService |
| Skills | There are a few of skills right now, everyone with specific properties: Combat, Slash, Parry, HolySlash, Heal, Assault, Block, FireBomb, Stab, Rush, Strike, Dodge. Even if the move is treated as a skill in the game, it is a property of every pawn and not a formal skill. |
Aside all these models, services and controllers there are a few of factories, contracts and a very light repository layer to communicate with the server side of the game.
I’ll go deeper in the analysis of every single part of the client and I will try to describe as best as I can all the refactor to implement AngularJs in the current workflow.
I want to remember to you that I’m not in the game industry so this is not a “how to …” tutorial, but more a diary of “How I did it”.
Then any feedback/suggestions are more than welcome.
