Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
5
respostas

Erro ao mudar de cor. Me ajude , por favor.{SOLUCIONADO}

Referente ao curso JavaScript e HTML: pratique lógica com desenhos, animações e um jogo, no capítulo Interagindo com o usuário e atividade Trocando de cor

por Lucas Garcia Freire
| 56.8k xp | 29 posts
<canvas width=600 height=400></canvas>



<script>
    var tela = document.querySelector('canvas');
    var pincel = tela.getContext('2d');
    pincel.fillStyle = 'grey';
    pincel.fillRect(0, 0, 600, 400);
    var cores =['blue','yellow','red','black'];
    var indiceAtual = 0;
    function desenhaCirculo(evento) {

        var x = evento.pageX - tela.offsetLeft;
        var y = evento.pageY - tela.offsetTop;
        pincel.fillStyle = cores[indiceAtual];
        pincel.beginPath();
        pincel.arc(x, y, 10, 0, 2 * 3.14);
        pincel.fill();
        console.log(x + ',' + y);
    }

    tela.onclick = desenhaCirculo;

    function mudaCor() {

        indiceAtual++;
        if(indiceAtual >=cores.length) {
                var indiceAtual = 0 ;}

        return false;
    }

    tela.oncontextmenu = mudaCor;

</script>

Oque está errado? Não consigo localizar o erro.

5 respostas
solução!
por Gabriel Michels Lizeo Spindola
| 467.4k xp | 26 posts
Trainee

Fala Lucas, tudo bem?

Peguei o código e a solução do vídeo também está com o mesmo problema.

Mas para não ficar sem trocar a cor, você pode alterar apenas o pincel.fillStyle = cores[indiceAtual]; para:

pincel.fillStyle = cores[Math.floor(Math.random() * 5)];

Dessa forma, cada vez que você clicar no quadrado, a cor da bolinha mudará de cor de forma aleatoriamente. Espero que tenha ajudado mano kkkkk

Abraços e bons estudos!!

por Lucas Garcia Freire
| 56.8k xp | 29 posts

Muito obrigado. Só uma pergunta: Oque faz Math.floor( ) ?

por Alfredo Gutemberg Pereira
| 140.7k xp | 4 posts

Lucas eu resolvi com if...

function mudaCor() { if (cor == "red") { cor = "blue"; } else if (cor == "blue") { cor = "green"; } else { cor = "red"; } return false; }

por Caio Gonçalves Silva
| 136.2k xp | 20 posts

Eae Lucas, consegui resolver o problema sem que a cor seja aleatória! Na função mudaCor() quando o indiceAtual chega ao limite e tem que ser zerado, você declarou a variável de novo escrevendo var.

function mudaCor() {
        indiceAtual++;

        if(indiceAtual >=cores.length) {
                var indiceAtual = 0 ;}

        return false;
    }

O certo é:

function mudaCor() {
        indiceAtual++;

        if(indiceAtual >=cores.length) {
                indiceAtual = 0 ;}

        return false;
    }

Assim funciona como o esperado : )

por Jonathan Aluisio Da Silva
| 45.6k xp | 9 posts

Que bom que conseguiu