Creating multiple instances of game assets

The first thing you have to do in the making of a Concentration game is draw the tiles that you will use in the game. Here are the pictures used for the covered tiles and the eight different tiles that could be potentially matched, all saved in the assets folder, as explained in the previous chapter:

Each tile is a 64 x 64 PNG file, where the covered tile is called cover.png, while the tile to be matched is named with a progressive number from 0 to 7: tile_0, tile_1, until tile_7. This is because the actual board tile values will be stored in an array whose values will range from 0 to 7, and it will be easy to assign value 0 to tile_0, value 1 to tile_1, and so on.

With these nine files in the assets folder, you are ready to load them, thanks to the loadassets.js file located in the src folder of our project:

var gameResources = ["assets/cover.png",
  "assets/tile_0.png",
  "assets/tile_1.png",
  "assets/tile_2.png",
  "assets/tile_3.png",
  "assets...