1
resposta

Não consigo mover a bolinha pelo teclado

Não está funcionando!

O código roda, não apresenta nenhum erro. Porém, não está funcionando, a bolinha não se mexe.

<canvas width="600" height="400"></canvas>

<script>

    tela = document.querySelector('canvas');
    pincel = tela.getContext('2d');

    function limpaTela() {

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

    function bolinha(x, y, raio) {

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

    function acaoNaTela() {

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

    function leTeclado() {

        if(event.KeyCode == esquerda) {

            x = x - taxa;

        } else if(event.KeyCode == direita) {

            x = x + taxa;

        } else if(event.KeyCode == cima) {

            y = y - taxa;

        } else if(event.KeyCode == baixo) {

            y = y + taxa;

        }
    }

    let esquerda = 37; //variavel da seta esquerda
    let cima = 38; //variavel da seta cima
    let direita = 39; //variavel da seta direita
    let baixo = 40; //variavel da seta baixo

    let x = 300; //valor de X
    let y = 200; //valor de Y
    let taxa = 10; //incremento para o X e Y

    document.onkeydown = leTeclado;
    setInterval(acaoNaTela, 20);

</script>
1 resposta

Olá, Marcelo, tudo bem?

Obrigada pelo aguardo de um feedback.

Analisei o seu código e notei que ao fazer as verificações das condições na função leTeclado ao invés de escrever keyCode você escreveu KeyCode . O JavaScript é case-sensitive , ou seja, letra maiúscula e minúscula são consideradas diferentes.

Segue o código com a alteração:

<canvas width="600" height="400"></canvas>

<script>

    tela = document.querySelector('canvas');
    pincel = tela.getContext('2d');

    function limpaTela() {

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

    function bolinha(x, y, raio) {

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

    function acaoNaTela() {

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

    function leTeclado() {

        if(event.keyCode == esquerda) {

            x = x - taxa;

        } else if(event.keyCode == direita) {

            x = x + taxa;

        } else if(event.keyCode == cima) {

            y = y - taxa;

        } else if(event.keyCode == baixo) {

            y = y + taxa;

        }
    }

    let esquerda = 37; //variavel da seta esquerda
    let cima = 38; //variavel da seta cima
    let direita = 39; //variavel da seta direita
    let baixo = 40; //variavel da seta baixo

    let x = 300; //valor de X
    let y = 200; //valor de Y
    let taxa = 10; //incremento para o X e Y

    document.onkeydown = leTeclado;
    setInterval(acaoNaTela, 20);

</script>

Espero ter ajudado.

Reforço que estou à disposição para tirar dúvidas.

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!