Download the game project as a zip from the preceding URL, unzip it, and open it in Dart Editor. The code that is the starting part of a new board game can be found in the lib folder; the library that is boarding (in boarding.dart) imports the view classes Surface and Shape:

library boarding;

import 'dart:html';
import 'dart:math';

import 'package:boarding/boarding_model.dart';

part 'view/shape.dart';
part 'view/surface.dart';

The script boarding_model.dart declares the library boarding_model, which imports the model classes Grid, Cell, Cells, and some utility methods:

library boarding_model;

import 'dart:math';

part 'model/cell.dart';
part 'model/grid.dart';

part 'util/color.dart';
part 'util/random.dart';

By building upon these classes, you can build the specific board game you want. Concrete implementations can be found in the folder example that contains a memory game and a tic-tac-toe game (ttt). For example, the memory game start up script imports two libraries, and adds its own specific Memory class, which inherits from the Grid and Board classes that extend Surface:

library memory;

import 'dart:async';
import 'dart:html';
import 'package:boarding/boarding_model.dart';
import 'package:boarding/boarding.dart';

part 'model/memory.dart';
part 'view/board.dart';

playAgain(Event e) {
  window.location.reload();
}

main() {
  new Board(new Memory(4), querySelector('#canvas')).draw();
  querySelector('#play').onClick.listen(playAgain);
}

The Surface class has a draw() method, which draws lines (if needed), and cells:

draw() {
    clear();
    if (withLines) lines();
    cells();
  }

The classes Circle, Rectangle, Square, Line, and Tag (for a text) in shape.dart know how to draw themselves. The Grid class in the model folder knows how to construct itself with the objects of class Cell. The cell.dart file has the code for the class Cell, which can find out if two cells intersect, and it also has a collection of cells. Use this project as a starting point to build your own games!

Another way of doing this is by using the animationFrame method from the window class. With this technique, we start gameLoop in the main() function and let it call itself recursively, as shown in the following code:

main() {
// redraw
    window.animationFrame.then(gameLoop);
}

gameLoop(num delta) {
    // animation code;
    window.animationFrame.then(gameLoop);
}