Exercício KeyPress
Teclado1.html
<!DOCTYPE html>
<html>
<head>
<title>Movimentando personagem com keydown</title>
</head>
<body>
<canvas id="canvas_teclado_1" width="500" height="500"></canvas>
<script>
// Referências do Canvas
var canvas = document.getElementById('canvas_teclado_1');
var context = canvas.getContext('2d');
// Posição inicial do personagem
var posicao = 0;
desenharPersonagem();
// Listener
document.addEventListener('keydown', function(evento) {
if (evento.keyCode == 37) { // Seta para esquerda
posicao -= 10;
desenharPersonagem();
}
else if (evento.keyCode == 39) { // Seta para direita
posicao += 10;
desenharPersonagem();
}
});
// Um personagem não muito simpático, mas...
function desenharPersonagem() {
context.clearRect(0, 0, canvas.width, canvas.height);
context.fillRect(posicao, 100, 20, 50);
}
</script>
</body>
</html>
Nenhum comentário:
Postar um comentário