código aula 8
<!DOCTYPE html>
<html>
<head>
<title>Movimentando personagem com keydown</title>
<style type="text/css">
canvas { border: 1px solid #000000; }
</style>
</head>
<body>
<canvas id="canvas_teclado_1" width="500" height="300"></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() {
var imagem = new Image();
imagem.src = 'img/img.jpeg';
imagem.onload = function() {
context.clearRect(0, 0, canvas.width, canvas.height);
context.drawImage(imagem, posicao, 100, 80, 80);
}
//context.clearRect(0, 0, canvas.width, canvas.height);
//context.fillRect(posicao, 100, 20, 50);
}
</script>
</body>
</html>
Nenhum comentário:
Postar um comentário