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

[duvida] solução diferente - problema de lógica?

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 Fernando Sloth
| 90.4k xp | 73 posts

Mais uma vez, na minha inocência escrevi uma solução diferente para o exercício. Funcionou normalmente. A minha preocupação é que como estamos praticando lógica de programação, e eu geralmente encontro soluções diferentes para os exercícios. Isso seria um problema com o meu entendimento sobre a lógica, ou posso ficar tranquilo que é apenas códigos escrito por um iniciante sem experiência?

Quem tiver curiosidade de saber, a minha resposta para o exercício foi:

    <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);

        function desenhaCirculo(evento) {

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

            if (evento.shiftKey) {
                pincel.fillStyle = 'blue';
                pincel.beginPath();
                pincel.arc(x, y, 20, 0, 2 * 3.14);
                pincel.fill();
                console.log(x + ',' + y);
            }else{
                pincel.fillStyle = 'blue';
                pincel.beginPath();
                pincel.arc(x, y, 10, 0, 2 * 3.14);
                pincel.fill();
                console.log(x + ',' + y);
            }

        }

        tela.onclick = desenhaCirculo;

    </script>
3 respostas
solução!
por Luis Dias
| 2400.2k xp | 1810 posts
Developer (⌐■_■)

Oi, Fernando

Sua lógica está certa, mas todo código pode ser melhorado

Você sempre vai sentir a necessidade de refatorar (melhorar a estrutura sem modificar o comportamento) o seu próprio código

Por curiosidade, pedi ao Chat GPT para refatorar o seu código.

Resutado:


<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);

    function desenhaCirculo(evento) {
        var x = evento.pageX - tela.offsetLeft;
        var y = evento.pageY - tela.offsetTop;
        var raio = evento.shiftKey ? 20 : 10;

        pincel.fillStyle = 'blue';
        pincel.beginPath();
        pincel.arc(x, y, raio, 0, 2 * Math.PI);
        pincel.fill();
        console.log(x + ',' + y);
    }

    tela.addEventListener('click', desenhaCirculo);

</script>

As alterações feitas nesta versão incluem:

  • A lógica para definir o raio dos círculos foi movida para uma única linha, removendo a necessidade do bloco if-else.
  • O evento onclick foi substituído pelo evento addEventListener('click', desenhaCirculo), que é uma forma mais moderna de adicionar eventos.
  • A função console.log foi mantida, mas é opcional e pode ser removida se desejado.

    Essas alterações tornam o código mais curto, legível e eficiente.

por Fernando Sloth
| 90.4k xp | 73 posts

Aprendi que refatorar código é necessário e que um código sempre pode melhorar. Obrigado pela atenção!

por Mateus Felipe De Souza
| 82.3k xp | 19 posts

Eu ia falar isso agora, e achei o seu... Pra não perder a evolução do último código também fiz uma alternativa. 

<!DOCTYPE html>

<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 cores = ['blue', 'red', 'green'];
    var indiceCorAtual = 0;

    function desenhaCirculo (evento){
        var x = evento.pageX - tela.offsetLeft;
        var y = evento.pageY  - tela.offsetTop;
        pincel.fillStyle = cores[indiceCorAtual];
        pincel.beginPath();
        if (evento.shiftKey) {
            pincel.arc(x, y, 30, 0, 2 * 3.14);
        pincel.fill();
        console.log(x + ',' + y);}
    else {pincel.arc(x, y, 10, 0, 2 * 3.14);
        pincel.fill();
        console.log(x + ',' + y);
    }

    }
    tela.onclick = desenhaCirculo;

    function mudaCor () {
        indiceCorAtual++;
        if(indiceCorAtual >= cores.length){
           indiceCorAtual = 0; 

        }
        return false;
    }


    tela.oncontextmenu = mudaCor;

</script>

</html>