1
resposta

Pong criado com solução alternativa para bola presa e sistema de aceleração da bola, entre outros

Olá, a todos! Já finalizei, porém com certeza há espaço para melhorias, mas gostaria de compartilhar com vocês meu primeiro programa utilizando JS. Foco nessas partes:

function verificaColisaoRaquete(x, y){
  colidiu =
  collideRectCircle(x, y, comprimentoRaquete, alturaRaquete, xBolinha, yBolinha, raio);
  if (colidiu){
    velocidadeXBolinha *= -1.1;
    raquetada.play();

Nesta parte apenas acrescentei -0.1 na velocidadeXBolinha a cada vez que for tocar na raquete, para assim ela ir se movendo de maneira mais rápida gradativamente.

Para a bolinha não ficar muito rápida e bugar o jogo, eu criei está função:

function limiteVelocidadeBolinha(){
  if (velocidadeXBolinha > 20){
    velocidadeXBolinha -= 1
  }
}

E para a bolinha não travar na raquete e nas bordas foi criado esta:

function corrigirBugs(){
  if (xBolinha < 3){
    xBolinha += 100
  }
  if (xBolinha > 598){
     xBolinha -= 100
  }
}

Também limitei a raquete:

function verificaColisaoBordaRaquete(){
  if (yRaquete < 0){
    yRaquete += 10;
  }

  if (yRaquete > 310){
    yRaquete -= 10;
  }
  if (xRaquete < 0){
    xRaquete += 10;
  }
  if (xRaquete > 100){
    xRaquete -= 10;
  }
}

Código inteiro:

//variáveis da bolinha
let xBolinha = 300;
let yBolinha = 200;
let diametro = 20;
let raio = diametro / 2 ;

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

//variáveis da raquete
let xRaquete = 7;
let yRaquete = 150;
let comprimentoRaquete = 10;
let alturaRaquete = 90;


//variáveis do oponente
let xRaqueteOponente = 580;
let yRaqueteOponente = 150;
let velocidadeYOponente;
let chanceDeErrar = 0;

let colidiu = false;

//variáveis do placar
let meusPontos = 0;
let oponentePontos = 0;

//variáveis do som
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();
  movimentaBolinha();
  verificaColisaoBorda();
  raquete(xRaqueteOponente, yRaqueteOponente);
  raquete(xRaquete, yRaquete);
  movimentaRaquete();
  verificaColisaoBordaRaquete();
  verificaColisaoRaquete(xRaqueteOponente, yRaqueteOponente);
  verificaColisaoRaquete(xRaquete, yRaquete);
  movimentaRaqueteOponente();
  mostraPlacar();
  marcaPontos();
  limiteVelocidadeBolinha();
  corrigirBugs();
  }

function mostraBolinha(){
  circle (xBolinha, yBolinha, diametro);

}

function movimentaBolinha(){
  xBolinha += velocidadeXBolinha;
  yBolinha += velocidadeYBolinha;
}

function raquete(x, y){
  rect (x, y, comprimentoRaquete, alturaRaquete);
}

function movimentaRaquete(){
  if (keyIsDown(UP_ARROW)){
    yRaquete -= 10;
  }
  if  (keyIsDown(DOWN_ARROW)){
    yRaquete += 10;
  }
  if  (keyIsDown(RIGHT_ARROW)){
    xRaquete += 5;
  }
  if (keyIsDown(LEFT_ARROW)){
    xRaquete -= 5;
  }

}

function verificaColisaoBorda(){
  if (xBolinha + raio > width ||
     xBolinha - raio < 0){
    velocidadeXBolinha *= -1;
 }

  if (yBolinha + raio > height ||
     yBolinha - raio < 0){
    velocidadeYBolinha *= -1;

 }
}

function verificaColisaoRaquete(x, y){
  colidiu =
  collideRectCircle(x, y, comprimentoRaquete, alturaRaquete, xBolinha, yBolinha, raio);
  if (colidiu){
    velocidadeXBolinha *= -1.1;
    raquetada.play();
 }
}

function verificaColisaoBordaRaquete(){
  if (yRaquete < 0){
    yRaquete += 10;
  }

  if (yRaquete > 310){
    yRaquete -= 10;
  }
  if (xRaquete < 0){
    xRaquete += 10;
  }
  if (xRaquete > 100){
    xRaquete -= 10;
  }
}

  function movimentaRaqueteOponente(){
  velocidadeYOponente = yBolinha - yRaqueteOponente - comprimentoRaquete / 2 - 30;
  yRaqueteOponente += velocidadeYOponente + chanceDeErrar
  calculaChanceDeErrar()
}
  function calculaChanceDeErrar() {
  if (oponentePontos >= meusPontos) {
    chanceDeErrar += 1
    if (chanceDeErrar >= 39){
    chanceDeErrar = 40
    }
  } else {
    chanceDeErrar -= 1
    if (chanceDeErrar <= 35){
    chanceDeErrar = 35
    }
  }
}

  function mostraPlacar(){
  textSize(20);
  textAlign(CENTER);
  fill(255);
  noFill();
  stroke(255);
  rect(130, 10, 40, 20);
  fill(255);
  text(meusPontos, 150, 27);
  noFill();
  stroke(255);
  rect(380, 10, 40, 20);
  fill(255);
  text(oponentePontos, 400, 27);

}

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

function limiteVelocidadeBolinha(){
  if (velocidadeXBolinha > 20){
    velocidadeXBolinha -= 1
  }
}

function corrigirBugs(){
  if (xBolinha < 3){
    xBolinha += 100
  }
  if (xBolinha > 598){
     xBolinha -= 100
  }
}
1 resposta

Olá, Raphael! Tudo bom contigo?

Desde já, agradeço a paciência em aguardar uma resposta!

Parabéns pelo desenvolvimento do projeto! Implementar um código adicionando melhorias e novas funcionalidades é, sem dúvidas, algo que impulsiona o nosso aprendizado. Continue sempre explorando sua criatividade!

Para somar ao seu conhecimento, trago uma dica super legal que irá te ajudar nos seus próximos programas: separação de trechos de código específicos em diferentes arquivos.

Ao longo do curso, todas as funções e variáveis foram criadas no mesmo arquivo, o “sketch.js”. Ao separarmos em um arquivo único as funções associadas à bolinha, por exemplo, melhoramos a compreensão dos códigos e também a manutenção do nosso projeto.

Portanto, fica essa dica para você praticar!

Aliás, caso tenha gostado de aprender Javascript, deixo como indicação um curso bem bacana. Espero que goste!

Caso apareça alguma dúvida ao decorrer dos seus estudos, sinta-se confortável para enviá-la no fórum. Fico à disposição para te auxiliar no que for preciso!

Abraços!