HTML5 lienzo-2. Haz un pequeño juego de letras con lienzo

Hoy vamos a usar lienzo para crear un pequeño juego de letras adivinando, y primero dibujemos las representaciones.

El diseño del juego es muy simple. El sistema seleccionará al azar una de las 26 letras de AZ y lo guardará. Cuando ingresa una letra en el teclado, el sistema le solicitará si los caracteres correctos son más pequeños o más grandes que la letra que ingresa actualmente, y el juego no terminará hasta que ingrese las letras correctas.

La siguiente introduce algunas variables que deben usarse en el código JS y sus significados. El sistema inicializará estas variables al principio.

Adivinas: el número de veces que el usuario adivina la letra;

Mensaje: Instrucciones para ayudar a los jugadores a jugar el juego;

Cartas: Guarde una matriz de 26 letras inglesas;

Hoy: la hora actual;

LetterToGuess: las letras seleccionadas por el sistema, es decir, las letras que debe adivinar;

GRAWERLOWER: solicita al usuario si la letra actualmente ingresada es mayor o menor que la respuesta;

Letras guiadas: letras que el usuario ha adivinado;

GameOver: si el juego ha terminado.

Var Guess = 0;

VAR Message = "Adivina la letra de A (inferior) a z (superior)";

Var letras = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "t", "u", "v", "v", "w", "x", "y", "y".

var hoy = nueva fecha ();

var letterToguess = "";

var greatorLower = "";

var letras guiadas;

var gameover = false;

A continuación presentamos el evento que responde a la ventana emergente del teclado, que se utiliza para determinar si las letras ingresadas por el usuario son la respuesta correcta:

$ (ventana) .bind ('KeyUp', EventKeyPissed);

función EventKeyPressed (e) {

// Determinar primero si el juego ha terminado

if (! GameOver) {

// Obtener letras de entrada

var letterPissed = String.FromCharCode (E.KeyCode);

// hacer procesamiento en minúsculas

LetterPissed = LetterPissed.TOLOWERCase ();

// agregar 1 número de juego

conjeturas ++;

// Guardar las letras de entrada a la matriz de letras adivinadas

LetterSguessed.Push (Letraje);

// juzga si las letras de entrada y la respuesta son consistentes, si el juego termina si lo mismo es verdadero, el juego será terminado

if (letrero == lettToguess) {

GameOver = True;

} demás {

// Obtener la posición de respuesta en la matriz alfabética

var letterIndex = Letters.IndexOf (LetterToGuess);

// Obtener la posición de la carta de entrada en la matriz alfabética

var adivisionIndex = Letter.IndexOf (LetterPissed);

Debugger.log (GuessIndex);

// Tamaño de juzgar

if (adivisionIndex <0) {

gteryOrLower = "Esa no es una letra";

} else if (adivisionIndex> LetterIndex) {

gighleorLower = "La letra es más baja de lo que ingresó";

} demás {

gteryOrLower = "La letra es más alta de lo que ingresó";

}

}

// Repintado lienzo

DrawScreen ();

}

}

Una cosa a tener en cuenta aquí es que cuando necesitamos modificar la imagen en lienzo, todo el objeto de lienzo generalmente será repintado. Entonces, cada vez que suponemos la carta, ejecutaremos DrawScreen para dibujar todos los objetos en todo el lienzo.

Veamos qué hace la pantalla de dibujo.

función drawScreen () {

//fondo

context.fillstyle = '#ffffa';

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

//caja

context.strokestyle = '#000000';

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

context.TextBaseline = 'top';

//fecha

context.fillstyle = '#00000';

context.font = '10px_sans';

context.fillText (hoy, 150, 20);

//mensaje

context.fillstyle = '#FF0000';

context.font = '14px_sans';

context.fillText (mensaje, 125, 40);

// GUESTRAS

context.fillstyle = '#109910';

context.font = '16px_sans';

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

// más o más bajo

context.fillstyle = '#00000';

context.font = '16px_sans';

context.fillText ('más alto o más bajo:' + gravedad, 150, 125);

// Cartas adivinadas

context.fillstyle = '#FF0000';

context.font = '16px_sans';

context.fillText ('Letters Ejesadas:' + Lettersguessed.ToString (), 10, 260);

if (gameover) {

context.fillstyle = "#FF0000";

context.font = "40px _sans";

context.fillText ("¡Lo tienes!", 150, 180);

}

}

El código es muy simple, es para dibujar los antecedentes y la información de texto. A continuación presentamos la función de importación de imágenes. Cuando hacemos clic en el botón Exportar imagen de lienzo, se abrirá una nueva página para mostrar la imagen actual. Preste atención al método Todataurl (), que devolverá los datos de imagen PNG de 64 bits.

$ ('#createImagedata'). Click (function () {

Window.open (thecanvas.todataurl (), 'Canvasimage', 'izquierda = 0, top = 0, width =' + thecanvas.width + ', altura =' + thecanvas.height + ', toolbar = 0, resizab le = 0');

});

Todos deberían ejecutar la demostración directamente para ver el efecto final. Dirección de descarga de demostración: html5/"> html5canvas.guesstheletter.zip