Entrar Ainda não tem acesso?
1
resposta

Trocando de cor - Está certo ?

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 Geovani Oliveira Da Luz
| 42.3k xp | 50 posts
Assistente de Gestão Pública 
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bolinhas</title>
</head>
<body>
    <canvas width="600" height="400"></canvas>

    <script>
        let tela = document.querySelector("canvas");
        let pincel = tela.getContext("2d");
        let contador = 0;

        pincel.fillStyle="grey";
        pincel.fillRect(0,0,600,400);
        pincel.fill();

        function desenhaCiruculo(evento){
            let x = evento.pageX - tela.offsetLeft;
            let y = evento.pageY - tela.offsetTop;

            pincel.fillStyle="blue";
            pincel.beginPath();
            pincel.arc(x,y,10, 0,2*3.14);
            pincel.fill();
        }

        function mudaCor(evento){
            let x = evento.pageX - tela.offsetLeft;
            let y = evento.pageY - tela.offsetTop;
            let cores=["red", "green", "blue"];

            if (contador >= 3){
                contador = 0;
            }

            if (contador == 0){
                pincel.fillStyle=cores[contador];
                pincel.beginPath();
                pincel.arc(x,y,10, 0,2*3.14);
                pincel.fill();
            }

            pincel.fillStyle=cores[contador];
            pincel.beginPath();
            pincel.arc(x,y,10, 0,2*3.14);
            pincel.fill();

            contador = contador+1; 

            return false;
        }

        tela.onclick = desenhaCiruculo;
        tela.oncontextmenu = mudaCor;

    </script>

</body>
</html>
1 resposta
por Vamberto Fernandes De Souza Junior
| 46.6k xp | 37 posts

Boa tarde Geovani, você cresceu bastante o código, daria pra ser mais sucinto, contudo vamos lá.

Você não precisa informar na troca de cores as coordenadas que foi clicada, então function mudaCor(evento){ let x = evento.pageX - tela.offsetLeft; <- esse pode ser removido, informação que você não vai usar. let y = evento.pageY - tela.offsetTop; <- esse pode ser removido, informação que você não vai usar. let cores=["red", "green", "blue"]; <- esse seria melhor ficar no inicio do código, fora da função, você só remete ao Array depois na hora do cálculo e mudança.

As condições dos If's ficaram boas por chegar ao resultado, mas podem ser simplificadas para:

function mudaCor() { contador++; // a cada clique ele vai aumentar o valor do contador e ele inicia em 0 - 1 click, vai a 1, outro clique vai a 2, 2 é igual o tamanho da array? zera o contador então. if (contador == cores.length) { contador = 0; } return false;

Só que, para reduzir a usa função mudaCor você precisa alterar a função desenhaCirculo também

pincel.fillStyle= cores[contador]; <- apenas essa mudança fará com que toda vez que clicar com o botão direito, o contador muda de número e retorna a palavra (cor) que está na posição (0, 1 ou 2);

Mas como eu falei, se o seu código funcionou dessa maneira, está correta a resposta, ele somente ficou muito extenso, que poderia ser reduzido nesses pontos.