Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

1- Não coloquei os else na sequencia de if, mas funcionou assim mesmo. Está errado? 2- as setas para cima e baixo estão invertidas no resultado do meu programa, mas para cima y cresce e para baixo decresce. O que está errado?

<script>

    var tela = document.querySelector('canvas');
    var pincel = tela.getContext('2d');
    pincel.fillStyle = 'lightgray';
    pincel.fillRect(0, 0, 600, 400);

    var x = 20;
    var y = 20;

    // códigos do teclado

    var esquerda = 37;
    var cima = 38;
    var direita = 39;
    var baixo = 40;

    // taxa de incremento
    var taxa = 10;

    function desenhaCirculo(x, y, raio) {

        pincel.fillStyle = 'blue';
        pincel.beginPath();
        pincel.arc(x, y, raio, 0, 2 * Math.PI);
        pincel.fill();
    }

    function limpaTela() {

        pincel.clearRect(0, 0, 600, 400);
    }

    function atualizaTela() {

        limpaTela();
        desenhaCirculo(x, y, 10);
    }

    setInterval(atualizaTela, 20);

    function leDoTeclado(evento) {

        if(evento.keyCode == esquerda){

            x = x - taxa;
        }
        if(evento.keyCode == direita){

            x = x + taxa;
        }
        if(evento.keyCode == cima){

            y = y + taxa;
        }
        if(evento.keyCode == baixo){

            y = y - taxa;
        }
    }

   document.onkeydown = leDoTeclado;

</script>
1 resposta
solução!

Olá, Angela.

Não sei se foi na hora da cópia, mas você esqueceu da tag canvas.

Bem, vamos lá, vou tentar responder suas perguntas.

  1. Não coloquei os else na sequencia de if, mas funcionou assim mesmo. Está errado?

A estrutura do if funciona sem um else. Você só irá usar o else quando for necessário, mas me parece que no código que você enviou, não era preciso.

  1. As setas para cima e baixo estão invertidas no resultado do meu programa, mas para cima y cresce e para baixo decresce. O que está errado?

Bem, as teclas pra cima e pra baixo parecem estar trocadas, mas na verdade é por que a origem do eixo y no canvas está na parte superior esquerda e não na parte inferior esquerda como estamos acostumados. A imagem abaixo exemplifica isso:

Deste modo, para resolver seu problema, bastariamos modificar as linhas que mudam o valor de y, invertendo as operações (onde tem +, coloque - e vice versa).

O código correto seria:

<canvas></canvas>

<script>

    var tela = document.querySelector('canvas');
    var pincel = tela.getContext('2d');
    pincel.fillStyle = 'lightgray';
    pincel.fillRect(0, 0, 600, 400);

    var x = 20;
    var y = 20;

    // códigos do teclado

    var esquerda = 37;
    var cima = 38;
    var direita = 39;
    var baixo = 40;

    // taxa de incremento
    var taxa = 10;

    function desenhaCirculo(x, y, raio) {

        pincel.fillStyle = 'blue';
        pincel.beginPath();
        pincel.arc(x, y, raio, 0, 2 * Math.PI);
        pincel.fill();
    }

    function limpaTela() {

        pincel.clearRect(0, 0, 600, 400);
    }

    function atualizaTela() {

        limpaTela();
        desenhaCirculo(x, y, 10);
    }

    setInterval(atualizaTela, 20);

    function leDoTeclado(evento) {

        if(evento.keyCode == esquerda){

            x = x - taxa;
        }
        if(evento.keyCode == direita){

            x = x + taxa;
        }
        if(evento.keyCode == cima){

            y = y - taxa;
        }
        if(evento.keyCode == baixo){

            y = y + taxa;
        }
    }

   document.onkeydown = leDoTeclado;

</script>

Veja bem, eu apenas adicionei uma linha com

<canvas></canvas>

e modifiquei as linhas aumentam e diminuem o valor de y.

Espero ter ajudado.

P.S. para melhor visualização, sugiro que faça as perguntas no corpo do tópico. Você pode dar uma olhada nesse artigo para entender um pouco mais sobre markdown.