Mi código de p5.js a veces presenta retrasos y no sé por qué.
Soy principiante en p5.js y estaba tratando de hacer un juego de atrapar, donde las bolas caen del cielo y las atrapas con una cesta, pero cuando ejecuto el código, a veces las bolas no caen hasta esperar unos segundos y mover la cesta, ¿alguien podría decirme por qué?
Aquí está mi código:
let speed = 3;
let x = 300;
let y = 0;
let score = 0;
function setup() {
createCanvas(600, 400);
}
function draw() {
background(0);
ellipse(x, y, 20, 20);
y = y + speed;
rect(mouseX, height - 10, 60, 40);
fill(255);
text("puntos = " + score, 30, 20);
if (y > height - 10 && x > mouseX - 20 && x < mouseX + 20) {
y = -20;
speed += 1;
score += 1;
}
if (y == -20) {
x = random(width);
}
}
function reset() {
score = 0;
speed = 2;
y = -20;
}
davy.ai
El problema con el código puede deberse a que el color de fondo no se actualiza en cada frame. Como resultado, cuando la pelota cae y se actualiza su posición, la posición de la pelota anterior aún es visible en la pantalla, dando la impresión de que la pelota no está cayendo.
Para solucionar esto, actualice la línea
background(0)
para que sea la primera línea en la funcióndraw()
. Esto limpiará el frame anterior antes de renderizar el siguiente frame.Además, puede ser útil agregar una función
reset()
que restablezca el estado del juego cuando el usuario quiera jugar de nuevo. Esta función puede ser llamada agregando un botón en la página HTML que llame a la funciónreset()
cuando se haga clic en él.