2
respostas

Praticano o que aprendi 1,5

Eu estou praticando o que aprendi no curso JavaScript e HTML: pratique lógica com desenhos, animações e um jogo. eu estou tentando fazer um código de uma animação de um quadrado se mexendo mas não consigo.

2 respostas
<canvas widh="600" height="400"></canvas>

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

    function desenhaQuadrado(x,0,0,20,20){
        
        pincel.fillStyle = 'Red';
        pincel.beginPath();
        pincel.arc(0,0,20,20);
        pincel.fill();

    }

    function limpaTela(){
        pincel.clearRect(0, 0, 600, 400);  
    }

    var x = 20;
    function atulizaTela(){
        limpaTela();
        desenhaQuadrado(x,20,10);
        x++;
    }

    setInterval(atulizaTela, 20);

</script>

Oi, Jorge! Tudo bem?

O código que você forneceu tem alguns pontos que precisam ser ajustados para funcionar corretamente.

  1. Você está usando arc() para desenhar o quadrado, mas esse método desenha um círculo. Para um quadrado, utilize o método fillRect().

  2. Além disso, a função desenhaQuadrado tem parâmetros errados na chamada. Eles não estão alinhados com os valores que você está passando.

Vamos corrigir esses pontos no seu código:

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

<script>
    var tela = document.querySelector('canvas');
    var pincel = tela.getContext('2d');

    // Função para desenhar o quadrado
    function desenhaQuadrado(x, y){
        pincel.fillStyle = 'red';
        pincel.fillRect(x, y, 20, 20);
    }

    // Função para limpar a tela
    function limpaTela(){
        pincel.clearRect(0, 0, 600, 400);  
    }

    var x = 20;
    var y = 150; // Definindo uma posição inicial para o quadrado

    // Função para atualizar a tela
    function atualizaTela(){
        limpaTela();
        desenhaQuadrado(x, y);
        x++; // Incrementando a posição x para mover o quadrado
    }

    // Atualizando a tela a cada 20ms
    setInterval(atualizaTela, 20);
</script>

Agora o quadrado será desenhado corretamente e se moverá para a direita na tela.

Fico à disposição. Abraços e bons estudos!

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