Creating the Memory Game

Drawing Won screen

If the player has just won a game, we'll show the winning screen with the drawWon method until the player clicks somewhere to return to the menu. We begin by setting the font and drawing the difficulties.name property of the current difficulty.

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

We then change the font as desired, and draw the time taken to complete the level, formatting for minutes and seconds.

	ctx.font = "italic 12pt sans-serif";
	var t = finishedTime;
	var cTime = "Completed in ";
	if((t/1000)>=60)
	{
		cTime+= Math.floor((t/1000)/60) + ":";
		t = t % (60000);
	}
	cTime+= (Math.floor(t/1000) < 9 ? "0" : "") + Math.floor(t/1000);
	ctx.fillText(cTime, 150, 120);

If the player has achieved a new best time, tell them so on this screen:

	if(gameState.newBest)
	{
		ctx.fillText("New best time!", 150, 140);
	}

Otherwise, show the current best time for this difficulty.

	else
	{
		t = difficulties[gameState.mode].bestTime;
		cTime = "Best time ";
		if((t/1000)>=60)
		{
			cTime+= Math.floor((t/1000)/60) + ":";
			t = t % (60000);
		}
		cTime+= (Math.floor(t/1000) < 9 ? "0" : "") +
			Math.floor(t/1000);
		ctx.fillText(cTime, 150, 140);
	}

Finally, draw text to prompt the player that they can click somewhere to return to the menu, and close the function.

	ctx.fillText("(Click to jump to menu)", 150, 200);
}
Page loaded in 0.01 second(s).