TIRO AO ALVO

Fiz um pouco diferente, sem as funções atualizarTela() e gerarNumeroAleatorio().

<canvas width="600" height="400"></canvas>
<script>
    var tela = document.querySelector("canvas");
    var pincel = tela.getContext("2d");

    tela.style.backgroundColor ="grey";

    var raio = 10;
    var maximoX = 540;
    var maximoY = 340;
    var yA;
    var xA;


    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,600,400);
    }



    function desenhaAlvo(){
        limpaTela();
        //gerando numeros Aleatorios toda vez que o alvo for desenhado
        yA = Math.floor(Math.random()*maximoY); //FLOOR arredonda para baixo
        xA = Math.floor(Math.random()*maximoX); //ao contrario do ROUND que arredonda pra cima


        //esta condicional é para evitar que o alvo apareca incompleto no CANVAS(o 60 se dá pelo RAIO do ALVO)
        if(yA < 60){
            yA = 60;
        }
        if(xA < 60){
            xA = 60;
        }

        desenhaCirculo(xA,yA,raio+20,"red");
        desenhaCirculo(xA,yA,raio+10,"white");
        desenhaCirculo(xA,yA,raio,"red");
    }



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

        if(x >= (xA-raio) && x <= (xA +raio)){
            if(y >= (yA-raio) && y <= (yA +raio)){
                alert("Acertou!");

            }
        }

    }



    setInterval(desenhaAlvo,1500);
    tela.onclick = tiro;


</script>