Entrar Ainda não tem acesso?
2
respostas

A bolinha atravessa o oponente (Sem biblioteca)

Referente ao curso Lógica de programação: comece em lógica com o jogo Pong e JavaScript, no capítulo Criando a raquete do oponente e atividade Colisão com o oponente

por Kelvin Cristian Freitas Maciel
| 28.5k xp | 7 posts

Segui o passo a passo, porém optei por não utilizar a solução do Git Hub, mas minha bolinha atravessa a raquete do oponente, onde posso ter errado?

//variaveis bolinha

let xBolinha = 300;
let yBolinha = 200;
let diametro = 15;
let raio = diametro /2;

// velocidade da bolinha
let velocidadexBolinha = 2;
let velocidadeyBolinha = 2;

// variaveis raquete1
let xRaquete1 = 3;
let yRaquete1 = 160;
let largura1 = 10;
let comprimento1 = 80;

// variaveis raquete2
let xRaquete2 = 588;
let yRaquete2 = 160;
let largura2 = 10;
let comprimento2 = 80;
let velocidadeyRaquete2;

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

function draw() {
  background(0);
  mostraBolinha();
  movimentaBolinha();
  verificaColisaoBorda();
  raquete1();
  raquete2();
  movimentaRaquete1();
  movimentaRaquete2();
  verificaColisaoRaquete1();
  verificaColisaoRaquete2();
}

function raquete1(){
  rect (xRaquete1, yRaquete1, largura1, comprimento1);
}

function raquete2(){
  rect (xRaquete2, yRaquete2, largura2, comprimento2);
}
function mostraBolinha() {
  circle(xBolinha, yBolinha, diametro);
}

function movimentaBolinha(){
  xBolinha += velocidadexBolinha;
  yBolinha += velocidadeyBolinha;
}

function verificaColisaoBorda (){
  if (xBolinha + raio > width ||
     xBolinha - raio < 0){
    velocidadexBolinha *= -1
  }
  if (yBolinha + raio > height ||
     yBolinha - raio < 0) {
    velocidadeyBolinha *= -1
  }
}

function movimentaRaquete1(){
  if (keyIsDown(UP_ARROW))
    yRaquete1 -= 10;

  if (keyIsDown(DOWN_ARROW))
    yRaquete1 +=10;
}

function verificaColisaoRaquete1(){
  if (xBolinha - raio < xRaquete1 + largura1 && yBolinha - raio < yRaquete1 + comprimento1 && yBolinha + raio > yRaquete1)
  {velocidadexBolinha *= -1;
  }
}

function verificaColisaoRaquete2(){
  if (xBolinha + raio > xRaquete2 && yBolinha + raio > yRaquete2 + comprimento2 && yBolinha + raio < yRaquete2)
  {velocidadexBolinha *= -1;
  }
}

function movimentaRaquete2(){
  velocidadeyRaquete2 = yBolinha - yRaquete2 - comprimento2 / 2 - 30
  {yRaquete2 += velocidadeyRaquete2}
}
2 respostas
por Felipe Costacurta Paruce
| 242.8k xp | 58 posts
Analista junior

Olá Kelvin,

Apenas a verificação no eixo X deve ser invertida ao da raquete1. As verificações no eixo Y devem ser iguais. Teste desta maneira:

function verificaColisaoRaquete2(){
  if (xBolinha + raio > xRaquete2 && yBolinha - raio < yRaquete2 + comprimento2 && yBolinha + raio > yRaquete2){
          velocidadexBolinha *= -1;
  }
}

Eu também fiz sem a biblioteca e o meu ficou desta maneira:

//Variaveis da bolinha
let xBolinha = 300;
let yBolinha = 200;
let diametro = 20;
let raio = diametro/2;

//Velocidade da bolinha
let velocidadeXBolinha = 6;
let velocidadeYBolinha = 6;

