minha versão do tiro ao alvo

<canvas width="800" height="600"></canvas>
<button onclick="aleatorizaAlvo()">Iniciar!</button>

<script>

    var tela = document.querySelector('canvas');
    var pincel = tela.getContext('2d');
    var largura = 800;
    var altura = 600;
    function desenhaRetangulo() {
    pincel.fillStyle = 'lightgray';
    pincel.fillRect(0, 0, largura, altura);
    }

    pincel.fillStyle = 'lightgray';
    pincel.fillRect(0, 0, largura, altura);

    var raio = 10;
    var randomX;
    var randomY;
    
    function desenhaCirculo(x, y, raio, cor) {

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

    function aleatorizador(maximo) {
        randomX = Math.floor(Math.random() * 600);
        randomY = Math.floor(Math.random() * 400);

    }
    

    function alvo(x, y) {
        desenhaCirculo(randomX,randomY, raio + 20, 'red'); // maior círculo
        desenhaCirculo(randomX,randomY, raio + 10, 'white');
        desenhaCirculo(randomX,randomY, raio, 'red'); // menor circulo
    }


    function aleatorizaAlvo() {
        desenhaRetangulo();
        aleatorizador();
        alvo();
        console.log(randomX + "," + randomY);
    }

    

    function dispara(evento) {

        var x = evento.pageX - tela.offsetLeft;
        var y = evento.pageY - tela.offsetTop;
        if (x <= (randomX + 10) && x > (randomX - 10) && y < (randomY + 10) && y > (randomY - 10)) {
            console.log("Acertou!");
            aleatorizaAlvo();
        }

       // lógica de acerto?
    }

    tela.onclick = dispara;
</script>

na realidade não tão tiro ao alvo assim, ele somente resete o alvo em uma nova posição quando você clica nela, fazendo dele mais um teste e pratica de mira, bom pra galera do cs e valorant :)