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

Movendo a bolinha pelo teclado. Estabeleci um limite para o círculo não sumir do canvas

Olá, boa noite

Programei o círculo para iniciar no centro e limitei a área possivel de movimento do círculo ao tamanho do canvas.

Segue o código:

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

        // EIXOS X E Y ALTERADOS PARA INICIAR O CÍRCULO CENTRALIZADO
        var x = 300;
        var y = 200;

        // CÓDIGOS DO TECLADO
        var esquerda = 37;
        var cima = 38;
        var direita = 39;
        var baixo = 40;

        // TAXA DE INCREMENTO PARA MOVIMENTO DA BOLINHA
        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, 20);
        }

        setInterval(atualizaTela, 1);

        function leDoTeclado(evento) {

            // CONDIÇÕES PARA MOVIMENTAR O CÍRCULO DE ACORDO COM A TECLA PRESSIONADA
            if(evento.keyCode == direita){

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

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

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

                y = y + taxa;
            }

            // CONDIÇÕES PARA MANTER O CÍRCULO DENTRO DO CANVAS
            if(x > 580){
                x = 580;
            }else if(x < 20){
                x = 20
            }else if(y < 20){
                y = 20;
            }else if(y > 380){
                y = 380;
            }
        }

        document.onkeydown = leDoTeclado;

    </script>
1 resposta
solução!

Olá, Diego! Tudo bem?

Sua solução está correta, parabéns!

Qualquer dúvida estamos à disposição.

Continue praticando e bons estudos!

Até mais!