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

Tentei pra caramba mas não consegui!

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 Álvaro Patrício
| 62.3k xp | 18 posts

imagino que eu esteja no caminho certo kkkkk alguem da uma luz?

<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 corBolinha = ['blue', 'red', 'green']
    var numeroCor = 0;

    function desenhaCirculo(evento) {

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

        console.log(x + ',' + y);
    }

    tela.onclick = desenhaCirculo;

    function mudaCorBolinha() {

        for (var numeroCor = 0; numeroCor <= numeroCor.length; numeroCor++) {

            var corBolinha = corBolinha[numeroCor];
            tela.oncontextmenu = corBolinha[numeroCor];

            console.log(numeroCor)

        }
            return false;
    }

       tela.oncontextmenu = mudaCorBolinha;




</script>
2 respostas
solução!
por Geovani Granieri
| 909.2k xp | 1038 posts
Instrutor

Olá Álvaro, tudo bem com você?

Acredito que tenha visto a solução do instrutor, mas para resolver esse exercício não precisamos de um for, já que temos o array de cores já definido, podemos apenas aumentar a variável numeroCor e tomar cuidado para que ela nunca ultrapasse o tamanho, da seguinte maneira:

    function mudaCorBolinha() {
        numeroCor++;
        if(numeroCor >= corBolinha.length) {
            numeroCor = 0;
        }

        return false;
    }

Veja que a nossa variável numeroCor começa com 0, então na nossa função desenha círculo temos:

pincel.fillStyle = corBolinha[numeroCor];

Então começamos com corBolinha[0] que é o nossa cor azul, e cada vez que clicamos com o botão direito mudamos o numeroCor para que acesse outras cores :)

Agora em relação ao seu código, vou te dar algumas dicas, ok?

Vamos observar seu for:

for (var numeroCor = 0; numeroCor <= numeroCor.length; numeroCor++) {

Aqui o ideal é sempre criar uma variável nova, você já havia criado a numeroCor no começo do programa, então aqui poderia ser algo como: indiceCor para não haver redeclaração de variável

E veja que você está fazendo numeroCor.length, quando não existe esse atributo em um número, na verdade deveria ser corBolinha.length que é o nosso array que tem uma quantidade :)

E dentro do seu for precisamos corrigir algumas coisas:

var corBolinha = corBolinha[numeroCor];
tela.oncontextmenu = corBolinha[numeroCor];

Aqui poderíamos mudar o nome de corBolinha para corAtual para não ficar confuso, veja que é díficil saber qual corBolinha equivale a uma cor, e qual de fato é o nosso array de cores

E na verdade esse tela.oncontextmenu deveria ser um pincel.fillStyle para poder trocar a cor :)

Nesse exercício utilizar o for não consegue nos ajudar, já que já temos todas as informações (não precisamos percorrer o array para saber a cor), mas nos próximos ele será bem útil!

Qualquer coisa estou a disposição :)

Abraços e Bons Estudos!

por Álvaro Patrício
| 62.3k xp | 18 posts

Perfeito Geovani, tinha visto a solução sim, mas queria testar outros conteúdos aprendidos! Obrigado pela atenção!