Annex

The Annex application is a good example of how to design a person-against-person or person-against-machine web application. The UI was created using HTML and CSS and the AI engine was implemented completely in JavaScript.

The Annex application doesn't use any Tizen specific API calls, so it can be run in many popular browsers that support HTML5. The application consists of a view layer, written by HTML5, and a control layer, which contains the AI engine and the game process control module, written in JavaScript. It also uses JQuery, a fast and concise JavaScript Library for rapid web development.

The Annex game demonstrates some interesting features:

  • JavaScript implementation of a game AI engine
  • Control DOM object dynamically with JavaScript & CSS
  • Usage of classes, scope, and data encapsulation within JS

Tutorial:

AI engine

The AI engine is based on the Minimax Game(Adversarial) Tree algorithm. In game tree theory, searching depth and accuracy of the chessboard evaluation method are the most important aspects related to game AI ability. In Annex, the default searching depth is 3, implying the difficulty level of the game, and can be increased to a higher value, like 4 or 5. The higher searching depth means greater difficulty, more CPU time and memory consumption, and slower computer player response. In the js/annex.js file, this is mapped to the "level" property:

level: 3,

For the evaluation method, Annex integrates three aspects: mobility, number of pieces, and position value.

  • Mobility is how many places the current player could possibly set a stone.
  • Number of pieces is how many of each player's markers are on the board.
  • Position value means how favorable each position is on the reversi board.

In a reversi game, occupying valuable places on the board is very important. In the js/annex.js file, the evaluation function is: evaluate: function(place, _color, _board, _level, _heap)

The parameters are:

  • "place" means where to set the stone
  • "_color" is the stone color
  • "_board" is the chessboard before setting the stone
  • "_heap" is the game tree data structures
  • "_level" is a flag pointing out whether to stop searching the game tree

At first, the function sets the stone on the board to get a new chessboard, and then, evaluates the new board on mobility and the value of the pieces. The value of the pieces is made up of the value of the place where the pieces are set, as well as the number of pieces. Then, the AI engine can evaluate each move and choose the best one. In js/annex.js, the function bestPlace(possible) does this:

ret = possible[0];
var value = this.evaluate(ret);
for (var p=1; p<possible.length; p++) {
    var v = this.evaluate(possible[p]);
    if (v > value){
        value = v;
        ret = possible[p];
    }
}

Here, the variable "possible" means a collection of possible setting places for a player, according to the Reversi rules.

Control DOM object dynamically

In some cases, we need to make some DOM objects visible/invisible. For Annex, we used a css swither named "display_none":

.display_none {
   display:none;
   z-index:-1;
}

We can use this to control whether DOM objects display on screen (with the Jquery Javascript library) like this:

$('#go_visible').removeClass('display_none');
$('#go_invisible').addClass('display_none');

In Annex, this is used in many places, for example, in js/annex.js, when controlling the help panel:

showHelp: function() {
    this.playSound('snd_navclick');
    this.endConfigure();
    $('#help').removeClass('display_none');
},
exitHelp: function() {
    this.playSound('snd_navclick');
    $('#help').addClass('display_none');
},

When you need to show the help panel, the showHelp() function makes the DOM object with the id attribute value "help" visible on screen. The exitHelp() function is called to disable it.

Screenshots: 

Annex Title Page
Annex Game View