Segue o código da aula: teclado-teste-2.html
<!DOCTYPE html>
<html>
<head>
<title>Movimentando personagem com classe JavaScript</title>
<script src="teclado.js"></script>
</head>
<body>
<canvas id="canvas_teclado_2" width="500" height="500"></canvas>
<script>
// Referências do Canvas
var canvas = document.getElementById('canvas_teclado_2');
var context = canvas.getContext('2d');
// Posição inicial do personagem
var posicao = 0;
desenharPersonagem();
// Controlador do teclado
var teclado = new Teclado(document);
// Um loop de animação básico
requestAnimationFrame(animar);
function animar() {
if (teclado.pressionada(SETA_ESQUERDA))
posicao -= 10;
else if (teclado.pressionada(SETA_DIREITA))
posicao += 10;
desenharPersonagem();
requestAnimationFrame(animar);
}
// Nosso heroi continua esbanjando charme!
function desenharPersonagem() {
context.clearRect(0, 0, canvas.width, canvas.height);
context.fillRect(posicao, 100, 20, 50);
}
</script>
</body>
</html>
-----------------------------------------------------------------------------------------------------------
Teclado.js
// Códigos de teclas - aqui vão todos os que forem necessários
var SETA_ESQUERDA = 37;
var SETA_DIREITA = 39;
var ESPACO = 32;
function Teclado(elemento) {
this.elemento = elemento;
// Array de teclas pressionadas
this.pressionadas = [];
// Array de teclas disparadas
this.disparadas = [];
// Funções de disparo registradas
this.funcoesDisparo = [];
var teclado = this;
elemento.addEventListener('keydown', function(evento) {
var tecla = evento.keyCode; // Tornando mais legível ;)
teclado.pressionadas[tecla] = true;
// Disparar somente se for o primeiro keydown da tecla
if (teclado.funcoesDisparo[tecla] && !teclado.disparadas[tecla]) {
teclado.disparadas[tecla] = true;
teclado.funcoesDisparo[tecla] () ;
}
});
elemento.addEventListener('keyup', function(evento) {
teclado.pressionadas[evento.keyCode] = false;
teclado.disparadas[evento.keyCode] = false;
});
}
Teclado.prototype = {
pressionada: function(tecla) {
return this.pressionadas[tecla];
},
disparou: function(tecla, callback) {
this.funcoesDisparo[tecla] = callback;
}
}
Nenhum comentário:
Postar um comentário