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

[Dúvida] Bolinha não COLIDE na minha raquete

3 respostas
solução!

Oi Lais, tudo bem contigo?

Bom vamos lá, você tem que somente mudar algumas coisinhas no projeto para ele funcionar.

  1. Primeiro no documento index.html você deve adicionar isso aqui: <script src="p5.collide2d.js"></script> para importar a biblioteca de colisão do p5.js, faça isso na linha 14, ou seja, coloque abaixo desse outro que já está lá: <script src="sketch.js"></script>;
  2. Depois disso no documento sketch.js na linha 101 mude a variável velocidadexBolinha para velocidadeXBolinha pois velocidadexBolinha não existe.
  3. E por fim a última coisa, na linha 53 dentro da função draw chame a função da colisão lá dessa forma: colisaoMinhaRaqueteBiblioteca();.

Assim com essas mudanças o código irá funcionar.

Eu vou deixar somente o código do documento sketch.js abaixo para você copiar e colar, mas eu ainda preciso que você mude o primeiro ponto que comentei antes sozinha lá no index.html, ah antes que eu esqueça, no código abaixo eu aproveitei e arrumei alguns erros de indentação que encontrei tá.

Aqui ele:

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

//velocidade da bolinha
let velocidadeXBolinha = 6;
let velocidadeYBolinha = 6;
let raqueteComprimento = 10;
let raqueteAltura = 90;

//variáveis da raquete
let xRaquete = 5;
let yRaquete = 150;

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

let colidiu = false;

//placar do jogo
let meusPontos = 0;
let pontosDoOponente = 0;

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

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

function setup() {
    createCanvas(600, 400);
    trilha.loop();
}

function draw() {
    background(0);
    mostraBolinha();
    movimentaBolinha();
    verificaColisaoBorda();
    mostraRaquete(xRaquete, yRaquete);
    movimentaMinhaRaquete();
    // verificaColisaoRaquete();
    verificaColisaoRaquete(xRaquete, yRaquete);
    colisaoMinhaRaqueteBiblioteca();
    mostraRaquete(xRaqueteOponente, yRaqueteOponente);
    movimentaRaqueteOponente();
    verificaColisaoRaquete(xRaqueteOponente, yRaqueteOponente);
    incluiPlacar();
    marcaPonto();
}

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

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

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

function mostraRaquete(x, y) {
    rect(x, y, raqueteComprimento,
        raqueteAltura);
}

function movimentaMinhaRaquete() {
    if (keyIsDown(UP_ARROW)) {
        yRaquete -= 10;
    }
    if (keyIsDown(DOWN_ARROW)) {
        yRaquete += 10;
    }
}

function verificaColisaoRaquete() {
    if (xBolinha - diametro < xRaquete + raqueteComprimento && yBolinha - diametro < yRaquete + raqueteAltura && yBolinha + diametro > yRaquete) {
        velocidadeXBolinha *= -1;
    }
}

function colisaoMinhaRaqueteBiblioteca() {
    colidiu = collideRectCircle(xRaquete, yRaquete, raqueteComprimento, raqueteAltura, xBolinha, yBolinha, diametro);
    if (colidiu) {
        velocidadeXBolinha *= -1
    }
}

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

function incluiPlacar() {
    stroke(255);
    textAlign(CENTER);
    textSize(16);
    fill(color(144, 238, 144));
    rect(150, 10, 40, 20);
    fill(255);
    text(meusPontos, 170, 26);
    fill(color(144, 238, 144));
    rect(450, 10, 40, 20);
    fill(255);
    text(pontosDoOponente, 470, 26);
}

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

Em suma era isso, caso precise eu estarei aqui!

Fico à disposição para sanar suas dúvidas.

Abraços e bons estudos.

Caso este post tenha lhe ajudado, por favor marque ele como solução! ✓

Muito obrigada Renan!!

Olá Lais, tudo bem?

Fico feliz em ter ajudado!

Caso precise estarei por aqui!

Abraços e bons estudos.