Hoje vamos usar a tela para criar um pequeno jogo de letras de adivinhação e vamos primeiro desenhar as renderizações.
O design do jogo é muito simples. O sistema selecionará aleatoriamente uma das 26 letras do AZ e salvará. Quando você insere uma carta no teclado, o sistema solicitará se os caracteres corretos são menores ou maiores que a letra que você entra atualmente e o jogo não terminará até você inserir as letras corretas.
A seguir, apresenta algumas variáveis que precisam ser usadas no código JS e seus significados. O sistema inicializará essas variáveis no início.
Presidente: o número de vezes que o usuário adivinha a carta;
Mensagem: Instruções para ajudar os jogadores a jogar;
Cartas: salve uma matriz de 26 cartas em inglês;
hoje: a hora atual;
LetterToguess: As cartas selecionadas pelo sistema, ou seja, as letras que você precisa adivinhar;
SuperiorLower: solicita ao usuário se a carta inserida atualmente é maior ou menor que a resposta;
Letters Guen: Cartas que o usuário adivinhou;
Gameover: se o jogo acabou.
var sujes = 0;
var message = "Adivinhe a letra de A (inferior) a z (superior)";
var letters = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "v", "w", "x", "y", "z"];
var hoje = new Date ();
var lettertoguess = "";
var mais altoorlower = "";
Var Letters Guessed;
var gameover = false;
Abaixo, apresentamos o evento que responde ao pop-up do teclado, usado para determinar se as letras inseridas pelo usuário são a resposta correta:
$ (janela) .bind ('keyUp', eventkeyPressed);
função EventkeyPressed (e) {
// primeiro determina se o jogo acabou
if (! gameover) {
// Obtenha cartas de entrada
var de tipopresso = string.FromCharCode (e.KeyCode);
// Faça processamento minúsculo
tipoPRESSED = TEMPOPRESSO.TOLOWERCase ();
// Adicionar 1 número de jogo
palpites ++;
// salve as cartas de entrada na matriz de cartas adivinhadas
letras sugued.push (sempressa);
// julga se as cartas de entrada e a resposta são consistentes, se o jogo terminar, se o mesmo for verdadeiro, o jogo acabará
if (sempressa == lettertoguess) {
gameover = true;
} outro {
// Obtenha a posição de resposta na matriz alfabética
var letterIndex = letters.indexof (lettertoguess);
// Obtenha a posição da letra de entrada na matriz alfabética
var avideIndex = letters.indexOF (sempressa);
Debugger.log (adivinhação);
// Tamanho do juiz
if (adivinhação <0) {
superiororlower = "Isso não é uma letra";
} else if (adivinhe
superiororlower = "A letra é menor do que você entrou";
} outro {
superiororlower = "letra é maior do que você entrou";
}
}
// repintar a tela
traça -drawscreen ();
}
}
Uma coisa a observar aqui é que, quando precisamos modificar a imagem na tela, todo o objeto de tela geralmente será repintado. Então, toda vez que achamos a letra, executaremos a tela de tração para desenhar todos os objetos em toda a tela.
Vamos ver o que o drawscreen faz.
função drawscreen () {
//fundo
context.fillstyle = '#ffffa';
context.fillRect (0, 0, 500, 300);
//caixa
context.strokestyle = '#000000';
context.Strokereect (5, 5, 490, 290);
context.TextBaseline = 'top';
//data
context.fillstyle = '#00000';
context.font = '10px_sans';
context.fillText (hoje, 150, 20);
//mensagem
context.fillstyle = '#ff0000';
context.font = '14px_sans';
context.fillText (mensagem, 125, 40);
// supostamente
context.fillstyle = '#109910';
context.font = '16px_sans';
Context.FillText ('Prazes:' + adivinha, 215, 60);
// maior ou menor
context.fillstyle = '#00000';
context.font = '16px_sans';
Context.FillText ('superior ou inferior:' + SuperiorLower, 150, 125);
// Cartas adivinhou
context.fillstyle = '#ff0000';
context.font = '16px_sans';
Context.FillText ('Letters adivinhou:' + Lettersgued.toString (), 10, 260);
if (gameover) {
context.fillstyle = "#ff0000";
context.font = "40px _sans";
context.fillText ("Você entendeu!", 150, 180);
}
}
O código é muito simples, é desenhar as informações de fundo e texto. Abaixo, apresentamos a função de importar imagens. Quando clicamos no botão Exportar Canvas, uma nova página será aberta para exibir a imagem atual. Preste atenção ao método Todataurl (), que retornará dados de imagem PNG de 64 bits.
$ ('#createImagedata'). Clique (function () {
window.open (thecanvas.todataurl (), 'canvasImage', 'esquerda = 0, topo = 0, largura =' + theCanvas.width + ', altura =' + theCanvas.Height + ', barra de ferramentas = 0, resizab le = 0');
});
Todos devem executar a demonstração diretamente para ver o efeito final. Endereço para download de demonstração: html5/"> html5canvas.guesstheletter.zip