ACERTANDO O ALVO EM MOVIMENTO!

Com a ideia de alguns colegas, decidi implementar um alvo em movimento. Se alguém teve a mesma ideia, segue minha solução:

<canvas width="600" height="400"></canvas>

<script>
    let tela = document.querySelector('canvas');
    let pincel = tela.getContext('2d');
    // pincel.fillStyle = 'lightgray';
    // pincel.fillRect(0, 0, 600, 400);
    let raio = 10;
    let x = 20;
    let y = 30;
    let cor = 'blue'
    let sentidoDireita = true;
    let tempoIntervalo = 5;

    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 atualizaTela() {
        limpaTela();

        desenhaCirculo(x, y, raio + 20, 'red'); // maior círculo
        desenhaCirculo(x, y, raio + 10, 'white');
        desenhaCirculo(x, y, raio, cor); // menor circulo

        if (x == 600 - (raio + 20)) {
            sentidoDireita = false;
            // cor = 'red'
        }
        else if (x == 0 + (raio + 20)) {
            sentidoDireita = true;
            // cor = 'blue'
        }
        if (sentidoDireita) {
            x++;
        }
        else {
            x--;
        }
    }

    var meuInterval = setInterval(atualizaTela, tempoIntervalo)

    function dispara(evento) {

        var xDisparo = evento.pageX - tela.offsetLeft;
        var yDisparo = evento.pageY - tela.offsetTop;

        if ((xDisparo >= (x - raio) && xDisparo <= (x + raio)) && (yDisparo >= (y - raio) && yDisparo <= (y + raio))) {
            alert("Acertou mizeravi!")
            clearInterval(meuInterval);
        }

    }

    tela.onclick = dispara;

</script>