Creating the Memory Game

Game updates and logic

Every frame some logic processing needs to be done before we start drawing. We'll do this with a function called updateGame.

function updateGame()
{

We begin by checking which screen is being drawn. If the current screen is the menu then we only need to do processing if there's a new click event in the mouseState object:

	if(gameState.screen=='menu')
	{
		if(mouseState.click!=null)
		{

If there is, we loop through all of the difficulties, and see if the click y position falls between the first and second menuBox values for the difficulty. If it does, we start a new game at the selected difficulty level and break out of the loop.

			for(var d in difficulties)
			{
				if(mouseState.click[1]>=difficulties[d].menuBox[0] &&
					mouseState.click[1]<=difficulties[d].menuBox[1])
				{
					startLevel(d);
					break;
				}
			}

After this check, we're done with processing for the menu screen, so we clear the mouseState.click event and exit out of this if block:

			mouseState.click = null;
		}
	}

Next, we handle processing for the won screen. This is even simpler - we just check for a click event. If one has occured, we just change the current screen to menu and clear the click event.

	else if(gameState.screen=='won')
	{
		if(mouseState.click!=null)
		{
			gameState.screen = 'menu';
			mouseState.click = null;
		}
	}

Finally, we do any processing for the playing screen if we're not currently on the menu or won screens. We begin by looping through all of the activeFaces and calling their update method.

	else
	{
		for(var x in activeFaces) { activeFaces[x].update(); }

We then filter the activeFaces array to remove any entries that are no longer flagged as active:

		activeFaces = activeFaces.filter(function(e) {
			return e.active;
		});

We now need to handle any click events:

		if(mouseState.click!=null)
		{

We begin by creating a shorthand reference, cDiff, to the current game difficulty level.

			var cDiff = difficulties[gameState.mode];

Next, we check if the click actually fell on the game grid. The x, y position of the event must be between the offsetX, offsetY positions and the grid width and height, in pixels, calculated by the number of columns / rows multiplied by the sprite width, height, added to the offsets:

			if(mouseState.click[0]>=offsetX &&
				mouseState.click[1]>=offsetY &&
				mouseState.click[0]<=(cDiff.width*spriteSheet.spriteW)+offsetX &&
				mouseState.click[1]<=(cDiff.height*spriteSheet.spriteH)+offsetY)
			{

If the event fell on the grid, we culculate the column and row it fell on by subtracting the offsets from the event coordinates, and dividing the x, y values by the sprite width and height properties (and then rounding down this result):

				var gridX = Math.floor((mouseState.click[0]-offsetX) /
					spriteSheet.spriteW);
				var gridY = Math.floor((mouseState.click[1]-offsetY) /
					spriteSheet.spriteH);

Now we can call the click method for the Face that was clicked by calculating its index in the grid from these values.

				grid[((gridY*cDiff.width)+gridX)].click();

We're done with the click handling for the grid, but we'll also use any click event at the bottom of the Canvas to allow the Player to exit the current level:

			}
			else if(mouseState.click[1] >= 380)
			{
				gameState.screen = 'menu';
			}

We can then clear the click event and leave this function.

		}
		mouseState.click = null;
	}
}
Page loaded in 0.014 second(s).