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

Dúvida sobre a variável.

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 Ley
| 175k xp | 208 posts

A princípio meu código estava escrito assim:

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 posicao = 0;###
   ###var cor = cores[posicao]###

    function desenhaCirculo(e){

        var x = e.pageX - tela.offsetLeft;
        var y = e.pageY - tela.offsetTop;
        pincel.fillStyle = ###cor;###
        pincel.beginPath();
        pincel.arc(x, y, 10, 0, 2 * 3.14);
        pincel.fill();
        console.log(x + ',' + y);

    }

    tela.onclick = desenhaCirculo;



    function mudarCor(){
        if(posicao < cores.length){
            posicao++
        }
        if(posicao >= cores.length){
            posicao = 0;    
        }

        return false
    }

    tela.oncontextmenu = mudarCor;

Não estava funcionando. Resolvi fazer uma alteração de acordo com a instrução do professor e o código funcionou, ele ficou dessa forma:

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 posicao = 0;###


    function desenhaCirculo(e){

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

    }

    tela.onclick = desenhaCirculo;



    function mudarCor(){
        if(posicao < cores.length){
            posicao++
        }
        if(posicao >= cores.length){
            posicao = 0;    
        }

        return false
    }

    tela.oncontextmenu = mudarCor;
</script>

Como puderam perceber - coloquei em destaque ### - no primeiro programa eu apenas criei uma variável a mais para organizar melhor o código. Contudo, o programa não rodou. Eu tive que mudar 6 por meia dúzia.

Afinal, ###var posicao = 0;###

###var cor = cores[posicao]### é equivalente a dizer: ###cores[posicao];###.

Alguém sabe dizer o pq o primeiro programa está errado?

8 respostas
por Leonardo Veras Alves Souza
| 86.6k xp | 59 posts
CTO

Oi Ley, tudo bem?

O que acontece é o seguinte, na sua primeira versão a variável cor é definida logo no começo e seu valor nunca é atualizado, por isso as cores não mudam. Se você mover a linha: ###var cor = cores[posicao]### para dentro de: function desenhaCirculo(e){ verá que irá funcionar

Abraços

por Ley
| 175k xp | 208 posts

Eae, Léo. Obrigado pela resposta!

Você consegue me explicar melhor pq o valor nunca é atualizado? Não consigo entender isso.: \

por Leonardo Veras Alves Souza
| 86.6k xp | 59 posts
CTO

Opa! Posso sim!

O que acontece é o seguinte: Você colocou "var cor = cores[posicao]" no bloco <script> porém fora de uma função. Todo o conteudo desse bloco será executado uma vez quando a pagina for aberta. Menos as funções, pois elas estão linkadas à eventos no seus elementos html (certo?), como naquele onclick onde vc atribui a função desenhaCirculo a esse atributo. Ou seja toda vez que houver um click no elemento aquele trecho do código correspondente à função será executado, mas o resto não

por Ley
| 175k xp | 208 posts

Mas assim, eu sei que quando a página abre o que estiver no bloco script será executado somente uma vez.

Acontece que existe uma função(mudaCor), que fica abaixo das variáveis, e essa função tem como propósito mudar o valor da variável 'posicao'.

Se o programa roda sempre em sequência, lendo linha por linha, imagina-se que a sequencia dos acontecimentos dentro do programa aconteceriam assim:

1)O programa lê todas as variáveis assim que a página é carregada. 2) a variável posicao tem valor 0. 3) eu clico com o botão direito do mouse e, agora a posicao tem valor 1. 4)somente então eu clico com o botao esquerdo do mouse e o circulo que irá ser desenhado buscará na variável cor o indice onde a cor se encontra, que agora é 1.

Quando a função desenhaCirculo for buscar o índice da cor ela não será mais 0, será 1, então deveria ter rodado normal.

É como acontece quando usamos uma variável booleana. Ela é declarada falsa dentro do bloco script mas usamos, dentro de uma função, uma condição para que ela se torne verdadeira. Assim que a condição é satisfeita ela volta a ser falsa sem precisar ter de declara-lá como falsa novamente.

por Leonardo Veras Alves Souza
| 86.6k xp | 59 posts
CTO

Então,

Isso aqui: 4)somente então eu clico com o botao esquerdo do mouse e o circulo que irá ser desenhado buscará na variável cor o indice onde a cor se encontra, que agora é 1.

Não acontece, pois a parte que a cor = cores[posicao] ocorreu logo que seu programa abriu. No caso ele ja tinha buscado a cor muito antes de vc clicar

E aqui está certo: Ela é declarada falsa dentro do bloco script mas usamos, dentro de uma função, uma condição para que ela se torne verdadeira.

Mas como vc disse, uma função muda o valor da sua booleana, e no caso da cor nenhuma função muda o valor dela, pois ela não está sendo atribuída em nenhuma função e sim no escopo global

por Ley
| 175k xp | 208 posts

Nossa, cara. Eu vou chorar : \ . Não faz sentido.

  • Não acontece, pois a parte que a cor = cores[posicao] ocorreu logo que seu programa abriu. No caso ele ja tinha buscado a cor muito antes de vc clicar

Como que ele buscou a cor se eu não tinha executado a função?

  • Mas como vc disse, uma função muda o valor da sua booleana

A minha função mudarCor muda/incrementa o valor da variável posicao

De qualquer forma muito obrigado pela ajuda!!!

solução!
por Leonardo Veras Alves Souza
| 86.6k xp | 59 posts
CTO

Oiii, tudo bem?

Hahaha, esse tipo de dúvida faz parte.

"Como que ele buscou a cor se eu não tinha executado a função?" - Porque logo no começo do seu código, na parte do bloco <script> há essas três linhas:

var cores = ["blue","red","green"];

###var posicao = 0;###

###var cor = cores[posicao]###

Dessa forma como posição é 0 no começo então cor = 'blue'. Isso não está em nenhuma função, logo será executado apenas no momento que o programa for aberto.

"A minha função mudarCor muda/incrementa o valor da variável posicao" - Exato, aumenta o valor de posicao, mas onde você atualiza o valor de 'cor'? Se não atualizar em uma função, mesmo que vc atualize 'posição' para 0,1,2 o valor de cor vai ser sempre blue.

Acho que você está se confundindo pois na atribuição de cor vc coloca cor = cores[posicao] e deve estar achando que basta aumentar o valor de posição que o valor de cor vai alterar tmb, mas não é isso que acontece, quando você alterar posição terá de logo em sequencia colocar: cor = cores[posicao], para que o valor novo seja baseado na posição nova.

por Ley
| 175k xp | 208 posts

acho que agora entendi um pouco melhor. Muito obrigado!