Aujourd'hui, nous allons utiliser Canvas pour créer un petit jeu de lettres de devinettes, et tirons d'abord les rendus.
La conception du jeu est très simple. Le système sélectionnera au hasard l'une des 26 lettres d'AZ et la sauvera. Lorsque vous entrez une lettre sur le clavier, le système vous invitera si les caractères corrects sont plus petits ou plus grands que la lettre que vous entrez actuellement, et le jeu ne se terminera pas avant d'entrer les lettres correctes.
Ce qui suit introduit certaines variables qui doivent être utilisées dans le code JS et leurs significations. Le système initialisera ces variables au début.
Guess: le nombre de fois que l'utilisateur devine la lettre;
Message: Instructions pour aider les joueurs à jouer au jeu;
Lettres: Économisez un tableau de 26 lettres anglaises;
Aujourd'hui: l'heure actuelle;
Lettetoguess: les lettres sélectionnées par le système, c'est-à-dire les lettres que vous devez deviner;
Higherorlower: invite l'utilisateur si la lettre actuellement entrée est plus grande ou plus petite que la réponse;
Lettres à la lettre: lettres que l'utilisateur a devinés;
Gameover: si le jeu est terminé.
var suppositions = 0;
var message = "Devinez la lettre d'un (inférieur) à z (plus haut)";
var lettres = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "v", "w" "" "" "" "".
var aujourd'hui = new Date ();
varttoguess = "";
var hautorlower = "";
var lettresuded;
var gameover = false;
Ci-dessous, nous présentons l'événement qui répond à la fenêtre contextuelle du clavier, qui est utilisé pour déterminer si les lettres entrées par l'utilisateur sont la bonne réponse:
$ (window) .bind ('keyup', eventKeyPressed);
fonction eventKepreressed (e) {
// déterminer d'abord si le jeu est terminé
if (! gameover) {
// Obtenez des lettres d'entrée
var typressed = string.fromCharcode (e.KeyCode);
// fait du traitement minuscule
Lestrepregh = Lettepresdred.tolowerCase ();
// Ajouter 1 numéro de jeu
devines ++;
// Enregistrez les lettres d'entrée au tableau des lettres devinées
LettersGuessed.push (typographier);
// juger si les lettres d'entrée et la réponse sont cohérentes, si le jeu se termine si la même chose est vraie, le jeu sera terminé
if (typressé ==ttoguess) {
gameOver = true;
} autre {
// Obtenez la position de réponse dans le tableau alphabétique
var LetterIndex = Letters.Indexof (ttogUess);
// Obtenez la position de la lettre d'entrée dans le tableau alphabétique
var devinerIndex = Letters.Indexof (typographier);
Debugger.log (devinerIndex);
// Taille du juge
if (devinerIndex <0) {
HigherorLower = "Ce n'est pas une lettre";
} else if (devinerIndex> LetterIndex) {
HigherorLower = "Lettre est inférieure à ce que vous avez entré";
} autre {
HigherorLower = "Lettre est plus élevée que vous êtes entré";
}
}
// Repaindre la toile
drawscreen ();
}
}
Une chose à noter ici est que lorsque nous devons modifier l'image en toile, l'ensemble de l'objet Canvas sera généralement repeint. Donc, chaque fois que nous devions la lettre, nous exécuterons un écran de dessin pour dessiner tous les objets sur toute la toile.
Voyons ce que fait Drawscreen.
fonction drawscreen () {
//arrière-plan
context.fillStyle = '#ffffa';
context.fillrect (0, 0, 500, 300);
//boîte
context.strokestyle = '# 000000';
context.strokect (5, 5, 490, 290);
context.textBaseline = 'top';
//date
context.fillStyle = '# 00000';
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 ('Guess:' + Guess, 215, 60);
// plus haut ou plus bas
context.fillStyle = '# 00000';
context.font = '16px_sans';
context.fillText («plus haut ou plus bas:« + supérieur, 150, 125);
// lettres devinées
context.fillStyle = '# ff0000';
context.font = '16px_sans';
context.fillText ('Letters deviné:' + LettersGuessed.ToString (), 10, 260);
if (gameover) {
context.fillStyle = "# ff0000";
context.font = "40px _sans";
context.fillText ("You Got It!", 150, 180);
}
}
Le code est très simple, il s'agit de dessiner les informations d'arrière-plan et de texte. Ci-dessous, nous introduisons la fonction d'importation d'images. Lorsque nous cliquons sur le bouton Image du canevas d'exportation, une nouvelle page sera ouverte pour afficher l'image actuelle. Faites attention à la méthode Todataurl (), qui renverra les données d'image PNG 64 bits.
$ ('# CreateImagedata'). Cliquez sur (fonction () {
window.open (thecanvas.todataurl (), 'canvasimage', 'Left = 0, top = 0, width =' + thecanvas.width + ', height =' + thecanvas.height + ', toolbar = 0, resizab le = 0');
});
Tout le monde devrait exécuter la démo directement pour voir l'effet final. Adresse de téléchargement de démo: html5 / "> html5canvas.guesstheletter.zip