Não entendi essa frase também

Olá José tudo bem com você??

Vamos lá =)

Aqui nesse trecho você consegue entender o que as variáveis xAleatorio e yAleatorio fazem né?

function atualizaTela() {
    limpaTela();
    xAleatorio = sorteiaPosicao(600);
    yAleatorio = sorteiaPosicao(400);
    desenhaAlvo(xAleatorio, yAleatorio);

Elas são as variáveis responsáveis por desenhar de forma aleatória os dois círculos vermelhos na tela.

Raio é o tamanho do círculo, X e Y disparam os eventos na tela.

Aqui é a lógica para garantir que o click do mouse realmente acertou no centro do nosso alvo. Para tal, é o cálculo :

if((x > xAleatorio - raio)  //Aqui o tá falando que o evento do click só vai acertar o círculo central e aqui embaixo garante que para as outras possibilidades isso também funcione.
    && (x < xAleatorio + raio) 
    && (y > yAleatorio - raio)
    && (y < yAleatorio + raio)) {

        alert('Acertou!');

    }

Espero ter te ajudado e qualquer dúvida só falar com a gente!

Esse "x<xAleatorio + raio "(e os outros) estão me confundindo porque x pode ser qualquer lugar que cliquei e xAleatorio é o lugar onde está o alvo "mais o raio"? não consigo entender a lógica. Não entendi porque não poderia ser:

if ((x==xAleatorio) &&(y==yAleatorio)){ 
alert("acertou");
}

Olá José, tudo bem com você?

Então, essa parte do condicional pode parecer um pouco confusa, então vou mostrando com calma, recomendo você colocar sempre alguns prints para tentar decifrar um pouco :)

Em relação ao seu ponto:

Não entendi porque não poderia ser: if ((x==xAleatorio) &&(y==yAleatorio)){ 

Então, até "poderia" mas ai teríamos que clicar no pixel perfeito do canvas para acertar, não bastaria apenas acertar na parte vermelha, e você pode inclusive parar o alvo e verá que isso é absurdamente difícil :)

Você pode checar isso adicionando esse seguinte print:

    console.log("Valor de X e Y do mouse " + x + "---" + y);
    console.log("Valor de X e Y do alvo "+ xAleatorio + "---" + yAleatorio);

E por conta disso vem esses 4 condicionais, pois iremos trabalhar com uma taxa de acerto e não o ponto exato, então vou começar com o primeiro:

(x > xAleatorio - raio)

Esse primeiro condicional é para que verificar se o valor de x do mouse está realmente numa área valida do canvas, evitando que ele clique em alguns dos cantos e venha a ganhar o jogo, mas ainda temos um problema:

Se o nosso alvo estiver no centro e o usuário clicar no canto direito o valor de x vai ser maior que o valor do x- raio do alvo, e ele "ganharia" também, para evitar isso adicionamos mais um condicional:

(x < xAleatorio + raio)

Esse condicional permite que a gente só pegue a parte central do nosso alvo, dessa forma se o usuário clicar para a direita e ter um valor como x = 500 estaremos protegido porque o x + raio de nosso alvo não será maior, você pode checar isso com esse print:

    console.log("O valor de X do Mouse: " + x + " O valor do X + raio do Alvo: " + (xAleatorio + raio));

Veja que se a gente inclusive clicar no alvo na parte branca o valor de x ainda vai ser maior que o x+ raio dando falso para o nosso teste :)

E agora o primeiro o condicional é muto importante, porque se clicássemos no canto de fato da tela o nosso x do mouse seria menor que o x + raio do nosso alvo, então evitamos um falso positivo.

Ou seja combinando esses 2 condicionais garantimos que o clique do mouse está dentro do alvo e principalmente, se está na parte central!

E a analogia é a mesma para as próximas duas condições a única diferença é que queremos olhar agora o eixo vertical :)

Mas fique tranquilo caso ainda esteja parecendo um pouco estranho lógica de clique e colisões de jogos são sempre bem complicadas de pegar da primeira vez, colocando os prints você vai ver de fato como estamos selecionando a área desejada

Abraços e Bons Estudos!