Creating the Memory Game

Starting a new game

When the player starts a new game, we call the startLevel method with the key of the selected difficulty in the difficulties map (ie; easy, medium, or hard). We then begin by setting the globals gameTime and lastFrameTime to 0, and the gameState properties screen to playing, the newBest flag to false, and the mode to the function argument diff.

We also set the visibleFace global to null, as all faces are initially hidden.

function startLevel(diff)
{
	gameTime		= 0;
	lastFrameTime		= 0;
	gameState.screen	= 'playing';
	gameState.newBest	= false;
	gameState.mode		= diff;
	visibleFace		= null;

Also, we'll empty the global activeFaces and grid arrays:

	activeFaces.length	= 0;	
	grid.length 		= 0;

The global offsetX, offsetY variables are calculated by subtracting the grid dimensions, in pixels (calculated from the grid width and height multiplied by the sprite width and height) from the Canvas element width and height properties, and dividing the results by 2.

	offsetX = Math.floor((document.getElementById('game').width -
			(difficulties[diff].width * spriteSheet.spriteW)) / 2);
	
	offsetY = Math.floor((document.getElementById('game').height -
			(difficulties[diff].height * spriteSheet.spriteH)) / 2);

We'll now create a new array, faceTypes, which we'll fill with an entry for each available sprite index.

	var faceTypes = [];
	for(var i = 0; i < (spriteSheet.cols * spriteSheet.rows); i++)
	{
		faceTypes.push(i);
	}

Also we need an array called gridPlaces; we'll create an index for each place we need to fill based on the current difficulties width x height, and fill the corresponding index in the grid global with a temporary null entry.

	var gridPlaces = [];
	for(var i = 0; i < (difficulties[diff].width *
		difficulties[diff].height); i++)
	{
		grid.push(null);
		gridPlaces.push(i);
	}

Now we add our pairs to the grid. We loop through the total number of grid index divided by 2:

	for(var i = 0; i < Math.floor(
		(difficulties[diff].width * difficulties[diff].height) / 2); i++)
	{

We now select a random face type from those available in the faceTypes array.

		var idxF = Math.floor(Math.random() * faceTypes.length);
		var idxFace = faceTypes[idxF];

We now insert 2 faces of this type into random places on the grid, by twice executing a piece of code that randomly selects an available space on the grid from the gridPlaces array:

		for(var f = 0; f < 2; f++)
		{
			var idx = Math.floor(Math.random() * gridPlaces.length);
			var idxPlace = gridPlaces[idx];

Into our grid array we insert a new Face object with the faceType we have chosen and the idxPlace that was randomly picked, converted into their x, y coordinates:

			grid[idxPlace] = new Face(
				idxPlace % difficulties[diff].width,
				Math.floor(idxPlace / difficulties[diff].width),
				idxFace % spriteSheet.cols,
				Math.floor(idxFace / spriteSheet.cols));

We now remove idxPlace from the gridPlaces array, as this index is no longer free, and exit the loop for placing the matching pair.

			gridPlaces.splice(idx, 1);
		}

Now we've placed the Face and its matching partner, we remove the idxFace from the faceTypes array and close the outer loop. We can also go ahead and close the function once this loop is completed.

		faceTypes.splice(idxF, 1);
	}
}
Page loaded in 0.012 second(s).