2
respostas

Um novo jeito de escrever o código para resolver um problema irritante

Olá a todos!

Após a finalização desse exercício algo me irritou, toda vez que eu clicava em Alt+Shift aparecia a mensagem no alert mas mesmo assim a bolinha era desenhada. Tentei alguns códigos alternativos e cheguei à esse resultado:

<canvas width="600" height="400"></canvas>

<script>

    var tela = document.querySelector("canvas");
    var pincel = tela.getContext("2d");
    var cores = ["blue", "red", "green"];

    var count = 0;

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


    function mudaCor(){

        count ++;

        if(count>=cores.length){ 
            count = 0;
        }

        return false


    }

    var raio = 5;

    function exibeBolinha(evento){

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


        if(evento.shiftKey && evento.altKey){

            alert("Por favor, aperte apenas SHIFT ou ALT");

        } else {

            if (evento.altKey){

            raio = raio-5;

            } 

            else if(evento.shiftKey){

                raio = raio + 5;

            } 

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

            console.log(evento);
            }

    }


    tela.onclick = exibeBolinha;     

    tela.oncontextmenu = mudaCor;






</script>

Assim resolvi meu toc com aquela bolinha rs. Não levei em consideração o limite do raio nesse exercício

2 respostas

Oi Paulo George Moreira Richa existem limites para o crescimento e para o tamanho mínimo da bolinha, no seu algoritmo isso não está mais acontecendo e faz parte da especificação do exercício, posta o seu código que você disse que desenhava mesmo se tivessemos pressionando as duas teclas e possso te ajudar a identificar o porquê.

Oi Maicon, os limites não estão no código por uma questão de... gosto? hahaha Fiz o exercício com e sem a especificação, essa parte do exercício não foi problema.

Mesmo no código do exercício esse problema aparece:

<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 raio = 10;
    var incremento = 5;

    function desenhaCirculo(evento) {

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

        console.log(x + ',' + y);

        if (evento.shiftKey && evento.altKey) {

            alert('Só aperte uma tecla por vez, por favor!');

        } else if(evento.shiftKey && raio + incremento <= 40) {
            raio = raio + incremento;

        } else if(evento.altKey && raio - incremento >= 10) {
            raio = raio - incremento;

        }

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

    tela.onclick = desenhaCirculo;

</script>

Ao pressionar shift+alt e clicar, após o ok na mensagem de alert a bolinha aparece na tela, o código acima foi minha solução para esse problema :) De qualquer forma, segue o código com a especificação de limite

<canvas width="600" height="400"></canvas>

<script>

    var tela = document.querySelector("canvas");
    var pincel = tela.getContext("2d");
    var cores = ["blue", "red", "green"];

    var count = 0;

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


    function mudaCor(){

        count ++;

        if(count>=cores.length){ 
            count = 0;
        }

        return false


    }

    var raio = 5;
    var incremento = 5;


    function exibeBolinha(evento){

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


        if(evento.shiftKey && evento.altKey){

            alert("Por favor, aperte apenas SHIFT ou ALT");

        } else {

            if(evento.shiftKey && raio + incremento <=40){

                raio = raio + incremento;

            } else if (evento.altKey && raio - incremento >=5){

                raio = raio - incremento;

            } 

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

            console.log(evento);
            }

    }


    tela.onclick = exibeBolinha;     

    tela.oncontextmenu = mudaCor;






</script>