Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

A bolinha ou acerta, ou erra.

Teria alguma forma de fazer com que a raquete do oponente as vezes acerte e as vezes erre a bolinha? O jeito que está ou acerta ou erra (dependendo da subtração do movimento da raqueteoponente) e sempre na mesma posição. Se sim, qual seria o código pra as vezes errar e as vezes acertar, creio eu que o jogo ficaria bem mais divertido assim.

Aqui vai meu código caso queira dar uma olhada.

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

//raquete
let xRaquete = 5;
let yRaquete =150;
let comprimentoRaquete = 10;
let alturaRaquete = 90;

//variáveis oponente
let xRaqueteOponente = 585;
let yRaqueteOponente = 150;
let velocidadeYOponente;


//velocidade bolinha (dificuldade)
let velocidadeXBolinha = 4;
let velocidadeYBolinha = 4;

//background do jogo
function setup() {
  createCanvas(600, 400);
}

//funções jogo
function draw() {
  background(50);
  mostrabolinha();
  movimentaçaobolinha();
  verificadorcolisao();
  mostraraquete(xRaquete, yRaquete);
  movimentaraquete();
  verificadorcolisaoraquete();
  mostraraquete(xRaqueteOponente, yRaqueteOponente);
  movimentaraqueteoponente();
}

//programação
function mostrabolinha(){
  circle(xBolinha, yBolinha, diametro)}

function movimentaçaobolinha(){
  xBolinha += velocidadeXBolinha;
  yBolinha += velocidadeYBolinha;}

function verificadorcolisao(){
  if (xBolinha + raio > width ||
      xBolinha - raio < 0){
    velocidadeXBolinha *= -1}
  if (yBolinha + raio > height || 
      yBolinha - raio < 0){
    velocidadeYBolinha *= -1}}

function mostraraquete(x, y){
  rect(x, y, comprimentoRaquete, alturaRaquete)}

function movimentaraquete(){
  if (keyIsDown(UP_ARROW)){yRaquete -= 5;}
  if (keyIsDown(DOWN_ARROW)){yRaquete += 5;}}

function verificadorcolisaoraquete(){
  if (xBolinha - raio < xRaquete + comprimentoRaquete && yBolinha - raio < yRaquete + alturaRaquete && yBolinha + raio > yRaquete){velocidadeXBolinha *= -1}}

function movimentaraqueteoponente(){
  velocidadeYOponente = yBolinha - yRaqueteOponente - alturaRaquete / 2 - 20;
  yRaqueteOponente += velocidadeYOponente

}
3 respostas

Olá, Lucas! Tudo bem com você?

Essa é uma implementação bem interessante no seu código e que vai deixar seu jogo mais divertido :)

Ao final do curso há uma sugestão de código para fazer a Raquete do Oponente errar , é uma função que verifica se os pontos do oponente são iguais ou maiores que seus pontos, e a partir disso aumenta a chance do erro da raquete do oponente.

Você pode conferir através do link da aula: https://cursos.alura.com.br/course/pong-javascript/task/63122

Além disso há um tópico super bacana aqui no fórum onde alguns alunos deixaram suas sugestões de código, vale a pena conferir no tópico: Sugestão para conseguir fazer pontos

Compartilhe sua solução conosco :)

Bons estudos e estamos aqui em caso de dúvida!

Mas nesses casos, enquanto o oponente não estiver liderando eu não faço o ponto? Existe de fato uma maneira definitiva de randomizar quando a raquete do oponente vai acertar/errar independente do placar do jogo? Já terminei o jogo mas a chance de errar não importa se a gente não deixar ele marcar um ponto, se o placar tiver 0 a 0 e a gente não errar, o oponente também nunca errará, existe uma maneira definitiva de fazer ele errar e acertar randomicamente? Segue meu código do jogo PRONTO:

//bolinha
let xBolinha = 300;
let yBolinha = 200;
let diametro = 18;
let raio = diametro / 2;

