Mudança de cor limitada | JavaScript e HTML: pratique lógica com desenhos, animações e um jogo

2
respostas

por Angello Cassio Vasconcelos Oliveira

| 46.9k xp | 8 posts

1º Tenente Aviador

Fiz o código a minha maneira e depois copiei da forma do gabarito, contudo o erro permaneceu. Ao clicar com o botão direito para mudar de cor dá certo até o terceiro clique, no quarto a cor não muda e no quinto não exibe nem o alerta mais. Já o revisei e copiei o do instrutor e permanece.

<meta charset="utf-8">
<title>Bola</title>
<head><h2>Clique na área delimitada.</h2></head>
<canvas width="800" height="800"></canvas>
<script type="text/javascript">

    var tela = document.querySelector ("canvas");
    var pincel = tela.getContext ("2d");
    pincel.fillStyle = "lightGrey";
    pincel.fillRect (0,0,800,800);

    function desenhaBola(evento){

        var x = evento.pageX - tela.offsetLeft
        var y = evento.pageY - tela.offsetTop
        pincel.fillStyle= cor[i];
        pincel.beginPath();
        pincel.arc (x,y, 10, 0 ,2*Math.PI);
        pincel.fill();
        console.log (x + "," + y);
    }
    tela.onclick = desenhaBola;

    var cor = ["blue", "green", "red"];
    var i = 0
    function mudaCor() {

            i=i+1
            alert('Funcionou!');
            return false;
            if (i>=cor.length){
            i=0
        }        
    }
    tela.oncontextmenu = mudaCor;
</script>

2 respostas

por André Moeller

| 127.4k xp | 47 posts

08/04/2018

Olá Paloma,

Na função mudaCor, você colocou código depois da linha

return false;

e isto fará com o código após esta linha seja ignorado pois a função pára a execução no return. Para funcionar corretamente você pode colocar o código antes do return:

    function mudaCor() {

            i=i+1
            alert('Funcionou!');
            if (i>=cor.length){
                i=0
            }        
            return false;
    }

por Adriano Nascentes C. Queiroz

| 110.5k xp | 29 posts

08/04/2018

Olá Paloma,

Você utilizou um return antes do final do seu bloco de código while e antes da condição.

Isso esta fazendo com que no primeiro clique seu contador tenha 1, depois 2, depois 3... e assim por diante. Quando ele vai percorrer o array, ele não volta a posição e continua contando, por isso não muda mais de cor a partir do terceiro clique.

Para você resolver isso ter que colocar o seu retorno ao final do seu bloco while.

    function mudaCor() {

            i=i+1
            alert('Funcionou!');
            if (i>=cor.length){
                i=0
            }        
            return false;
    }

Abraços!