Creating the Memory Game

Drawing the game while playing

To draw our playing screen, whilst a game is in progress, we use the drawPlaying function. We begin by setting the font and drawing the current difficulty near the top of the screen.

function drawPlaying()
	ctx.textAlign = 'center';
	ctx.font = "bold 20pt sans-serif";
	ctx.fillStyle = "#000000";
	ctx.fillText(difficulties[gameState.mode].name, 150, 25);

We now change the font and draw the current number of minutes/seconds elapsed:

	ctx.textAlign = 'left';
	ctx.font = "italic 12pt sans-serif";
	var t = gameTime;
	var cTime = "Time ";
		cTime+= Math.floor((t/1000)/60) + ":";
		t = t % (60000);
	cTime+= (Math.floor(t/1000) < 9 ? "0" : "") + Math.floor(t/1000);
	ctx.fillText(cTime, 100, 45);

We now change the drawing fill colour to a yellow we'll be using the show the "backs" of the faces. Then, we begin looping through all of the faces in the grid:

	ctx.fillStyle = "#dddd00";
	for(var g in grid)

If the Face at the current grid index is marked as hidden in its currentState, we just draw a filled circle at this position.

			ctx.arc(offsetX+grid[g].pos[0] + (spriteSheet.spriteW/2),
				offsetY+grid[g].pos[1] + (spriteSheet.spriteH/2),
				Math.round(spriteSheet.spriteW/2), 0, Math.PI*2);

Otherwise, the Face is drawn from the sprites image to the Canvas:

				grid[g].spritePos[0], grid[g].spritePos[1],
				spriteSheet.spriteW, spriteSheet.spriteH,
				offsetX+grid[g].pos[0], offsetY+grid[g].pos[1],
				spriteSheet.spriteW, spriteSheet.spriteH);

That's it for the drawing loop - we can now close it, and set the font to draw the "Back to menu" link, before exiting the function.

	ctx.fillStyle = "#000000";
	ctx.textAlign = 'right';
	ctx.fillText("<< Back to menu", 290, 390);
Page loaded in 0.013 second(s).