Criei o jogo antes de ver o curso. (Jogo acerte o alvo) | JavaScript e HTML: pratique lógica com desenhos, animações e um jogo

Quando inicie a primeira aula da última etapa acreditei que estava pronto pra criar o programa. E com pouco de trabalho e bastantes erros consegui. Segue o código. Agora vou assistir as aulas e ver como o professor ver para analisar as diferenças.

<!DOCTYPE html>
<canvas width="600" height="400"></canvas>

<script>
    var tela = document.querySelector('canvas');
    var pincel = tela.getContext('2d');
    var tt=Math.round(Math.random()*1000)
    var raio = 10;
    var x=300;
    var y=200;
    /* Esse bloco cria o primeiro circulo no centro*/
    /* Também serve pra criar as var x e y que serão atualizadas depois*/
    desenhaCirculo(x,y, raio + 20, 'red'); 
    desenhaCirculo(x,y, raio + 10, 'white');
    desenhaCirculo(x,y, raio, 'red'); 

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

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

    function dispara(evento) {
        var a = evento.pageX - tela.offsetLeft;
        var b = evento.pageY - tela.offsetTop;
        var distancia=((x-a)*(x-a))+((y-b)*(y-b)); /*Equação reduzida de circunferência */
        if (distancia<=(raio*raio)){ 
            alert('Acertou Miseravi!');
            /* Foi usado a equação reduzida da circuferẽncia para aumentar a precisão,
            No programa original do acerte o alvo se vc clica fora do centro há regiões 
            que consideram como acerto. Usei essa equação pra corrigir isso*/
        }
    }

    function desenhaAlvo(){
        limpaTela();
        x=numeroAleatorio(30,570);
        y=numeroAleatorio(30,370);
        /*as coordenadas dos numeros aletórios estão definidas 
        de tal modo que o centro fique a distancia de pelo menos
        um raio das bordas*/
        desenhaCirculo(x,y, raio + 20, 'red'); 
        desenhaCirculo(x,y, raio + 10, 'white');
        desenhaCirculo(x,y, raio, 'red'); 
        /* importante observar que x e y não tem "var" na frente
        pois objetivo é que essas coordenadas tenham efeito global
        por isso importante ter definido x e y no começo. Dessa 
        forma agora x e y são atualizados tanto dentro quanto fora da função*/ 
    }

    function numeroAleatorio(i,f){
        /* cria uma coordenada aleatória dentro dos limites do canvas */
        var k=0; 
        while (k==0){
            var num=Math.round(Math.random()*1000);
            if (num>=i && num<=f){
                k=1;
            }
        }            
        return num;
    }

    setInterval(desenhaAlvo,2000);    

    tela.onclick = dispara;

</script>

Olá, Fernando! Tudo bom contigo?

Antes de tudo, agradeço a paciência em aguardar uma resposta.

Parabéns pelo código que você desenvolveu! Não só o fato de tê-lo construído de maneira autônoma é sensacional, mas também o modo pelo qual você fez isso.

O seu código está muito bem organizado e indentado. Além disso, gostaria de salientar que adorei o fato de você ter utilizado artifícios matemáticos para aperfeiçoá-lo — nesse caso, a Equação Reduzida da Circunferência — e também vários comentários explicativos.

Caso se sinta confortável em apresentar seu programa para mais pessoas, deixo como recomendação acessar a comunidade da Alura no Discord. O pessoal que fica por lá gosta bastante de tirar dúvidas e compartilhar projetos.

Abaixo há um artigo e um vídeo da Alura que comentam sobre isso:

Se aparecerem dúvidas ao longo dos seus estudos, sinta-se confortável para enviá-las ao fórum. Ficarei contente em te ajudar!

Continue assim e até mais! :)