sexta-feira, 31 de maio de 2019

Desafio aula 8

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