One improvement that certainly comes to mind is the use of pictures instead of colors as shown in the Using images screenshot. How difficult would that be? It turns out that this is surprisingly easy, because we already have the game logic firmly in place!

In the images folder, we supply a number of game pictures. Instead of the color property, we give the cell a String property (image), which will contain the name of the picture file. We then replace utilcolor.dart with utilimages.dart, which contains an imageList variable with the image filenames. In util andom.dart, we will replace the color methods with the following code:

String randomImage() => randomListElement(imageList); 

The changes to memory.dart are also straightforward: replace the usedColor list with List usedImages = []; and the _getFreeRandomColor method with _getFreeRandomImage, which will use the new list and method:

List usedImages = [];

String _getFreeRandomImage() {
    var image;
    do {
      image = randomImage();
    } while (usedImages.any((i) => i == image));
    usedImages.add(image);
    return image;
}

In board.dart, we replace _colorBox(cell) with _imageBox(cell). The only new thing is how to draw the image on canvas. For this, we need ImageElement objects. Here, we have to be careful to create these objects only once and not over and over again in every draw cycle, because this produces a flickering screen. We will store the ImageElements object in a Map:

var imageMap = new Map<String, ImageElement>();

Then, we populate this in the Board constructor with a for…in loop over memory.cells:

    for (var cell in memory.cells) {
      ImageElement image = new Element.tag('img'),      (1)
      image.src = 'images/${cell.image}';               (2)
      imageMap[cell.image] = image;                     (3)
    }

We create a new ImageElement object in line (1), giving it the complete file path to the image file as a src property in line (2) and store it in imageMap in line (3). The image file will then be loaded into memory only once. We don't do any unnecessary network access, but effectively cache the images. In the draw cycle, we will load the image from imageMap and draw it in the current cell with the drawImage method in line (4):

  if (cell.hidden) {
      // see previous code
  } else {
      ImageElement image = imageMap[cell.image];
      context.drawImage(image, x, y); // resize to cell size (4)
  }

Using images

Perhaps, you can think of other improvements? Why not let the player specify the game difficulty by asking the number of boxes. It is 16 now. Check whether the input is a square of an even number. Do you have enough colors to choose from? Perhaps, dynamically building a list with enough random colors would be a better idea. Calculating and storing the statistics discussed in the model would also make the game more attractive. For ideas, see the Using an audio library – Collision clones section. Another enhancement from the model is to support different catalogs of pictures. Go ahead and exercise your Dart skills!