Solucionado (ver solução)
Solucionado
(ver solução)
7
respostas

Trocando de cor alternativo.

O meu código ficou um pouco diferente, um pouco mais longo. Em termos de técnica, ele estaria excessivo?

<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 paleta = ["blue", "green", "red", "yellow"];

    var corInicial = paleta.length - 1;
    var tinta = paleta[corInicial];

    var i = 0

    function mudaCor() {

        if(i < (paleta.length - 1)) {
        tinta = paleta[i];
        i = i + 1;

        } else {

        tinta = paleta[i]
        i = 0;

        }    
                return false;
    }

    tela.oncontextmenu = mudaCor;


    function circulo(x, y, cor) {
        pincel.fillStyle = cor;
        pincel.beginPath();
        pincel.arc(x, y, 10, 0, 2 * 3.14);
        pincel.fill();
    }

    function desenhaCirculo(evento) {

        var x = evento.pageX - tela.offsetLeft;
        var y = evento.pageY - tela.offsetTop;

        circulo(x, y, tinta);

        console.log(x + " e " + y);

    }

    tela.onclick = desenhaCirculo;



</script>
7 respostas

Olá Ricardo! Parabéns pelo código, é testando alternativas que vamos realmente aprendendo. Existem diversas maneiras de chegarmos ao mesmo resultado em programação. A solução que você encontrou atende os requisitos pedidos e por ser um código pequeno não traz grandes problemas. Mas já é bom ir pensando na real necessidade de criarmos determinadas funções e variáveis. Podemos e devemos criar funções e variáveis auxiliares para facilitar a legibilidade e manutenção do código. Mas cuidado com os excessos, pois em códigos mais complexos vai deixar seu arquivo um pouco mais pesado e isso pode prejudicar a performance de sua aplicação.

Por exemplo. Não vejo necessidade da funcão circulo(). Este trecho de código poderia estar dentro da função desenhaCirculo(). Pra ficar fácil verificar a necessidade de uma função ou não lembre-se, a função é algo que você quer executar, logo, o que a gente executa é uma ação e uma ação é expressa por um verbo. Então o que a função circulo() faz? Ela desenha um círculo. E por que não colocá-la dentro da função desenhaCirculo()? Entendeu?

O mesmo acontece com a variável corInicial. Ela é realmente necessária? Se isso facilitar a sua leitura do código, ok, mas será que o código ficaria difícil de entender se ela não existisse? E a variável i, o que ela significa? Poderíamos dar um nome para identificá-la mais facilmente. Se fizéssemos assim, ficaria legível?

 var posicaoCor = 0
 var tinta = paleta[posicaoCor];

São essas perguntas que devemos fazer aos pensarmos em criar variáveis e funções.

Abraços e sucesso nos estudos!

Oi André, no caso da função círculo, Ricardo separou a responsabilidade de criar um círculo do evento que chama essa função.

A circulo não esta amarrada um um evento, por isso não recebe event. Já desenhaCirculo, que é uma função para tratar evento (um eventHandler) recebe event que é passado automaticamente pelo navegador. Separando essas duas funções, permite que circulo seja chamada em qualquer parte do nosso programa, independente se é um evento ou não.

Agora, sobre corInicial, bem, ela não é usada em nenhum outro lugar, só naquele trecho de código. Sendo assim, em teoria...ela não é necessária, mas seu uso pode deixar o código mais legível. Por exemplo, a intenção de Ricardo foi colocar a última cor do array como inicial, eu teria coloca a primeira, mas ele quis deixar claro isso.

Agora, só a lógica do mudaCor que pode ficar ainda melhor, vou explicar o motivo.

Essa instrução (paleta.length - 1) não é muito clara. Comparece o meu gabarito com a sua solução de if. Se achar que a sua ficou mais claro, beleza, é o programador que decide. Se achar a minha mais clara, dá uma estudada nela.

No mais.. fica evidente que Ricardo tentou fazer sem ver a resposta do instrutor, algo que é nota 10!

Sucesso e bom estudo para vocês.

Olá Flávio, realmente não atentei-me a essa possibilidade de reaproveitamento da função circulo(). Deixando ela de fora é uma boa opção que o Ricardo fez sim. Só mudaria os nomes das funções, deixaria a função circulo() como desenhaCirculo() e a atual desenhaCirculo() mudaria para desenhaCirculoComMouse(). Mas aí é mais gosto pessoal mesmo!

Abraços!

É uma boa sim. O que temos que ter em mente é que uma função é sempre uma ação, por isso é bom sempre usar verbo.

No entanto, há funções em JavaScript (isso em cursos mais avançados) que são usadas para criar objetos e são chamadas de constructor functions (usada quando não se usa classes do ES2015/ES6). Elas começam em caixa alta e são substantivos. Isso não faz parte do escopo desse treinamento, mas demonstra que a linguagem JavaScript tem detalhes que vão bem além mesmo.

solução!

Flávio e André, obrigado pelo esclarecimentos.

De fato, eu sempre me esforço bastante em tentar desenvolver o código sem olhar a ajuda. Depois que o meu código funciona eu comparo com o gabarito. As vezes é bem semelhante, outras vezes é bem diferente, como aconteceu agora.

Contudo, mesmo com o gabarito eu acredito ser muito válido expor o meu código aqui no fórum para ouvir as observações de vocês. Realmente, eu havia me esquecido dessa questão de sempre usar um verbo no nome da função. Esta no curso e eu havia esquecido!

Já absorvi a lógica do gabarito, de fato é bem mais simples do que minha solução. Essas diferenças entre a minha solução e o gabarito sempre ficam bem marcadas na minha memória e sempre utilizo nos exercícios posteriores. Esse procedimento acaba sendo muito compensador.

Mais uma vez obrigado pela atenção.

Att.

Rapaz, vou até marcar sua resposta como solução para você ganhar os pontos. Continue assim Ricardo!

Obrigado Flávio!