An Example: Building a Tanks Game

We've built two simple game prototypes on top of the framework described in the previous section: a tanks game and a group jigsaw puzzle.

In this section, we describe how the tanks game was built. We hope that by showing how we built our prototype on this framework, we will show how you can build your game on top of the framework as well. The tanks game, the jigsaw puzzle, and the framework are available in source-code form at the Intel Software Network site.

Tanks Game Client Code

The client-side code for the tanks game deals with player creation, player actions, and game restart.

Player Creation

When a player opens their browser to the player screen, they are presented with a simple HTML form as shown in Figure 4. You can download the HTML source code by clicking here.

Figure 4 - The player creation form.

When the player-create form is POSTed, PHP code extracts the player name and team color and then uses the game framework to both identify a unique number for the player and add a new player instance into the game database, as shown in the code in Figure 5.

public static function createPlayer( $name, $team ) {
// get number for player
$mates = $GLOBALS['db']->select(array(
'table' => 'players',
'fields' => array( 'id', 'teamNumber' ),
'condition' => array( 'team' => $team )
));

$number = 0;
if( !empty($mates) ) {
$next = $mates[0]['teamnumber'];
foreach( $mates as $mate ) {
if( $next < $mate['teamnumber'] ) {
$next = $mate['teamnumber']; } }
$number = ( $next + 1 ) % self::$NUM_TANKS; }

// create player
$_SESSION['me'] = new Player( $name, $team, $number );
// join the game
$_SESSION['me']->join( $GLOBALS['game'] );
}

Figure 5 - Adding a player to the game database.

At this point, the player is created and can begin to input actions (commands) into the game.

Player Actions

Player actions, or commands, are captured via JavaScript running in the client's browser after they have successfully created a player instance. This code, as show in Figure 6, first parses the input and then POSTs a message to the game server containing an indication of the player's command. (This code uses the jQuery JavaScript library to POST the message.)

// Player Controls:
// these are mappings to keyboard keys
var Control = {
Forward: 38, // arrow key up
Back: 40, // arrow key down
RotateLeft: 37, // arrow key left
RotateRight: 39, // arrow key right
Shoot: 32, // space bar
Quit: -1
};
// _execute is called when a user presses a key
var _execute = function( _opts ) {
switch( _opts.keyCode || _opts.which || _opts.other ) {
case Control.Forward: // move forward
_action.type = Command.Move;
_action.message = 'forward';
break;
case Control.Back: // move back
_action.type = Command.Move;
_action.message = 'back';
break;
…
default:
_action.message = '';
}

if( _action.message != '' ) { // send player command to server
$.post( _url, _action, function( gameID ) { … } }

Figure 6 - Handing Player commands in JavaScript.

At this point, the client code is nearly complete. We've created a player and passed the player's commands on to the game server. All that is left is to detect when the game has finished or restarted.

Game Restart

The game framework makes it easy to detect when a game has either ended or restarted. Each time a player command is entered, the response from the game server is the current game identifier. We check whether this identifier has changed, and if it has, we simply call createPlayer again (see Figure 5).