html5 canvas-2. Utilisez Canvas pour créer un petit jeu de devinettes de lettres_html5.

Aujourd'hui, nous allons utiliser Canvas pour créer un petit jeu de devinettes de lettres. Jetons d'abord un coup d'œil aux rendus.

La conception du jeu est très simple. Le système sélectionnera au hasard l'une des 26 lettres de a à z et l'enregistrera. Lorsque vous entrez une lettre sur le clavier, le système vous demandera si le caractère est correct. est plus petit ou plus grand que la lettre que vous êtes en train de saisir. Le jeu ne se termine que lorsque vous saisissez la bonne lettre.
Ce qui suit présente certaines variables qui doivent être utilisées dans le code js et leurs significations. Le système initialisera ces variables au début.
devine : le nombre de fois où l'utilisateur a deviné des lettres ;
message : instructions pour aider les joueurs à jouer au jeu
lettres : un tableau qui enregistre 26 lettres anglaises
aujourd'hui : l'heure actuelle ;
letterToGuess : les lettres sélectionnées par le système sont les lettres que vous devez deviner ;
higherOrLower : demande à l'utilisateur si la lettre actuellement saisie est supérieure ou inférieure à la réponse ;
lettersGuessed : les lettres que l'utilisateur a ; déjà deviné ;
gameOver : si le jeu est terminé.

Copier le code

Le code est le suivant :

var devine = 0; 🎜>var message = "Devinez la lettre de a (inférieur) à z (supérieur)";
var letter = ["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 aujourd'hui = new Date(); "";
var upperOrLower = "";
var letterGuessed;
var gameOver = false;


Ci-dessous, nous présentons l'événement qui répond à la fenêtre contextuelle du clavier pour déterminer si les lettres saisies par l'utilisateur sont la bonne réponse :

Copiez le codeLe code est le suivant :

$(window). bind('keyup', eventKeyPressed);

Copier le codeLe code est le suivant :

function eventKeyPressed(e) {

//Déterminez d'abord si le jeu est terminé
if (!gameOver) {
//Obtenir la lettre d'entrée
var letterPressed = String.fromCharCode(e .keyCode);
//Faire le traitement des minuscules
letterPressed = letterPressed.toLowerCase(); de jeux par 1
devines
//Enregistrez les lettres saisies dans les lettres devinées Array
lettersGuessed.push(letterPressed); ils sont cohérents, le jeu est terminé
if (letterPressed == letterToGuess) {
gameOver = true
} else {
//Obtenir la position de la réponse dans le tableau des lettres
var letterIndex = letter.indexOf(letterToGuess);
//Obtenir la position de la lettre d'entrée dans le tableau de lettres
var GuessIndex = letterindexOf(letterPressed); 🎜>//Jugez la taille
if (guessIndex < 0) {
higherOrLower = "Ce n'est pas une lettre"
} else if (guessIndex > letterIndex) {
higherOrLower = " La lettre est inférieure à ce que vous avez entré";
} else {
higherOrLower = "La lettre est supérieure à ce que vous avez entré";
}
}
//Redessiner le canevas
drawScreen();
}
}


Une chose à noter ici est que lorsque nous devons modifier l'image dans le canevas Quand, l'objet canevas entier est généralement redessiné. Ainsi, chaque fois que nous devinons une lettre, drawScreen sera exécuté pour dessiner tous les objets sur toute la toile.
Jetons un coup d'œil à ce que fait drawScreen.

Copier le code

Le code est le suivant :

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(aujourd'hui, 150, 20);
//message
context.fillStyle = '#ff0000';
context.font = '14px_sans';
context.fillText(message, 125, 40);
//devine
context.fillStyle = '#109910';
context.font = '16px_sans';
context.fillText('Devinettes :' devine, 215, 60);
//supérieur ou inférieur
context.fillStyle = '#000000';
context.font = '16px_sans';
context.fillText('Higher ou Lower:' upperOrLower, 150, 125);
//lettres devinées
context.fillStyle = '#ff0000';
context.font = '16px_sans';
context.fillText('Lettres devinées :'lettersGuessed.toString(), 10, 260);
if (gameOver) {
context.fillStyle = "#FF0000";
context.font = "40px _sans";
context.fillText("Vous l'avez compris !", 150, 180);
}
}

代码很简单，就是绘制背景，还有文字信息。下面我们介绍导入图像的功Il s'agit de « Exporter une image sur toile »

复制代码

代码如下 :

$('#createImageData').click(function () {
window.open(theCanvas.toDataURL(), 'canvasImage' , 'left=0,top=0,width=' theCanvas.width ',height=' theCanvas.height ',toolbar=0,resizab le=0'
});

大家还是直接运行demo，查看最终效果吧。demo下载地址：html5canvas.guessTheLetter.zip