Erro ao tentar alternar a cor da bolinha animada | JavaScript e HTML: pratique lógica com desenhos, animações e um jogo

2
respostas

por Nikole Souza de Almeida

| 22.8k xp | 6 posts

Criei um código onde a posição da bolinha é aleatória, usando o Math.random, e deu super certo! Porém queria que a cada vez que ela aparecesse, fosse com uma cor diferente. A partir daí não aparece mais as bolinhas =( Usei o console.log para visualizar se as cores eram geradas e são, mas a bolinha parou de aparecer.

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

<script>

    var tela = document.querySelector('canvas');
    var pincel = tela.getContext('2d');
    pincel.fillStyle = 'white';
    pincel.fillRect(0, 0, 600, 400);
    pincel.strokeStyle = 'black';
    pincel.strokeRect(0, 0, 600, 400);

    function desenhaCirculo(x, y, raio) {


         var cores = ['blue', 'red', 'black', 'yellow', 'green', 'purple', 'pink', 'orange', 'brown', 'gray'];
        var corAleatoria = Math.floor(Math.random()*cores.length); 
        console.log(cores[corAleatoria]); // resultado aleatório
        var cor = cores[corAleatoria];

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

    function limpaTela() {

        pincel.clearRect(0, 0, 600, 400);
        pincel.strokeStyle = 'black'; //para definir um limite da tela
        pincel.strokeRect(0, 0, 600, 400);
    }

   var x = 20; 
   var y = 20;

    function atualizaTela() {

        limpaTela();

        desenhaCirculo(x, y, 10);
        //alterando a posição de x e y
        x = parseInt(Math.random(x) * 600);
        y = parseInt(Math.random(y) * 400);

    }


    setInterval(atualizaTela, 1000);

</script>

2 respostas

por Camila Pessôa

| 921.4k xp | 1928 posts

Alura Scuba Team

01/08/2022

Oi, Nikole! Tudo bem?

Você gerou a aleatoriedade no código mas esqueceu de acionar o evento de pintura com o clique do mouse, vou deixar aqui um exemplo do instrutor para ajudar você.

<canvas width="600" height="400"></canvas>
selecione a cor <input type="color">

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

    pincel.fillStyle = 'grey';
    pincel.fillRect(0, 0, 600, 400);

    var desenha = false;

    function desenhaCirculo(evento) {

        if(desenha) {
            var x = evento.pageX - tela.offsetLeft;
            var y = evento.pageY - tela.offsetTop;
            pincel.fillStyle = paleta.value; // sempre pega o valor atual da paleta!
            pincel.beginPath();
            pincel.arc(x, y, 10, 0, 2 * 3.14);
            pincel.fill();
        }
        console.log(x + ',' + y);
    }

    tela.onmousemove = desenhaCirculo;

    // atribuindo diretamente a função anônima
    tela.onmousedown = function() {

        desenha = true;
    }

    // atribuindo diretamente a função anônima
     tela.onmouseup = function() {

        desenha = false;
    }

</script>

Um abraço e bons estudos!

por Nikole Souza de Almeida

| 22.8k xp | 6 posts

10/08/2022

Não compreendi Camila! Esse código seria para gerar a bolinha em intervalos, não precisaria do clique! Ao retirar a parte que gero as cores, deixando uma ja escolhida, ele funciona, mas quando coloco p gerar uma cor aleatória a bolinha deixa de aparecer. Exemplo, antes de tentar mudar as cores:

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

<script>

    var tela = document.querySelector('canvas');
    var pincel = tela.getContext('2d');
    pincel.fillStyle = 'white';
    pincel.fillRect(0, 0, 600, 400);
    pincel.strokeStyle = 'black';
    pincel.strokeRect(0, 0, 600, 400);

    function desenhaCirculo(x, y, raio) {


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

    function limpaTela() {

        pincel.clearRect(0, 0, 600, 400);
        pincel.strokeStyle = 'black'; //para definir um limite da tela
        pincel.strokeRect(0, 0, 600, 400);
    }

   var x = 20; 
   var y = 20;

    function atualizaTela() {

        limpaTela();

        desenhaCirculo(x, y, 10);
        //alterando a posição de x e y
        x = parseInt(Math.random(x) * 600);
        y = parseInt(Math.random(y) * 400);

    }


    setInterval(atualizaTela, 1000);

</script>