Entrar Ainda não tem acesso?
1
resposta

Por que cores e índice se associam?

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 Thomas Alves Hackel
| 23.4k xp | 13 posts

Oi, gente, eu ainda estou apanhando dos Array e uma coisa que me deixa meio sem entender é porque as duas variáveis se associam no código da resposta do professor.

O que temos é:

var cores = ['blue', 'red', 'green']
var indiceCorAtual = 0;

E depois a função:

 function mudaCor() {

    indiceCorAtual++;

    if(indiceCorAtual >= cores.length) {
        indiceCorAtual = 0; // volta para a primeira cor, azul
    }

    return false; // para não exibir o menu padrão do canvas
}

Mas na função não tem nada que relacione que a variável indiceCorAtual vai puxar os índices do array da variável cores, então por que ele faz? Só por ser declarada logo abaixo do array, no início do código?

1 resposta
por Murilo Teixeira da Silva Santos
| 104k xp | 20 posts
Bolsista 

pincel.fillStyle = cores[indiceCorAtual];

É a linha acima que muda a cor de acordo com o valor de indiceCorAtual. Se toda vez que alguém clicar o mouse esse valor for incrementado, a lista de cores vai sendo percorrida. E quando o indice estourar o limite da matriz ele volta a zero e o processo de percorrer as cores uma a uma se repete.


var cores = ['blue', 'red', 'green']
var indiceCorAtual = 0; // começa com blue

function desenhaCirculo(evento) {

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

}



function mudaCor() {

    indiceCorAtual++;

    if(indiceCorAtual >= cores.length) {
        indiceCorAtual = 0; // volta para a primeira cor, azul
    }

    return false; // para não exibir o menu padrão do canvas
}

Repare nos lugares onde aparece indiceCorAtual.

Espero ter ajudado.