Dificuldade de entender a lógica do

Boa tarde.

Eu estou com dificuldade para entender a lógica desta aula.

Então, tudo o que estiver na direita é mais (+) e tudo que estiver na esquerda é menos (-) ?

ex: xBolinha + raio > largura

xBolinha - raio < 0

Entendi que limite da largura fica no canto direito da tela, e limite do canto esquerdo é 0. Então se eu estiver certo, uso esta lógica pra entender a aula, principalmente na parte a seguir:

function verificaColisaoRaquete() {
    if (xBolinha - raio < xRaquete + raqueteComprimento) {
        velocidadeXBolinha *= -1;
    }
}

E também, pelo meu entendimento, se eu usar o xBolinha menos ( - ) raio, então o raio deixaria de bater na borda do objeto, fazendo com que o diametro da bolinha entrasse no objeto.

Fala ai Israel, tudo bem? Vamos lá, vou tentar explicar as partes da colisão.

O primeiro passo, é verificar se a ponta esquerda da bolinha toca a ponta direita da raquete.

Para pegar a ponta esquerda da bolinha, podemos usar o xBolinha, porém, ele será o centro da bolinha, precisamos que seja a ponta, ou seja, a borda esquerda.

Para isso desconsideramos o raio, por exemplo:

Imagine que o centro da bolinha seria 10px no eixo X, a bolinha possuí 10px de altura e 10px de largura.

Para pegar a borda esquerda da mesma, poderíamos fazer algo:

const alturaBolinha = 10px
const larguraBolinha = 10px
const raio = largura / 2 // 5px
const xBolinha = 10px

const pontaEsquerda = xBolinha - raio // 10px - 5px = 5px

Então a ponta esquerda da bolinha está no 5px do eixo X.

Essa seria a primeira parte do if:

xBolinha - raio

Agora a segunda parte:

xRaquete + raqueteComprimento

Segue a mesma ideia, porém, está querendo pegar a ponta direita da raquete.

Espero ter ajudado.