Writing a game loop

In game apps, the refresh rate of the screen is vital; it must be high enough to ensure agreeable and realistic gameplay. Refreshing means periodically redrawing the screen. This recipe shows you how to build that in your app. It is illustrated in the code of gameloop, a simple version of the well-known memory game that uses the boarding package by Dzenan Ridzanovic. The goal is to click quickly enough to get identical pairs of the colored squares. Start it by running game.html (don't use pub serve for the launch, select Run and then Manage Launches, and in Pub Settings, uncheck use pub serve to serve the application).

How to do it...

1. The game starts off in main() of game.dart (only the relevant parts of the code are shown here):

   import'dart:async';
   import'dart:html';
   // ... other code
   part'model/memory.dart';
   part'view/board.dart';
   
   main() {
     new Board(new Memory(4), querySelector('#canvas')).draw();
   }

2. In the constructor of the Board class, the game loop is started with...