1
resposta

Movimentando a bolinha com o teclado

Fiz um programa que move a bolinha com as setas ou o w,a,s,d, aumenta ou diminui com + e - e reseta o tamanho e a posição da bolinha com o espaço. Testem ai =)

<style>
    main{
        height: 95vh;
        display: flex;
        justify-content: center;
        align-items: center;
    }
</style>

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

<script>

    function lerTeclado(evento){
        if(evento.key == cima || evento.key == "w"){
            if(y >= 10){
                y -= 10;    
            }
        } else if(evento.key == baixo || evento.key == "s"){
            if(y <= 390){
                y += 10;    
            }
        } else if(evento.key == esquerda || evento.key == "a"){
            if(x >= 10){
                x -= 10;    
            }
        } else if(evento.key == direita || evento.key == "d"){
            if(x <= 590){
                x += 10;    
            }
        } else if(evento.key == espaco){
            x = 300;
            y = 200;
            raio = 30;
        } else if(evento.key == adicionar && raio <= 50){
            raio += 2;
        } else if(evento.key == subtrair && raio >= 20){
            raio -= 2;
        }

        limpaTela();
        desenhaCirculo();
    }

    function limpaTela(){
        pincel.clearRect(0, 0, 600, 400);
        pincel.fillStyle = "gray";
        pincel.fillRect(0, 0, 600, 400);
    }

    function desenhaCirculo(){
        pincel.fillStyle = "darkblue";
        pincel.beginPath();
        pincel.arc(x, y, raio, 0, 2 * Math.PI);
        pincel.fill();
    }

    var cima = "ArrowUp";
    var baixo = "ArrowDown";
    var esquerda = "ArrowLeft";
    var direita = "ArrowRight";
    var espaco = " ";
    var adicionar = "+";
    var subtrair = "-";

    var x = 300;
    var y = 200;
    var raio = 30;

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

    pincel.fillStyle = "gray";
    pincel.fillRect(0, 0, 600, 400);

    desenhaCirculo();

    document.onkeydown = lerTeclado;

</script>
1 resposta

Oi, Lucas! Tudo bem?

Uau, que máximo! Adorei seu projeto, mandou bem demais :)

Continue praticando e estudando!

Em caso de dúvidas, lembre-se de compartilhar aqui no fórum!

Abraços e bons estudos!