[duvida] solução diferente - problema de lógica? | JavaScript e HTML: pratique lógica com desenhos, animações e um jogo

Solucionado (ver solução)

Solucionado
(ver solução)

3
respostas

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

| 3379.8k xp | 3759 posts

13/01/2023

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

14/01/2023

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

18/01/2023

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>