5
respostas

raquete no P5

Minha raquete no código do P5 só movimenta depois que eu clico nela com o mouse. N~so consigo ver o erro.

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


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

//variaveis da raquete
let xRaquete = 5;
let yRaquete = 150;
let raqueteComprimento = 10;
let raqueteAltura = 90;


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

function draw() {
  background(0);
  mostraBolinha();
  movimentaBolinha();
  verificaColisaoBorda();
  mostraRaquete();
  movimentaMinhaRaquete();
  verificaColisaoRaquete();

}


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 mostraRaquete(){
  rect(xRaquete, yRaquete, raqueteComprimento, raqueteAltura);
}



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

  if(keyIsDown(DOWN_ARROW)){
    yRaquete += 10;
  }
}



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





5 respostas

Olá, Andréa! Espero que esteja tudo bem com você!

Seu código está correto, essa é uma característica do próprio editor p5.js. Primeiro precisamos clicar na tela de visualização para depois conseguirmos movimentar os atores.

Para que possamos testar o jogo no p5, é necessário dar ênfase à tela do jogo, isto é, clicar nela após pressionarmos o ícone de play.

O instrutor explica nesta aula :

Aula 03 criando minha raquete no jogo > movimento minha raquete : https://cursos.alura.com.br/course/pong-javascript/task/56099

Espero que as informações tenham ajudado!

Um abraço e bons estudos!

Obrigada, Camila!

Não consegui importar a Biblioteca e agora não consigo finalizar a raquete do oponente. Existe uma solução sem a biblioteca?

Olá, Andréa!

Fico feliz que tenha te ajudado com a primeira parte, agora vamos para as próximas dúvidas.

Para ter a opção de realizar upload dos arquivos, precisamos criar uma conta no p5.js e fazer a confirmação da conta. Você conseguiu realizar essa etapa?

  • Criar conta no p5.js

Para criar uma conta, você precisa abrir o editor e clicar em Sign up, que fica no canto superior direito da tela. Depois desse processo você deve confirmar sua conta também. Vou enviar uma imagem para ilustrar melhor.

Imagem com o editor web do p5 e uma seta apontando para o link de Sign Up

A grande vantagem de fazer uma conta no p5.js é que você poderá salvar seus projetos e também realizar os uploads de arquivos.

  • Sobre a solução sem a Biblioteca

É perfeitamente possível você movimentar a raquete do oponente sem a biblioteca, basta modificar um pouco os valores utilizados na lógica para fazer correspondência com o outro lado da tela.

Vou deixar uma solução incrível desenvolvida pela aluna Alura Jéssica Cordeiro : Link para o tópico "Desafio de movimentar a raquete do oponente sem a Biblioteca"

Espero que tenha ajudado

Um abraço, bons estudos e conte conosco!

Obrigada