Boa tarde, gostaria de um auxilio gostaria te incrementar o código da seguinte forma. Toda vez que fizer um ponto a bolinha retornasse ao centro do jogo, independente de quem fez o ponto para evitar bugs. Minha duvida é se é possível fazer isso? Alguém pode me ajudar? Segue trecho do código que gostaria de incrementar a cada ponto.
function marcaPonto(){
if (xBolinha > 590 ){
meusPontos += 1;
ponto.play();
}
if (xBolinha < 7){
pontosDoOponente +=1;
ponto.play();
}
}
Eaí Vinícius! Pensei a mesma coisa, e acrescentei esse esquema no meu.
Primeira coisa que fiz foi criar uma array (lista), com esse dois valores (você vai entender daqui a pouco):
const velocidadeAleatoria = [3,-3];Depois, criei uma função chamada reiniciar:
function reiniciar() {
if (xBolinha - raio <= 2 ||
xBolinha + raio >= 598) {
xBolinha = 300;
yBolinha = 200;
velocidadeXBolinha = velocidadeAleatoria[Math.floor(Math.random() * velocidadeAleatoria.length)];
velocidadeYBolinha = velocidadeAleatoria[Math.floor(Math.random() * velocidadeAleatoria.length)];
}
} Essa função obedece a seguinte lógica: Se o eixo x da bolinha for menor ou igual 2, ou maior ou igual a 598, ela volta para o centro. Após isso o eixo x e y da velocidade da bolinha (direção), é escolhida aleatoriamente por um daqueles dois valores que eu criei na array acima. Dessa forma quando a bolinha voltar ao centro, ela pode tanto ir para direita ou para esquerda (-3, 3), pra cima ou pra baixo (-3, 3). Isso evita com que a bolinha vá sempre para mesma direção quando reiniciada.
BÔNUS: Se achar que dessa forma fica muito rápido, você pode incluir um setTime, que faz com que o código espere um determinado tempo pra ser realizado. Assim, quando um dos dois fizer ponto, a bolinha volta ao centro, espera um tempo, e é disparada.
function reiniciar() {
if (xBolinha - raio <= 2 ||
xBolinha + raio >= 598) {
xBolinha = 300;
yBolinha = 200;
velocidadeXBolinha = 0;
velocidadeYBolinha = 0;
setTimeout(function() {
velocidadeXBolinha = velocidadeAleatoria[Math.floor(Math.random() * velocidadeAleatoria.length)];
velocidadeYBolinha = velocidadeAleatoria[Math.floor(Math.random() * velocidadeAleatoria.length)];
}, 2000);
}
} Meu jogo: https://editor.p5js.org/kayquedias/sketches/vjtmbyEHd
Olá Vinicius e Kayque, tudo bem?
Parabéns por ambos customizarem o jogo, deixando de uma forma mais usual e realista.
Kayque, gostei muito que conseguiu implementar uma aleatoriedade na direção da bolinha. Que bom que você está conseguindo deixar o jogo mais dinâmico e assim aprendendo mais a programar.
Acredito que a forma mais simples de implementar essa funcionalidade seja colocando a bola para o meio do Canva quando acontecer o ponto.
function marcaPontos(){
if (xBola > 590){
foiPonto();
meusPontos += 1;
}
if (xBola < 10){
foiPonto();
pontosOpo += 1;
}
}
function foiPonto(){
ponto.play();
// Ao marcar um ponto, lança a bola para o cento do campo
xBola = 300;
yBola = 200;
}Criei uma função só para não ficar repetindo código.
Nessa forma mais simples, a bola só será movida pro centro, sem mudar a trajetoria que já estava fazendo. Se você quiser adicionar essa opção, basta usar um Math.Random() e em algumas situações multiplicar a velocidade (tanto x quanto y) por -1, ou não.
function foiPonto(){
ponto.play();
// Ao marcar um ponto, lança a bola para o centro do campo
xBola = 300;
yBola = 200;
let direcaoAleatoria = Math.random();
if (direcaoAleatoria < (1/4)){
// Inverter só X
velocidadeX *= -1;
}else if (direcaoAleatoria < (2/4)){
// Inverter só o Y
velocidadeY *= -1;
}else if (direcaoAleatoria < (3/4)){
// Inverter ambos
velocidadeX *= -1;
velocidadeY *= -1;
}else{
// Não inveter nenhum (continuar a trajetória)
velocidadeX *= 1;
velocidadeY *= 1;
}
}Nesse caso, ela iniciará em uma direção aleatória!
Espero ter conseguido ajudá-los.
Abraços,