1
resposta

Tiro ao alvo com algumas melhorias

Fiz um contador para a pontuação enquanto o jogador vai acertando. Limitei também a criação do alvo a borda do canvas para que o alvo não fosse criado cortado.

<canvas width="1600" height="720">

</canvas>
<br>

<h1>Você acertou <span>0</span> Vezes</h1> 

<script>

    var tela = document.querySelector('canvas');
    var canetinha = tela.getContext('2d');
    canetinha.fillStyle = 'lightgrey';
    canetinha.fillRect(0,0 , 1600,720);

    var raio = 20;
    var xRandom;
    var yRandom;

    var pontos = 0;
    var span = document.querySelector('h1 span');

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

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

    function limpaTela(){
        canetinha.clearRect(0,0 , 1600, 720);
        canetinha.fillStyle = 'lightgrey';
        canetinha.fillRect(0,0 , 1600,720);
    }

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

   function sorteiaPosicao(minimo, maximo){
        return Math.floor(Math.random() * (maximo - minimo) + minimo);
   }

   function atualizaTela(){
        limpaTela();
        xRandom = sorteiaPosicao(40,1560);
        yRandom = sorteiaPosicao(40,680);

        desenhaAlvo(xRandom, yRandom);

   }

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

    if((x > xRandom - raio)
     && (x < xRandom + raio)
     && (y > yRandom - raio)
     && (y < yRandom + raio)){

        pontos = pontos + 1;

        span.innerHTML = pontos;        

    }
   }


    tela.onclick = dispara;

    setInterval(atualizaTela, 1000);






</script>
1 resposta

Oi Danilo, ficou muito bom. E teu código tá muito organizado, parabéns.

Bons estudos!