2
respostas

Implementando uma nova solução para o Alert!

Percebi que o professor retirou o código do alert no último passo do código, por isso resolvi implementar uma solução colocando o alert da seguinte forma:

<meta charset="utf-8">

<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;
        pincel.beginPath();
        pincel.arc(x, y, 10, 0, 2 * 3.14);
        pincel.fill();
        console.log(x + ',' + y);
    }

    pincel.fillStyle = 'blue';

    tela.onclick = desenhaCirculo;

    var contador = 1;
    var cores = ['blue', 'red', 'green'];

    function mudaCor() {

        if(contador <= cores.length - 1) {

            pincel.fillStyle = cores[contador];

            alert('Você mudou para ' + cores[contador]);

            contador++;
        } else {

            contador = 0;
        }

        return false;
    }

    tela.oncontextmenu = mudaCor; 

</script>

O alert não pôde vir de qualquer forma, visto que se colocado dentro do if com a restrição comum de contador <= cores.length. A condição do if começa com 1 e vai até 3, então, no último laço a condição deixa o contador com 4 e dependendo de onde foi alocado o alert a mensagem é definida como undefined.

Para isto não acontecer coloquei a condição no if contador <= cores.length - 1, dessa maneira a cada vez que clicarmos com o botão direito do mouse temas a sequência começando do contador com 1, se clicarmos com o botão direito o fillStyle passa de 'blue' para o 'red' que está na posição 1, recebemos uma alerta e ganhamos mais 1 de incremento no contador. A segunda vez que clicarmos com o botão direito do mouse o contador estará com o valor 2 que colocará a cor 'green' do array no comando fillStyle, da mesma forma com o alert e incrementará + 1 no valor do contador encerrando a condição; permitindo, assim, reiniciar o contador do 0 no else e recomeçar a condição if com a cor 'blue'.

Este tópico não é exatamente uma dúvida, mas, uma solução de uma possível ideia de melhorar o código da aula. Percebi que algumas pessoas já haviam comentado sobre o alert no fórum, mas, como tive a mesma questão resolvi compartilhar com vocês para uma implementação pra vocês da minha forma de resolver sem muitas linhas de código.

Esse foi o meu comentário.

Caso alguém queira falar um pouco mais a respeito ou mesmo implementar mais alguma funcionalidade no código fico disponível para tentarmos!

Um forte abraço!

2 respostas

Uau, muito bacana o seu, fiz bem parecido.

Show de bola Carlos!!