Entrar Ainda não tem acesso?
1
resposta

Quando passa de 3 vezes que a funcao mudaCor e iniciada, continua vermelho! E nao volta azul como era o esperado

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 Era uma vez uma bolinha que virou um bolão!

por Caio Oliveira Marques
| 157.5k xp | 37 posts
<canvas width="600" height= "400">
<script>

var tela= document.querySelector("canvas")
var pincel= tela.getContext("2d")

function mudarCor(){
    if(corAtual> 3){corAtual=0}
    corAtual++
    alert("funcionou")
    return false
    }

var corAtual=0
var cores= ["blue", "yellow", "red"];

function criarCirculos(informacao){
    var posicaoMouseX=informacao.pageX
    var posicaoMouseY=informacao.pageY
    pincel.fillStyle= cores[corAtual];
    pincel.beginPath()
    pincel.arc(posicaoMouseX, posicaoMouseY, 50, 0, 2*3.14)
    pincel.fill()
}

tela.onclick= criarCirculos
tela.oncontextmenu = mudarCor;


</script>
1 resposta
por Cássio Murilo
| 1276.7k xp | 2204 posts
Instrutor Agile Master

Fala, Caio! Tudo bem contigo?

Basta somente nós alterarmos o incremento corAtual++ para o início da função para que ele acrescente a próxima cor antes de entrar na condição if e assim gerar a constante. 

    function mudarCor() {
      corAtual++
      if (corAtual >= 3) {corAtual = 0}      
      alert("funcionou")
      return false
    }

Ah! uma outra alteração foi ter colocado corAtual >= 3 (faça o teste com > e >= para ver a diferença ;-)

Outro ponto que podemos mexer seria colocar 

if (corAtual >= cores.length)

Pode ser que um dia você possa colocar mais cores e se deixarmos estipulado

  if (corAtual >= 3)

Teríamos que mexer dentro do código também.

O cores.length contabiliza o todo dentro da array.

O seu não está errado, mas pode evitar mexer muito na estrutura do código!

Espero ter ajudado, Caio!!!

Um abraço e bons estudos!!!