//raquete
let xRaquete = 5;
let yRaquete =150;
let comprimentoRaquete = 10;
let alturaRaquete = 90;

//variáveis oponente
let xRaqueteOponente = 585;
let yRaqueteOponente = 150;
let velocidadeYOponente;


//velocidade bolinha (dificuldade)
let velocidadeXBolinha = 4;
let velocidadeYBolinha = 4;

//pontuação
let meusPontos = 0;
let pontosDoOponente = 0;

//sons do jogo
let raquetada;
let musicafundo;
let ponto;

function preload() {
    musicafundo = loadSound("Dance Around.wav");
    ponto = loadSound("Coin.wav");
    raquetada = loadSound("Ping Pong Hit.wav");}

//chance de erro
let chanceDeErrar = 0;

//background do jogo
function setup() {
  createCanvas(600, 400);
  musicafundo.loop();
}

//funções jogo
function draw() {
  background(50);
  mostrabolinha();
  movimentaçaobolinha();
  verificadorcolisao();
  mostraraquete(xRaquete, yRaquete);
  movimentaraquete();
  verificadorcolisaoraquete();
  mostraraquete(xRaqueteOponente, yRaqueteOponente);
  movimentaraqueteoponente();
  verificaColisaoRaqueteOponente();
  incluiPlacar();
  marcaPonto();
}

//programação
function mostrabolinha(){
  circle(xBolinha, yBolinha, diametro)}

function movimentaçaobolinha(){
  xBolinha += velocidadeXBolinha;
  yBolinha += velocidadeYBolinha;}

function verificadorcolisao(){
  if (xBolinha + raio > width ||
      xBolinha - raio < 0){
    velocidadeXBolinha *= -1}
  if (yBolinha + raio > height || 
      yBolinha - raio < 0){
    velocidadeYBolinha *= -1}}

function mostraraquete(x, y){
  rect(x, y, comprimentoRaquete, alturaRaquete)}

function movimentaraquete(){
  if (keyIsDown(UP_ARROW)){yRaquete -= 5;}
  if (keyIsDown(DOWN_ARROW)){yRaquete += 5;}}

function verificadorcolisaoraquete(){
  if (xBolinha - raio < xRaquete + comprimentoRaquete && yBolinha - raio < yRaquete + alturaRaquete && yBolinha + raio > yRaquete){velocidadeXBolinha *= -1; raquetada.play()}}

function movimentaraqueteoponente(){
  velocidadeYOponente = yBolinha - yRaqueteOponente - alturaRaquete / 2;
  yRaqueteOponente += velocidadeYOponente}

function verificaColisaoRaqueteOponente(){
  if (xBolinha + raio > xRaqueteOponente &&  yBolinha - raio < yRaqueteOponente + alturaRaquete  && yBolinha + raio > yRaqueteOponente){
    velocidadeXBolinha *= -1; raquetada.play()}}

function incluiPlacar() {
    stroke(255);
    textAlign(CENTER);
    textSize(16);
    fill(color(255, 140, 0));
    rect(150, 10, 40, 20);
    fill(255);
    text(meusPontos, 170, 26);
    fill(color(255, 140, 0));
    rect(400, 10, 40, 20);
    fill(255);
    text(pontosDoOponente, 420, 26);}

function marcaPonto() {
    if (xBolinha > 590) {
        meusPontos += 1; ponto.play()
    }
    if (xBolinha < 10) {
        pontosDoOponente += 1; ponto.play()
    }}








solução!

Olá, Lucas! Agora entendi sua dúvida.

Essa também foi difícil para mim e pedi ajuda para resolvê-la :)

Olha só, nós podemos utilizar os métodos Math.floor() e Math.random() para trabalhar em cima da raquete do oponente, pois vão fornecer a aleatoriedade no divisor e também da posição da raquete.

