Two weeks ago, a new version of Windows Azure Toolkit for Social Games was released. See @ntotten posts:
Windows Azure Toolkit for Social Games Version 1.1.1
Windows Azure Toolkit for Social Games Version 1.1
The new version implements two simple HTML5 games: tic-tac-toe and four-in-a-row, backed up by ASP.NET MVC views, WCF Web API services, ACS federated security, and Azure Storage. You can play them online at:
http://watgames4.cloudapp.net/
I think this is a more clear example than the previous one (Tankster) that was great but a bit overwhelming 
. Let’s dive into some implementation details of this new example.
Totten wrote:
The biggest change we have made in this release is to separate the core toolkit from the Tankster game. After we released the Tankster sample game we received a lot of feedback asking for a simpler game that developers could use to learn. To meet this need we developed two simple games, Tic-Tac-Toe and Four in a Row, and included in the toolkit. The Tankster game is now available separately as a sample built on top of the toolkit.
…
While the new games included in the toolkit are much simpler than Tankster, they still show the same core concepts. You can easily use these samples as a starting point to build out any number of types of games. Additionally, you will find that many of the core components of the game such as the leaderboard services, game command services can be used without any modification to the server side or client side code.
In my previous post, I mentioned a minor but important change in game action processing: any game logic was removed from server code. Adopting this approach, you can write new games without changing the ASP.NET MVC code. You still can add server side code if you want (to have more control over the actions, to avoid player cheating, etc..) but it is interesting to have a base code with game-agnostic code.
Opening the solution in Visual Studio, you will find Javascript files used by the two games. You can write a new game, reusing these files:
The games are implemented as areas:
You could add new games and publish them as NuGet packages.
Visually, the client Javascript code is organized as:
Each game X (TicTacToe, FourInARow, yours) has:
- XGame: the game logic
- XBoard: to draw board on canvas and to detect click events on it
- XViewModel: containing the player and other data to be used at view rendering (the example uses knockout.js, an MVC in Javascript)
- XController: to process new events and to coordinate the above elements
The generic part:
- UserService: methods related to users: login, get friends, etc.
- GameService: play moves, receives new moves, other actions.
- ServerInterface: Ajax calls (using GET, POST, JSONP, Azure storage…) that are used by the implemention of User and Game Service.
Topics for next posts: analyze the Javascript code, the use of Canvas, Javascript tests using QUnit, communication with server using Ajax, change the Game Service (Javascript) to use a Node.js server.
Keep tuned!
Angel “Java” Lopez
http://www.ajlopez.com
http://twitter.com/ajlopez
