Spiral 1 – drawing the board

The app starts with main() in educ_memory_game.dart:

library memory;

import 'dart:html';
import 'dart:async';

part 'board.dart';

void main() {
  // Get a reference to the canvas.
  CanvasElement canvas = querySelector('#canvas');          (1)
  new Board(canvas);                                        (2)
}

Note

For code files of this section refer to chapter 7\educ_memory_game\spirals\s01 in the code bundle.

As we did in Chapter 5, Handling the DOM in a New Way, we'll draw a board on a canvas element. So, we need a reference that is given in line (1). The Board view is represented in code as its own Board class in the board.dart file. Since everything happens on this board, we construct its object with canvas as argument (line (2)). Our game board is periodically drawn as a rectangle in line (4) by using the animationFrame method from the Window class in line (3):

part of memory;

class Board {
  // The board is drawn every INTERVAL in ms.
  static const int INTERVAL...