Estou criando meu código e estou na parte da function mostraRaqueteOponente. Entendi que a altura continua sendo a mesma, então não precisa ser definida, porem para as raquetes ficarem na mesma posição afastada da borda, tem que se criar uma variável comprimentoRaqueteOponente sendo negativa. No vídeo diz que a altura e comprimento são os mesmos.
Ja entendi o porque de nao estar sendo definido o comprimento da segunda Raquete. Nao tinha notado que a xRaqueteOponente estava com o valor 585, ja descontando os 10 do comprimento
Oi Caio, tudo bem?
Fico feliz que tenha conseguido entender os conceitos aplicados ao comprimento da raquete.
Ambas as raquetes, do oponente e a do jogador, precisam possuir o mesmo comprimento (espessura) e altura (tamanho), para que nenhuma tenha vantagem sobre a outra, por isso que ambas podem usar o mesmo comprimento e altura.
let comprimentoRaquete = 10;
let alturaRaquete = 90No jogo de pong cada jogador fica em um lado da mesa, e aqui no jogo virtual de pong não seria diferente, cada raquete assume uma posição no eixo cartesiano x, de modo que cada uma ocupe lados opostos da mesa.
Para entender os números colocados nessas variáveis é importante compreender o funcionamento do plano cartesiano dentro do p5. Os eixos “x” e “y” tem seu início, ou seja, pontos zero para “x” e zero para “y”, no canto superior esquerdo e a medida eles se direcionam no eixo “x”, da esquerda para direita, e no eixo “y”, de cima para baixo, os valores vão crescendo até chegar no valor máximo do canvas utilizado, que neste caso é 600.
Desse modo a posição “x” do jogador e do oponente estarão em localidades opostas do canvas de acordo com a variável criada para cada um:
// posição x da raquete do jogador
let xRaquete = 5;
// posição x da raquete do oponente
let xOponente = 585;Perceba que o valor para a posição “x” da raquete do jogador é mais próximo de zero por conta dele estar mais próximo da lateral esquerda da tela, enquanto que o valor para a posição “x” da raquete do oponente apresenta um valor mais próximo do limite do canvas que é 600, por conta de estar posicionado na lateral direita da tela.
Caso queira se aprofundar mais em relação ao plano cartesiano do P5.js, deixo como recomendação a leitura de um artigo aqui da Alura que explica em detalhes o funcionamento das coordenadas:
Espero ter ajudado. Caso tenha dúvidas, estarei à disposição.
Grande abraço e bons estudos!