2
respostas

Exercio proposto

Pessoal, conseguir fazer e incremetei o alerta para a mudança das cores, e tambem incrementei a redução do raio pelo ctrl

gostaria de pedir a opnião de vocês sobre o cod.

<canvas width="600" height="400">Quadro de Bolinhas</canvas>

<script>
    var tela = document.querySelector('canvas');
    var pincel = tela.getContext('2d');
    pincel.fillStyle = 'grey';
    pincel.fillRect(0, 0, 600, 400);

    //Variáveis

    var Cor = ['blue', 'red', 'yellow', 'green'];
    var Index = 0; 
    var CorPTBR = ['Azul', 'Vermelha', 'Amarela', 'Verde']
    var Raio = 10;

    //Funções

    function desenhaCirculo(evento) {

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

        pincel.fillStyle = Cor[Index];
        pincel.beginPath();

        // verificadores o shiftKey e CtrlKey ambos tem valor true por padrão
        if(evento.shiftKey){
            Raio = Raio+10;
        }
        // Raio>11 é para impedir que o valor do raio chegue a 0
        if(evento.ctrlKey && Raio>11){
            Raio = Raio-10;
        }
        pincel.arc(x, y, Raio, 0, 2 * 3.14);

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

    }
    function shift(evento){
        alert('Funcionou');
    }

    function trocarCor(direito){
        Index++;
        if(Index >= Cor.length){
            Index = 0;
        }
        alert('Sua nova dor é '+CorPTBR[Index]);
        return false;
    }

    tela.onclick = desenhaCirculo;
    tela.oncontextmenu = trocarCor;
    tela.shiftKey = shift;

</script>
2 respostas

Olá, Antonione!

Me diverti muito com o seu projeto. O interessante é que só precisei ler o código para entender o que precisava fazer para desenhar os círculos na tela. Ficou intuitivo , você leva jeito para o desenvolvimento de games :D

Olha como ficou o meu desenho:

Imagem contem vários círculos coloridos e com diferentes tamanhos

Parabéns novamente!

Um abraço e bons estudos!

Obrigado Camila e desculpa a demora na resposta

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software