Entrar Ainda não tem acesso?
3
respostas

Consigo resolver esse exercício usando um for?

Referente ao curso JavaScript e HTML: pratique lógica com desenhos, animações e um jogo

por Kadmiell Paz Barreto
| 61.3k xp | 4 posts

Consegui resolver o exercício com o código abaixo, mas tentei durante um bom tempo implementar usando um "for" na "function mudaCor()" e não consegui chegar num resultado, alguém tem uma dica de como funcionaria usando essa condição? 

<meta charset="utf-8">

<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", "red", "green"];
var rgb = 0;

function desenhaCirculo(evento) {

    var x = evento.pageX;
    var y = evento.pageY;
    pincel.fillStyle = cores[rgb];
    pincel.beginPath();
    pincel.arc(x , y, 10, 0, 2 * 3.14);
    pincel.fill();    
}

function mudaCor() {

    rgb++;
    if (rgb == cores.length)
        rgb = 0;

        return false;
}

tela.oncontextmenu = mudaCor;
tela.onclick = desenhaCirculo;


</script>
3 respostas
por Marcio
| 270.6k xp | 11 posts

Olá Kadmiell,

Não entendi, qual o objetivo de usar o for em mudaCor()?

O código me parece correto do jeito que está agora, se usar o for nessa função você irá rodar a variável rgb de 0 até length e depois irá voltar para 0 não alterando a cor.

Tente imprimir no console as cores dentro do laço do for para você perceber que não funcionaria:

function mudaCor() {

    rgb++;
    for (index = 0; index < cores.length; index++) {

        rgb = index;

        console.log(`rgb: ${rgb} | cor: ${cores[rgb]}`);

        if (rgb == cores.length -1)
            rgb = 0;
    }
}

o resultado no console fica assim:

rgb: 0 | cor: blue
rgb: 1 | cor: red
rgb: 2 | cor: green

Coloque sua tentativa de for aqui para ver como você pensou!

Valeu

por Kadmiell Paz Barreto
| 61.3k xp | 4 posts

Fala ai Márcio, na realidade tentei resolver usando o "for" pq queria praticar o uso dele, mas como você disse que não tem jeito de funcionar, vou dar um revisada na ferramenta pra saber quando usar ou não. Obrigado pela ajuda, a dica do console é muito boa!

Abraço.

por Marcio
| 270.6k xp | 11 posts

Entendi! Se quiser um desafio pra treinar o for, tenta criar um circulo de cada cor lado a lado quando o botão direito do mouse (menu de contexto) for clicado, você vai precisar usar o for para percorrer o array e criar os círculos! ;)

Pode marcar como resolvido esse tópico! =)

Valeu e bons estudos!