Shulou(Shulou.com)06/03 Report--

This article shows you how to use HTML5CanvasAPI to make a simple crossword puzzle, the content is concise and easy to understand, can definitely brighten your eyes, through the detailed introduction of this article, I hope you can get something.

Don't say a word, first put up the effect picture and the source code ~

HTML code

XML/HTML Code copies content to the clipboard

Your browser does not support HTML5 Canvas

JS code

JavaScript Code copies content to the clipboard

/ * @ author Rafael * / window.addEventListener ("load", eventWindowLoaded, false); var Debugger = function () {}; Debugger.log = function (message) {try {console.log (message);} catch (exception) {return;}} function eventWindowLoaded () {canvasApp ();} function canvasSupport () {return Modernizr.canvas } function canvasApp () {var guesses = 0; var message = "Guess The Letter From a (lower) to z (higher)" Var letters = ["a", "b", "c", "d", "e", "f", "g", "h", "I", "j", "k", "l", "m", "n", "o", "p", "Q", "r", "s", "t", "u", "v", "w", "x", "y", "z"] Var today = new Date (); var letterToGuess = "; var higherOrLower ="; var letterGuessed = []; var gameOver = false; if (! canvasSupport ()) {return;} var theCanvas = document.getElementById ("canvas_guess_the_letter"); var context = theCanvas.getContext ("2d"); initGame () Function initGame () {var letterIndex = Math.floor (Math.random () * letters.length); letterToGuess = letters [letterIndex]; guesses = 0; lettersGuessed = []; gameOver = false; window.addEventListener ("keyup", eventKeyPressed, true); var formElement = document.getElementById ("createImageData"); formElement.addEventListener ('click', createImageDataPressed, false) DrawScreen ();} function eventKeyPressed (e) {if (! gameOver) {var letterPressed = String.fromCharCode (e.keyCode); letterPressed = letterPressed.toLowerCase (); guesses++; letterGuessed.push (letterPressed); if (letterPressed = = letterToGuess) {gameOver = true } else {letterIndex = letters.indexOf (letterToGuess); guessIndex = letters.indexOf (letterPressed); if (guessIndex < 0) {higherOrLower = "Please enter correct characters";} else if (guessIndex < letterIndex) {higherOrLower = "small" } else {higherOrLower = "big";}} drawScreen ();}} function drawScreen () {/ / background context.fillStyle = "# ffffaa"; context.fillRect (0,0500,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,20) / / message context.fillStyle = "# FF0000"; context.font = "14px _ sans"; context.fillText (message, 125,40); / / number of guesses context.fillStyle = "# 109900"; context.font = "16px _ sans"; context.fillText ("guesses:" + guesses, 215,60) / / Big or small context.fillStyle = "# 000000"; context.font = "16px _ sans"; context.fillText ("Big or small:" + higherOrLower, 150,135); / / characters already guessed context.fillStyle = "# FF0000"; context.font = "16px _ sans" Context.fillText ("characters already guessed:" + letterGuessed.toString (), 10,260); if (gameOver) {context.fillStyle = "# FF0000"; context.font = "40px _ sans"; context.fillText ("you guessed it", 150180) } function createImageDataPressed (e) {window.open (theCanvas.toDataURL (), "canvasImage", "left=0, top=0, width=" + theCanvas.width+ ", height=" + theCanvas.height+ ", toolbar=0, resizable=0");}}

As can be seen from the name of the game, the game is a crossword game. Each game system will automatically generate a letter, the player will press the keyboard to guess which letter is.

For example, s is generated, and if the player presses h, the game will prompt "smaller" because the index of h in the English letter is higher than that of s.

The variables involved in the case.

Guesses: guesses

Message: text prompts to guide users on how to play the game

Letters: a text array that holds a collection of words we want to guess. This example uses a to z

Today: today's date

LetterToGuess: text to guess

HigherOrLower: is it "big" or "small"

LetterGuessed: text that has been guessed

GameOver: whether the game is over or not is a Boolean variable. It starts with false, and then sets it to true.

Declaration of variables

JavaScript Code copies content to the clipboard

Var guesses = 0; var message = "Guess The Letter From a (lower) to z (higher)" Var letters = ["a", "b", "c", "d", "e", "f", "g", "h", "I", "j", "k", "l", "m", "n", "o", "p", "Q", "r", "s", "t", "u", "v", "w", "x", "y", "z"]; var today = new Date () Var letterToGuess = ""; var higherOrLower = ""; var letterGuessed = []; var gameOver = false

Initialize the game

JavaScript Code copies content to the clipboard

Function initGame () {var letterIndex = Math.floor (Math.random () * letters.length); letterToGuess = letters [letterIndex]; guesses = 0; lettersGuessed = []; gameOver = false; window.addEventListener ("keyup", eventKeyPressed, true); var formElement = document.getElementById ("createImageData"); formElement.addEventListener ('click', createImageDataPressed, false); drawScreen () }

By using the random () function and floor () function of Math, the text to be guessed is generated from an array of text.

And the "keyup" event is monitored when the user presses the keyboard, and the pressed key value is generated according to the passed event.

Since guessing games are not case-sensitive, in order to prevent users from pressing uppercase letters, we need to convert values to lowercase.

Number of guesses + 1

The guessed text is added to the already guessed text array.

JavaScript Code copies content to the clipboard

Var letterPressed = String.fromCharCode (e.keyCode); letterPressed = letterPressed.toLowerCase (); guesses++; letterGuessed.push (letterPressed)

All that's left is to judge the big and the small.

Through the indexOf function, we can determine the text to guess and the index value of the text we enter on the character set.

If we type higher, it says "smaller" and vice versa "bigger".

When the end user guesses the right text, we will display "you guessed right" in a large font in the center.

JavaScript Code copies content to the clipboard

LetterIndex = letters.indexOf (letterToGuess); guessIndex = letters.indexOf (letterPressed); if (guessIndex < 0) {higherOrLower = "Please enter correct characters";} else if (guessIndex < letterIndex) {higherOrLower = "small";} else {higherOrLower = "big";}

At this point, this function is almost complete, we also have a small function, that is, you can grab the screen results by pressing the button.

The function used is toDataUrl (). If you are interested, please study it.

The above content is how to use HTML5CanvasAPI to make a simple crossword puzzle. Have you learned the knowledge or skills? If you want to learn more skills or enrich your knowledge reserve, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.