• Choose a category
• All
• Classic-Fiction

}

}

drawScreen();

}

}

The drawScreen() Function

Now we get to drawScreen(). The good news is that we have seen almost all of this before—there are only a few differences from “Hello World!” For example, we paint multiple variables on the screen using the Canvas Text API. We only set context.textBaseline = 'top'; once for all the text we are going to display. Also, we change the color using context.fillStyle, and the font with context.font.

The most interesting thing we display here is the content of the lettersGuessed array. On the canvas, the array is printed as a set of comma-separated values, like this:

Letters Guessed: p,h,a,d

To print this value, all we do is use the toString() method of the lettersGuessed array, which prints out the values of an array as—you guessed it—comma-separated values:

context.fillText ("Letters Guessed: " + lettersGuessed.toString(), 10, 260);

We also test the gameOver variable. If it is true, we put You Got It! on the screen in giant 40px text so the user knows he has won.

Here is the full code for the function:

function drawScreen() {

//Background

context.fillStyle = "#ffffaa";

context.fillRect(0, 0, 500, 300);

//Box

context.strokeStyle = "#000000";

context.strokeRect(5, 5, 490, 290);

context.textBaseline = "top";

//Date

context.fillStyle = "#000000";

context.font = "10px _sans";

context.fillText (today, 150 ,10);

//Message

context.fillStyle = "#FF0000";

context.font = "14px _sans";

context.fillText (message, 125, 30);

//Guesses

context.fillStyle = "#109910";

context.font = "16px _sans";

context.fillText ('Guesses: ' + guesses, 215, 50);

//Higher Or Lower

context.fillStyle = "#000000";

context.font = "16px _sans";

context.fillText ("Higher Or Lower: " + higherOrLower, 150,125);

//Letters Guessed

context.fillStyle = "#FF0000";

context.font = "16px _sans";

context.fillText ("Letters Guessed: " + lettersGuessed.toString(), 10, 260);

if (gameOver) {

context.fillStyle = "#FF0000";

context.font = "40px _sans";

context.fillText ("You Got It!", 150, 180);

}

}

Exporting Canvas to an Image

Earlier, we briefly discussed the toDataUrL() property of the Canvas object. We are going to use that property to let the user create an image of the game screen at any time. This acts almost like a screen-capture utility for games made on Canvas.

We need to create a button in the HTML page that the user can press to get the screen capture. We will add this button to

In the init() function, we retrieve a reference to that form element by using the getElementById() method of the document object. We then set an event handler for the button “click” event as the function createImageDataPressed():

var formElement = document.getElementById("createImageData");

formElement.addEventListener('click', createImageDataPressed, false);

In canvasApp(), we define the createImageDataPressed() function as an event handler. This function calls window.open(), passing the return value of the Canvas.toDataUrl() method as the source for the window. Since this data forms a valid PNG, the image is displayed in the new window:

function createImageDataPressed(e) {

window.open(theCanvas.toDataURL(),"canvasImage","left=0,top=0,width=" +

theCanvas.width + ",height=" + theCanvas.height +",toolbar=0,resizable=0");

}

NOTE

We will discuss this process in depth in Chapter 3.

The Final Game Code

Example 1-4 shows the full code for the Guess The Letter game.

Example 1-4. Guess The Letter game