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 ";
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, 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.
if(grid[g].currentState=='hidden')
{
ctx.beginPath();
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);
ctx.closePath();
ctx.fill();
}
Otherwise, the Face is drawn from the sprites image to the Canvas:
else
{
ctx.drawImage(sprites,
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);
}