2
respostas

tudo que vai volta

uma duvida que estou, estou tentando fazer um alternativo e nao esta indo, queria saber onde esta o erro:

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

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

    var x = 20;
    var y = 0
    var a = 1

    function atualizaTela() {

        if (a = 1){
            if(x < 600){

                limpaTela();
                desenhaCirculo(x, 20, 10);
                x++;

            }else{

                y = 600;
                a = 2;

            }
        }

        if (a = 2){

            if(y > 0){

                limpaTela();
                desenhaCirculo(y, 20, 10);
                y = y - 1

            }else{

                x = 0;
                a = 2
        }
        }

    }

    setInterval(atualizaTela, 1000);

</script>
2 respostas

Olá, Osiris! Espero que esteja bem!!!

Desculpe a demora em dar um retorno.

A estrutura está correta!

O único problema é que ao invés de comparar se a é igual a 1 ou a é igual a 2 , ele estava atribuindo os valores à variável.

Basta alterar o sinal de atribuição (=) pelo de comparação (==)

Espero ter ajudado, Osiris!

Um abraço e bons estudos!!!

Olá, boa noite! Tudo bem?

Como Cassio disse sua estrutura esta correta, basta fazer as alterações informadas e no seu segundo if a variável "a" deve receber o valor 1, para que o loop continue, se não ele irá fazer somente uma ida e uma volta.

 if (a == 2) {
      if (y > 0) {
            limpaTela()
            desenhaCirculo(y, 20, 10)
            y = y - 1
      } else {
            x = 0
            a = 1
      }
    }
  }