//Variaveis da raquete
let xRaquete = 5;
let yRaquete = 175;
let raqueteComprimento = 10;
let raqueteAltura = 90;

//Variaveis da raquete do oponente
let xRaqueteOponente = 585;
let yRaqueteOponente = 175;
let velocidadeYOponente = 5;
let chanceDeErrar = 0;

//Placar do jogo;
let pontosMeu = 0;
let pontosOponente = 0;

//Sons do jogo
let raquetada;
let ponto;
let trilha;
function preload(){
  trilha = loadSound("trilha.mp3");
  ponto = loadSound("ponto.mp3");
  raquetada = loadSound("raquetada.mp3");
}
function setup() {
  createCanvas(600, 400);
  trilha.loop();
}

function draw() {
  background(0);
  mostrabolinha();
  mostraraquete();
  mostraraquete(xRaquete, yRaquete);
  mostraraquete(xRaqueteOponente, yRaqueteOponente);
  incluiplacar();
  movimentabolinha();
  movimentaminharaquete();
  movimentaraqueteoponente();
  verificacolisaoborda();
  verificacolisaoraquete();
  verificacolisaoraqueteoponente();
  marcaponto();
}
function mostrabolinha(){
  fill(color (205,204,0));
  circle(xBolinha,yBolinha,diametro);
}
function mostraraquete(x, y){
  fill(255);
  rect(x, y, raqueteComprimento, raqueteAltura);
}
function incluiplacar(){
  stroke(255);
  textSize(16);
  textAlign(CENTER);
  fill(color(255,140,0))
  rect(150,10,40,20);
  rect(450,10,40,20);
  fill(255);
  text(pontosMeu,170,26);
  text(pontosOponente, 470, 26)
}
function movimentabolinha(){
  xBolinha += velocidadeXBolinha;
  yBolinha += velocidadeYBolinha;
}
function movimentaminharaquete(){
  if (keyIsDown(UP_ARROW)){
    yRaquete -= 10;
  }
  if (keyIsDown(DOWN_ARROW)){
    yRaquete += 10;
  }
}
function movimentaraqueteoponente(){
  velocidadeYOponente = yBolinha-yRaqueteOponente-raqueteComprimento/2-30;
  yRaqueteOponente += velocidadeYOponente + chanceDeErrar;
  calculachancedeerrar();
}
function calculachancedeerrar() {
  if (pontosOponente >= pontosMeu) {
    chanceDeErrar += 1
    if (chanceDeErrar >= 39){
    chanceDeErrar = 40
    }
  } else {
    chanceDeErrar -= 1
    if (chanceDeErrar <= 35){
    chanceDeErrar = 35
    }
  }
}
function verificacolisaoborda(){
  if (xBolinha+raio > width || xBolinha-raio < 0){
    velocidadeXBolinha *= -1;
  }
  if (yBolinha+raio > height || yBolinha-raio < 0){
    velocidadeYBolinha *= -1;
  }
}
function verificacolisaoraquete (){
  if (xBolinha-raio < xRaquete+raqueteComprimento &&
     yBolinha-raio < yRaquete+raqueteAltura &&
     yBolinha+raio > yRaquete){
    velocidadeXBolinha *= -1;
    raquetada.play();
  }
}
function verificacolisaoraqueteoponente (){
  if (xBolinha+raio > xRaqueteOponente &&
     yBolinha-raio < yRaqueteOponente+raqueteAltura &&
     yBolinha+raio > yRaqueteOponente){
    velocidadeXBolinha *= -1;
    raquetada.play();
  }
}
function marcaponto(){
  if (xBolinha > 590){
    pontosMeu += 1;
    ponto.play();
  }
  if (xBolinha < 10){
    pontosOponente += 1;
    ponto.play();
  }
}
por Kelvin Cristian Freitas Maciel
| 28.5k xp | 7 posts

Opa Felipe! Muito obrigado! Agora funcionou perfeitamente!