Solucionado (ver solução)
Solucionado
(ver solução)
4
respostas

Forma diferente - Movendo com o mouse

Poderia ser também dessa forma ?

<canvas width="600" height="400"></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;

    // taxa de incremento
    var taxa = 5;

    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) {

        // sua lógica virá aqui
        if (evento.keyCode == 37) {

            x = x - taxa;

        } else if (evento.keyCode == 38 ) {

            y = y - taxa;

        } else if (evento.keyCode == 39) {

            x = x + taxa;

        } else if (evento.keyCode == 40) {

             y = y + taxa;

        }

    }

   document.onkeydown = leDoTeclado;

</script>

Aquela parte de declarar as variáveis nem precisaria, certo ?

4 respostas

Oi Vinicius, precisa das variáveis sim, você está sempre se movimentando se baseando nesses valores, sem contar que você precisou definir a posição inicial do círculo.

Agora, uma observação, para os lados e para esquerda, a bolinha vai para o canto certo, mas ao pressionar para baixo, ela desce e depois sobre duas vezes, você consegue ver por que? Isso acontece com você?

Não aconteceu isso comigo, não consigo ver porque, mas deve ser pelos códigos diferentes.

solução!

Oi Vinicius, verifiquei novamente, na verdade não tem problema nenhum, foi erro meu na verificação, quando aperto o botão pra baixo, na verdade a bolinha desce, mas o scroll também rola e ai eu tive a impressão que a bolinha sobe novamente. Erro meu, desculpe.

Então seu código funciona e parece perfeito pra mim. Lembre-se haverá sempre códigos diferentes que resolvem o mesmo problema. Fazer diferente não quer dizer que esta errado.

Obrigado pela compreensão, Valeu !