Um ponto de atenção foi também a modificação do cálculo do diâmetro da Bolinha.


//bolinha
let xBolinha = 300;
let yBolinha = 300;
let raio = 8;
let diametro = raio*2;


//raquete
let xRaquete = 5;
let yRaquete = 150;
let comprimentoRaquete = 10;
let alturaRaquete = 90;

//variáveis oponente
let xRaqueteOponente = 585;
let yRaqueteOponente = 150;
let velocidadeYOponente;


//velocidade bolinha (dificuldade)
let velocidadeXBolinha = 6;
let velocidadeYBolinha = 6;

//pontuação
let meusPontos = 0;
let pontosDoOponente = 0;

//sons do jogo
let raquetada;
let musicafundo;
let ponto;

function preload() {
    musicafundo = loadSound("trilha.mp3");
    ponto = loadSound("ponto.mp3");
    raquetada = loadSound("raquetada.mp3");}

//background do jogo
function setup() {
  createCanvas(600, 400);
  musicafundo.loop();
}

//funções jogo
function draw() {
  background(50);
  mostrabolinha();
  movimentaçaobolinha();
  verificadorcolisao();
  mostraraquete(xRaquete, yRaquete);
  movimentaraquete();
  verificadorcolisaoraquete();
  mostraraquete(xRaqueteOponente, yRaqueteOponente);
  movimentaraqueteoponente();
  verificaColisaoRaqueteOponente();
  incluiPlacar();
  marcaPonto();
  loop();
  }

//programação

function mostrabolinha(){
  circle(xBolinha, yBolinha, diametro)}

function movimentaçaobolinha(){
  xBolinha += velocidadeXBolinha;
  yBolinha += velocidadeYBolinha;}

function verificadorcolisao(){
  if (xBolinha + raio >= width ||
      xBolinha - raio < 0){
    velocidadeXBolinha *= -1}
  if (yBolinha + raio >= height || 
      yBolinha - raio < 0){
    velocidadeYBolinha *= -1}}

function mostraraquete(x, y){
  rect(x, y, comprimentoRaquete, alturaRaquete)}

function movimentaraquete(){
  if (keyIsDown(UP_ARROW)){yRaquete -= 5;}
  if (keyIsDown(DOWN_ARROW)){yRaquete += 5;}}

function verificadorcolisaoraquete(){
  if (xBolinha - raio < xRaquete + comprimentoRaquete && yBolinha - raio < yRaquete + alturaRaquete && yBolinha + raio > yRaquete)
  {velocidadeXBolinha *= -1; raquetada.play()}}


function movimentaraqueteoponente(){
  velocidadeYOponente = (yBolinha - yRaqueteOponente - alturaRaquete) / 2;
 yRaqueteOponente += velocidadeYOponente/(Math.floor(Math.random() * 2) +1);

}


function verificaColisaoRaqueteOponente(){
  if (xBolinha + raio > xRaqueteOponente &&  yBolinha - raio < yRaqueteOponente + alturaRaquete  && yBolinha + raio > yRaqueteOponente)
  {  velocidadeXBolinha *= -1; raquetada.play()}}


function incluiPlacar() {
    stroke(255);
    textAlign(CENTER);
    textSize(16);
    fill(color(255, 140, 0));
    rect(150, 10, 40, 20);
    fill(255);
    text(meusPontos, 170, 26);
    fill(color(255, 140, 0));
    rect(400, 10, 40, 20);
    fill(255);
    text(pontosDoOponente, 420, 26);}

function marcaPonto() {
    if (xBolinha > 590) {
        meusPontos += 1; ponto.play()
    }
    if (xBolinha < 10) {
        pontosDoOponente += 1; ponto.play()
    }

}

Para ficar mais claro, você pode consultar o P5 feito em cima do seu projeto: https://editor.p5js.org/miasensei/sketches/YSOHNgfb0

Qualquer dúvida estamos por aqui, bons estudos!

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software