1
resposta

placar tudo ou nada

coloquei um placarzinho pra contar os acertos, mas é só para os fortes.. ele é zerado a cada clique errado. quantos tiros você consegue acertar antes de errar? [não vale alterar o código pra alterar o setInterval, hein!] kk

<canvas width="680" height="400"></canvas>
<br>
Acerte o centro alvo! <br>
Cliques certeiros somam pontos no SCORE, mas... <br>
...cliques errados ZERAM o placar.


<script>

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

    pincel.fillStyle = 'lightgray';
    pincel.fillRect(0, 0, 680, 400);

    var raio = 10;

    var xAleatorio;
    var yAleatorio;

    var pontos = '0';

    function desenhaTexto(x, y, cor, texto){
        pincel.font = '20px Georgia';
        pincel.fillStyle = cor;
        pincel.fillText(texto, x, y);
    }

    function desenhaRetangulo(x, y, largura, altura, cor){
        pincel.fillStyle = cor;
        pincel.beginPath();
        pincel.fillRect(x, y, largura, altura);
    }

    function desenhaPlacar(x, y, largura, altura,){
        desenhaRetangulo(x, y, largura, altura, 'black');
        desenhaTexto(x+5, y+20, 'yellow', 'SCORE');
        desenhaRetangulo(x, y+altura, largura, altura, 'black');
        desenhaTexto(x+5, y+altura+20, 'yellow', pontos);
    }

    function desenhaCirculo(x, y, raio, cor) {

        pincel.fillStyle = cor;
        pincel.beginPath();
        pincel.arc(x, y, raio, 0, 2 * Math.PI);
        pincel.fill();

    }

    function limpaTela() {
        pincel.clearRect(0, 0, 680, 400);
    }

    function atualizaPlacar() {
        pincel.clearRect(680, 0, 80, 60);
        desenhaPlacar(600, 0, 80, 30);
    }

    function desenhaAlvo(x, y){
        desenhaCirculo(x,y, raio+20, 'red')
        desenhaCirculo(x, y, raio+15, 'white');
        desenhaCirculo(x, y, raio+10, 'red');
        desenhaCirculo(x, y, raio+5, 'white');
        desenhaCirculo(x, y, raio, 'red');

    }

    function sorteiaPosicao(maximo){

        return Math.floor(Math.random() * maximo);

    }

    function atualizaTela(){
        limpaTela();
        atualizaPlacar();        
        xAleatorio = sorteiaPosicao(400);
        yAleatorio = sorteiaPosicao(400);
        desenhaAlvo(xAleatorio, yAleatorio);

    }

    setInterval(atualizaTela, 3000);

    function dispara(evento) {

        var x = evento.pageX - tela.offsetLeft;
        var y = evento.pageY - tela.offsetTop;
        if( (x > xAleatorio - raio)
            && (x < xAleatorio + raio)
             && (y > yAleatorio - raio)
              && (y < yAleatorio + raio)){
            pontos++;
        } else {
            pontos = 0;
        }
        atualizaPlacar();
    }

    tela.onclick = dispara;
</script>
1 resposta

Ahahah... Bacana, Caique!

Mas zerar o placar dá até uma dor no coração ahah

Mais uma vez mandou muito bem!!!

Continue sempre assim, meu amigo!

Tem evoluído muito e está no caminho certo!

Um abraço e bons estudos!!