Capturando teclas: Movimentando um Sprite utilizando teclado

Tamanho: px

Começar a partir da página:

Download "Capturando teclas: Movimentando um Sprite utilizando teclado"

Cláudio Wilson Rocha Costa
6 Há anos
Visualizações:

1 Capturando teclas: Movimentando um Sprite utilizando teclado Como capturar as teclas do nosso teclado, para que possamos trabalhar o controle de um sprite ou mesmo de qualquer outro elemento que faz parte de um game? Vamos lá!! Primeiro vamos precisar trabalhar com os eventos de teclado, sempre lembrando que os eventos de JavaScript, são ações do usuário, que provocarão um "disparo" a um tipo de interatividade. Na verdade, o evento, por excelência, é o clique do mouse, porque é o único que o HTML gerencia. Porém, graças ao JavaScript nós podemos combinar funções e métodos a eventos tais como a passagem do mouse sobre uma área, a mudança de um valor e assim por diante. São os gerenciadores de eventos que permitem associar uma ação a um evento. A sintaxe de um gerenciador de eventos é a seguinte: onevenement="action_javascript_ou_function();" Quando usamos em um link, por exemplo, a sintaxe é a seguinte: <a href="url" "onevenement='action_javascript_ou_function();'">textinho</a> Sempre e sempre serão os gerenciadores de eventos que permitirão associar uma ação a um evento. A sintaxe de um gerenciador de eventos é a seguinte: Lista de eventos: fonte:javascript.com - Abort (onabort): Este evento acontece quando o usuário interrompe o carregamento da imagem. - Blur (onblur): Ocorre quando o elemento perde o foco, ou seja, quando o usuário clica fora do elemento, este não será mais selecionado como estando ativo. - Change (onchange): Ocorre quando o usuário altera o conteúdo de um campo de dados. - Click (onclick): Ocorre quando o usuário clica no elemento associado ao evento. - dblclick (ondblclick): Ocorre quando o usuário clica duas vezes no elemento associado ao evento (um hiperlink ou um elemento de formulário). - dragdrop (ondragdrop): Ocorre quando o usuário efetua um arrastar-largar na janela do navegador. - error (onerror): É desencadeada quando ocorre um erro durante o carregamento da página.

2 - Focus (onfocus): Ocorre quando o usuário dá foco a um elemento, isso significa que este elemento foi selecionado como estando ativo. - keydown (onkeydown): Ocorre quando o usuário pressiona uma tecla do seu teclado. - keypress (onkeypress): Ocorre quando o usuário mantém pressionada uma tecla do seu teclado. - keyup (onkeyup): Ocorre quando o usuário solta uma tecla do seu teclado já pressionada anteriormente. - Load (onload): Ocorre quando o navegador do usuário carrega a página em curso. - MouseOver (onmouseover): Ocorre quando o usuário põe o cursor do mouse acima de um elemento. - MouseOut (onmouseout): Ocorre quando o cursor do mouse deixa um elemento. - Reset (onreset): Ocorre quando o usuário apaga os dados de um formulário com o botão Reset, por exemplo. - Resize (onresize): Ocorre quando o usuário redimensiona a janela do navegador. - Select (onselect): Ocorre quando o usuário seleciona um texto (ou uma parte de um texto) em um campo do tipo "text" ou "textarea". - Submit (onsubmit): Ocorre quando o usuário clica no botão de submissão de um formulário (o botão que permite enviar o formulário). - Unload (onunload): Ocorre quando o navegador do usuário sai da página em curso. Associação de eventos com os objetos: Eventos abort blur change click dblclick dragdrop error focus keydown Objetos interessados Image Button, Checkbox, FileUpload, Layer, Password, Radio, Reset, Select, Submit, Text, TextArea, FileUpload, Select, Submit, Text, TextArea Button, document, Checkbox, Link, Radio, Reset, Select, Submit document, Link Image, Button, Checkbox, FileUpload, Layer, Password, Radio, Reset, Select, Submit, Text, TextArea,

3 keypress keyup load mousedow n mousemov e mouseout mouseover mouseup move reset resize select submit unload Image, Layer, Button, document, Link Nenhum especificamente Layer, Link Area, Layer, Link Button, document, Link form text, Textarea Form Centralizando e focando no teclado... Os eventos do teclado!! onkeypress: quando uma tecla é ativada. onkeydown: quando uma tecla é pressionada. onkeyup: quando uma tecla é "solta". É muito, mas muito importante saber a diferença entre: "Onkeypress", "Onkeydown" e "Onkeyup"!!! O "Onkeypress" será chamado duas vezes quando pressionamos uma tecla: quando o botão é pressionado e solto. Então, se atribuirmos um comportamento e/ou tratamento a este evento, precisamos saber que ele será efetuado duas vezes, quando pressionarmos sua tecla. A menos que façamos a verificação do estado da tecla (para cima ou para baixo) diretamente no código javascript). Quanto aos controles do teclado, vamos nos concentrar nas três importantes propriedades: keycode: é o código numérico da tecla ativada. altkey: valor booleano verdadeiro se a tecla ALT estiver ativada. ctrlkey: valor booleano verdadeiro se a tecla CRTL estiver ativada.

4 Propriedade keycode e lista dos valores: Esta propriedade permite recuperar o valor integral da tecla pressionada. Logo, trata-se de um número de teclas -Clique Aqui para acessar a lista! Trabalhando com teclado! Vamos primeiro criar uma pasta. Dentro desta pasta, vamos criar outra com nome de img. Salve esta nave dentro da pasta img com nome de nave.png Vamos criar um Doctype HTML 5! <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>nave com tiro</title> <script src="animacao.js"></script> <script src="teclado.js"></script> <script src="nave.js"></script> <script src="tiro.js"></script> </head> <body> <canvas id="canvas_nave" width="500" height="500"></canvas> <script> // canvas e contexto var canvas = document.getelementbyid('canvas_nave'); var context = canvas.getcontext('2d'); // teclado e animação (game engine) var teclado = new Teclado(document); var animacao = new Animacao(context); // sprite da nave e sua imagem var imgnave = new Image(); imgnave.src = 'img/nave.png'; var nave = new Nave(context, teclado, imgnave); animacao.novosprite(nave);

5 // para a nave atirar teclado.disparou(espaco, function() { nave.atirar(); }); // quando carregar a imagem, iniciar a animação imgnave.onload = function() { // Centralizada na horizontal, alinhada embaixo na vertical nave.x = canvas.width / 2 - imgnave.width / 2; nave.y = canvas.height - imgnave.height; nave.velocidade = 5; animacao.ligar(); } </script> </body> </html>

Documentos relacionados

JavaScript: Validação de Formulários. Prof. Ivanilton Polato ipolato@utfpr.edu.br ipolato@gmail.com

JavaScript: Validação de Formulários Prof. Ivanilton Polato ipolato@utfpr.edu.br ipolato@gmail.com Validação de Formulários Um dos usos mais frequentes do JS é a validação de formulários. Além de garantir