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

É possível simplificar?

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 O bolão que deseja emagrecer!

por Anderson Ferreira Pinto
| 91.9k xp | 62 posts

Boa galera!

Aqui deu certo, mas acredito que dê pra simplificar kkkk

<canvas width = "1000" height = "1000"></canvas>

<script>

    var tela = document.querySelector("canvas");
    var pincel = tela.getContext("2d");

    pincel.fillStyle = "grey";
    pincel.fillRect(0, 0, 1000, 1000);

    var cores = ["blue", "red", "green"]
    var cor = 0
    var raio = 10

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


        while(evento.shiftKey){

            raio = raio + 10
            break;


        }

        if(raio > 40){

                raio = 10
        }

        while(evento.altKey){

            raio = raio - 5
            break;

        }

        if(raio < 10){

            raio = 10

            }


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


    }


    function mudaCor(){

        cor++;

        if(cor == 0){

            alert("Mudou cor para: Azul");
        }
        if(cor == 1){

            alert("Mudou cor para: Vermelho");
        }
        if(cor == 2){

            alert("Mudou cor para: Verde")
        }

        if(cor > 2){

            cor = 0;
        }


        return false;


    }


tela.onclick = desenhaBola;


tela.oncontextmenu = mudaCor;


</script>
2 respostas
por Cássio Murilo
| 1282.3k xp | 2204 posts
Instrutor

Fala, Anderson! Tudo bem contigo?

Desculpe a demora em dar um retorno

Podemos utilizar um método chamado Switch Case dentro da função mudaCor:

    function mudaCor(){

        cor++;
        switch (cor) {
            case 1:
                cor == 1;
                alert("Mudou cor para: Vermelho");
                break;
            case 2:
                cor == 2;
                alert("Mudou cor para: Verde");
                break;
            default:
                cor == 0;
                break;
        }


        return false;


    }

Porém, fica como desafio, como retornar para o azul novamente?

Aguardo seu retorno, Anderson

Um abraço e bons estudos

solução!
por Anderson Ferreira Pinto
| 91.9k xp | 62 posts

Caramba cara, eu to impressionado com o quanto eu quebrei a cabeça pra fazer isso kkkk.

Vamos lá: Eu entendi que cada vez que eu clico, eu somo o valor. primeiramente 1, depois 2, depois 3.

Na minha cabeça, quando se tornava 3, o default transformava esse 3 em zero. E se ele é zero, por que não muda pra azul de novo?

Aqui deu certo, mas a única maneira que eu consegui fazer foi assim:

 function mudaCor(){

         cor++;

         if(cor == 3){

             cor = 0
         }


        switch (cor) {
            case 0:
                cor == 0;
                alert("Mudou cor para: Azul")
                break;
            case 1:
                cor == 1;
                alert("Mudou cor para: Vermelho");
                break;
            case 2:
                cor == 2;
                alert("Mudou cor para: Verde");
                break;
            default:
                cor == 0;
                break;
        }


        return false;


    }