Daily Archives: January 7, 2012

Social Games Programming (Part 7) Game Moves Processing

Previous Post
Next Post

In this post, I want to discuss the game play processing in Tic Tac Toe. It involves many pieces, from Razor view using Javascript to Web Role, to Azure Blob Storage.

These are the javascript files referenced in Tic Tac Toe view (at SocialGame.Web/Areas/Samples/Views/TicTacToe/Index.cshtml):

<script src="@Url.AreaContent("Scripts/jQuery.tmpl.js")" type="text/javascript"></script>
<script src="@Url.AreaContent("Scripts/knockout-1.2.1.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/game/ServerInterface.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/game/GameService.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/game/UserService.js")" type="text/javascript"></script>
<script src="@Url.AreaContent("Scripts/game/TicTacToeBoard.js")" type="text/javascript"></script>
<script src="@Url.AreaContent("Scripts/game/TicTacToeGame.js")" type="text/javascript"></script>
<script src="@Url.AreaContent("Scripts/game/TicTacToeViewModel.js")" type="text/javascript"></script>
<script src="@Url.AreaContent("Scripts/game/TicTacToeController.js")" type="text/javascript"></script>

As I wrote in the previous post, ServerInterface, GameService and UserService are game-agnostic components. They could be used in any game. For each new kind of game X, you must implement XBoard, XGame logic, XViewModel and an appropiate XController.

At the end of that view, there is the creation of the game-agnostic services:

var apiURL = "@this.ViewBag.ApiUrl";
var blobURL = "@this.ViewBag.BlobUrl";
var si = new ServerInterface();
var gs = new GameService(apiURL, blobURL, si);
var user = new UserService(apiURL, blobURL, si);

The @this.ViewBag properties are filled in the ASP.NET MVC controller (see BaseController.cs)

The creation of the game controller:

// check for canvas, show an "Upgrade your browser" screen if they don't have it.
var canvas = document.getElementById('board');
if (canvas.getContext == null || canvas.getContext('2d') == null) {
var board = new TicTacToeBoard(canvas);
var game = new TicTacToeGame();
var controller = new TicTacToeController(viewModel, gs, board, game);

But the interesting part is in the controller constructor:

function TicTacToeController(viewModel, gameService, board, game) {
    this.viewModel = viewModel;
    this.gameService = gameService;
    this.board = board;
    this.game = game;
    this.started = false;
    var controller = this;
    this.board.onMove = function (x, y) { controller.onMove(x, y); };

Notice the this.board.onMove: the controller register itself to process new moves detected by the board component. At its start method, the controller register itself to process game service updates:

        function (queue) { controller.processGameQueue(queue); },
        function (action) { controller.processAction(action); }

Let’s examine the processing of game moves.

1 – The board component detects a click, then it sends a new move to controller (using the onMove callbalk)

2 – The controller sends the new move to game logic, to update state (I omitted the view model in this sequence/graph)

3 – The controller sends the new move to game service.

4 – The game services sends a new command to web role, using the server interface

5 – The Web Role API receives the new command

6 – The command info is appended to the game status blob, at Azure storage

Now, the other client processing:

1 – The game service, using a timer, polls the game status, calling the service interface

2 – The service interface, using JSONP, retrieves the current game status from Azure Blob storage

3 – If a new move is detected, the game service calls a callback function provided by the controller (game service has no reference to controller).

4 – The controller sends the new move to game logic, updating state (I omitted the view state here)

5 – The controller sends the new move to board component, to update the canvas

A key point: the controller knows NOTHING about the service interface, WCF Web API, blob storage. So, you can change the game service to route and detect new moves in other ways. Next post: modify game service to use a Node.js server for game move processing.

Keep tuned!

Angel “Java” Lopez