4
respostas

Por que dessa maneira não está funcionando ?

4 respostas

Olá Lucas, tudo certo?

Coloca o seu código aqui para tentarmos descobrir pq está dando errado.

É só clicar no botão inserir código e colar ele dentro espaço delimitado.

<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 raio = 10;

    function desenhaCirculo(x, y, raio, cor) {

        pincel.fillStyle = cor;
        pincel.beginPath();
        pincel.arc(x, y, raio, 0, 2 * Math.PI);
        pincel.fill();

    }

    function limpaTela() {

        pincel.clearRect(0, 0, 600, 400);
    }
    var x = Math.floor(Math.random()*600);
    var y = Math.floor(Math.random()*400);

    function desenhaAlvo(){

        desenhaCirculo(x,y,raio+20,'red');
        desenhaCirculo(x,y,raio+10,'white');
        desenhaCirculo(x,y,raio,'red');

    }

    function atualizaTela(){

        limpaTela();
        desenhaAlvo(x,y);
    }

    setInterval(atualizaTela,1000);



</script>

Olá Lucas, tudo bem?

Então existe alguns errinhos em seu código:

  • Vamos deixar as variáveis x e y dentro da função atualizaTela() para a cada 1 segundo estar gerando valores aleatórios.
  • Na sua função desenhaAlvo() você não declarou os argumentos necessários, ela deveria ser desenhaAlvo(x, y), veja que na função atualizaTela você passa 2 parâmetros ;)

Deixe assim seu código:

    function atualizaTela(){
        limpaTela();
        var x = Math.floor(Math.random()*600);
        var y = Math.floor(Math.random()*400);
        desenhaAlvo(x,y);
    }

    function desenhaAlvo(x, y){

        desenhaCirculo(x,y,raio+20,'red');
        desenhaCirculo(x,y,raio+10,'white');
        desenhaCirculo(x,y,raio,'red');

    }

Agora deve estar funcionando corretamente :)

Abraços e Bons Estudos!

Fala Lucas, beleza?

Você só precisa declarar as variáveis x e y dentro da função desenha alvo, assim apresentará o resultado que você quer.

...
    function desenhaAlvo(){

        var x = Math.floor(Math.random()*600);
        var y = Math.floor(Math.random()*400);

        desenhaCirculo(x,y,raio+20,'red');
        desenhaCirculo(x,y,raio+10,'white');
        desenhaCirculo(x,y,raio,'red');

    }
...

Como essas variáveis estavam fora das funções chamadas pelo setInterval o valor delas nunca eram alteradas.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software