Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Minha bolinha está travada no meio só movimenta no eixo y

Referente ao curso Lógica de programação: comece em lógica com o jogo Pong e JavaScript

por Andrey Mariotto dos Santos
| 73.2k xp | 10 posts
let xBolinha = 300;
let yBolinha = 200;
let diametro = 15;
let raio = diametro /2
let velocidadeXB = 5
let velocidadeYB = 5
let xRaquete = 5
let yRaquete = 150
let comprimentoRaquete = 10
let alturaRaquete = 90
let xRaqueteOponente = 585 
let yRaqueteOponente = 150
let velocidadeYOponente ;

function setup() {
  createCanvas(600, 400);
}

function draw() {
  background(0);

  mostraBolinha();
  movimentaBolinha();
  colisaoBorda();
  mostraRaquete(xRaquete , yRaquete) ;
  movimentaRaquete();
  verificaColisaoRaquete (xRaquete,yRaquete,yRaquete) ;
  mostraRaquete(xRaqueteOponente,yRaqueteOponente)
  movimentaRaqueteOponente();
verificaColisaoRaquete(xRaqueteOponente,yRaqueteOponente,yRaqueteOponente)
}

function mostraBolinha(){

  circle (xBolinha,yBolinha,diametro);
}
function movimentaBolinha(){
   xBolinha += velocidadeXB
  yBolinha += velocidadeYB
}

function colisaoBorda(){
    if (xBolinha + raio > width || xBolinha - raio < 0 ) {
    velocidadeXB *= -1
  }
  if (yBolinha + raio > height ||
     yBolinha - raio < 0) {
    velocidadeYB *= -1
  }
}
function mostraRaquete(x , y){
  rect(x , y ,comprimentoRaquete ,alturaRaquete)
}
function movimentaRaquete (){
  if(keyIsDown(UP_ARROW)){
    yRaquete -= 10
  }
  if(keyIsDown(DOWN_ARROW)){
    yRaquete += 10
  }
}
function verificaColisaoRaquete (x,y,z){
  if(xBolinha - raio < x + comprimentoRaquete &&
    yBolinha - raio < y +alturaRaquete &&
    yBolinha + raio > z) {

velocidadeXB *= -1

  }
}
function movimentaRaqueteOponente (){
    velocidadeYOponente = yBolinha - yRaqueteOponente - comprimentoRaquete / 2 - 30;
    yRaqueteOponente += velocidadeYOponente

}
3 respostas
solução!
por Camila Pessôa
| 920.3k xp | 1928 posts
Alura Scuba Team

Olá, Andrey. Tudo bem com você?

Testei seu código no meu p5.js e observei alguns detalhes que vou destacar em comentários no código abaixo:

let xBolinha = 300;
let yBolinha = 200;
let diametro = 15;
let raio = diametro /2
let velocidadeXB = 5
let velocidadeYB = 5
let xRaquete = 5
let yRaquete = 150
let comprimentoRaquete = 10
let alturaRaquete = 90
let xRaqueteOponente = 585 
let yRaqueteOponente = 150

let colidiu = false; //inserir variável colidiu com o valor = false

let velocidadeYOponente ;

function setup() {
  createCanvas(600, 400);
}

function draw() {
  background(0);

  mostraBolinha();
  movimentaBolinha();
  colisaoBorda();
  mostraRaquete(xRaquete , yRaquete) ;
  movimentaRaquete();
  verificaColisaoRaquete (xRaquete,yRaquete) ; //retirar o último yRaquete
  mostraRaquete(xRaqueteOponente,yRaqueteOponente)
  movimentaRaqueteOponente();
verificaColisaoRaquete(xRaqueteOponente,yRaqueteOponente)//retirar o último yRaquete
}

function mostraBolinha(){

  circle (xBolinha,yBolinha,diametro);
}
function movimentaBolinha(){
   xBolinha += velocidadeXB
  yBolinha += velocidadeYB
}

function colisaoBorda(){
    if (xBolinha + raio > width || xBolinha - raio < 0 ) {
    velocidadeXB *= -1
  }
  if (yBolinha + raio > height ||
     yBolinha - raio < 0) {
    velocidadeYB *= -1
  }
}
function mostraRaquete(x , y){
  rect(x , y ,comprimentoRaquete ,alturaRaquete)
}
function movimentaRaquete (){
  if(keyIsDown(UP_ARROW)){
    yRaquete -= 10
  }
  if(keyIsDown(DOWN_ARROW)){
    yRaquete += 10
  }
}

function verificaColisaoRaquete(x, y){ //consumir a biblioteca do collide
  colidiu = collideRectCircle(x, y,comprimentoRaquete,alturaRaquete, xBolinha,yBolinha,raio);
  if (colidiu){
    velocidadeXB *= -1;
  }
}

function movimentaRaqueteOponente (){
    velocidadeYOponente = yBolinha - yRaqueteOponente - comprimentoRaquete / 2 - 30;
    yRaqueteOponente += velocidadeYOponente

}

Não esqueça de adicionar a biblioteca do collide no seu projeto e referenciá-la no arquivo index.html. Além disso, uma sugestão é aplicar a prática do camel Case para declarar variáveis no seu código, pois é considerada uma boa prática dentro do ambiente de desenvolvimento.

Espero que tenha ajudado!

Um abraço e bons estudos!!!

por Andrey Mariotto dos Santos
| 73.2k xp | 10 posts

Oie tudo bem quando estou colocando a o collide mesmo com a sua biblioteca mas o erro agora ![](Insira aqui a descrição dessa imagem para ajudar na acessibilidade )

Ja mudei a biblioteca mas o erro ainda perciste e agora até a raquete do oponente está sumindo

por Camila Pessôa
| 920.3k xp | 1928 posts
Alura Scuba Team

Oi, Andrey!

Seu p5.js está informando que há um erro de referência, ou seja, você precisa informar que está usando a biblioteca. E como fazemos isso?

Indicamos no nosso arquivo index.html que vamos consumir a biblioteca collide. Vou inserir o código abaixo para você colocar no seu index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.3.1/p5.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.10.2/addons/p5.sound.min.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta charset="utf-8" />

  </head>
  <body>
    <script src="sketch.js"></script>
    <script src="p5.collide2d.js.js"></script>

  </body>
</html>

Verifique se o arquivo index.html está parecido com este

Um abraço e bons estudos!