Olá, gente, eu não entendi a condição do IF

Oi Raul, na verdade o único código dentro do IF é o alert, todo o resto acima é simplesmente a condição para entrar no IF, uma forma melhor de você visualizar é a seguinte:

if((x > xAleatorio - raio) && (x < xAleatorio + raio) && (y > yAleatorio - raio) && (y < yAleatorio + raio)) {
    alert('Acertou!');
}

O IFficou estruturado daquela forma para deixar visualmente mais fácil de ler.

Isso, rsrsrsrs, ao invés de dizer código, eu deveria ter dito condição para o IF. Justamente a condição do IF que eu não entendi nada =(

Um pouco antes no código, é feito o desenho do circulo, correto?

function atualizaTela() {

        limpaTela();
        // veja que foi removido a palavra var, porque as variáveis já foram declaradas antes.
        // O que fazemos aqui é apenas atualizar os valores das variáveis xAleatorio e yAleatorio
        xAleatorio = sorteiaPosicao(600);
        yAleatorio = sorteiaPosicao(400);
        desenhaAlvo(xAleatorio, yAleatorio);    
}

Para saber se você clicou corretamente nesse circulo, o dispara evento pega a posição do mouse

var x = evento.pageX - tela.offsetLeft;
var y = evento.pageY - tela.offsetTop;

e após isso o IF entra em ação, ele faz um cálculo para saber se o click está dentro da área delimitada pelo circulo.

Joel, muito grato pela sua ajuda =D =D

Lendo uma outra aula do professor, agora entendi perfeitamente o porque do uso de -raio e +raio, x, y....dentro desse IF.

Segue o comentário do professor e o código dado por ele em uma aula diferente:

"O algoritmo, a lógica de acerto.

A lógica de acerto é a seguinte. Sabemos que as coordenadas x e y do alvo é 300 e 200, respectivamente, certo? Então, precisamos comparar essas coordenadas com as coordenadas do clique do mouse. O problema é que não podemos testar se o x e y do clique é igual ao x e y do alvo, porque estaríamos obrigando o jogador a clicar exatamente no centro do alvo. Queremos considerar como acerto qualquer coordenada x e y dentro do círculo menor, aquele com raio 10.

Então, se o x do alvo é 300, qualquer clique entre 290 e 310 é válido. Mas de onde eu tirei essa faixa de acerto? Levando em consideração o raio do círculo. Levo em consideração 10 pontos à esquerda do centro do menor círculo e 10 pontos à direita. Então, basta fazermos a mesma coisa com o y!"

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

<script>

    var tela = document.querySelector('canvas');
    var pincel = tela.getContext('2d');

    pincel.fillStyle = 'lightgray';
    pincel.fillRect(0, 0, 600, 400);

    var raio = 10;

    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);
    }

    desenhaCirculo(300,200, raio + 20, 'red');
    desenhaCirculo(300,200, raio + 10, 'white');
    desenhaCirculo(300,200, raio, 'red');

    function dispara(evento) {

        var x = evento.pageX - tela.offsetLeft;
        var y = evento.pageY - tela.offsetTop;


        if ((x > 300 - raio) 
            && (x < 300 + raio)
                && (y > 200 - raio) 
                    && (y < 200 + raio)) {

            alert('Acertou');
        }
    }

    tela.onclick = dispara;

</script>

Que bom que você entendeu, pode assustar a analise no inicio, mas é bem tranquila.

Bons estudos