Estoy creando un juego con Pixi.js que presenta elementos que caen desde la parte superior del lienzo. Hasta ahora, he podido generar los elementos y hacer que se muevan hacia abajo en el lienzo hasta que lleguen al final de la ventana y luego se eliminen de la aplicación y de la matriz de elementos.
Esto parece funcionar correctamente al principio, sin embargo, después de que un elemento ha llegado al final del lienzo y se elimina, los elementos más nuevos que se agregaron más tarde parecen detenerse en el lienzo.
¿Cómo puedo tener un flujo continuo y suave de elementos que caen?
class Item { constructor(color, radius, v) { ... } update() { this.item.x = this.vx; this.item.y += this.vy; if (this.item.y >= (h) + this.radius) { this.item.y = 0 this.remove() } } remove() { items.pop() app.stage.removeChild(this.item); } } function addItem() { items.push(new Item(0x79a3b1, Math.random() * 10 + 10, {x: getRandomNumberBetween(0, w), y: 2 * getRandomNumberBetween(0.5, 1.5) })); } function gameLoop() { items.forEach(c => { c.update(); }); } let spawnInterval = setInterval( () => { addItem() }, 2000); setInterval(gameLoop, 1000/60);Mi demostración de código se puede encontrar aquí: https://codepen.io/m1-interactive/pen/GRxMYVE
Hay principalmente dos problemas con su código.
Uno está relacionado con la forma en que elimina los objetos en su método de remove . items.pop() , pero eso siempre eliminará el último elemento de la matriz. Cuando un objeto llega al final de la pantalla, hay elementos más nuevos en la matriz, por lo que debe eliminarlos por índice:
remove() { items.splice(items.indexOf(this), 1) app.stage.removeChild(this.item); } En segundo lugar, a medida que itera a través de cada elemento en su gameLoop , es posible que algunos objetos se eliminen de la matriz. Eso puede resultar en la omisión de algunos elementos. Lea más acerca de por qué sucede esto en esta respuesta .
En su caso, se puede arreglar fácilmente clonando la matriz antes de empalmarla:
items.slice().forEach(c => { c.update(); });