Estoy tratando de hacer un juego en el que disparas una pelota en la dirección del clic del cursor. Tengo dos clases: Clase de Game y Clase de Ball . La clase Game creó Balls y luego la clase Ball anima las bolas. Funciona, pero cuando despejo el lienzo, también despeja las bolas anteriores, aunque estoy empujando nuevas bolas a la matriz.
Este es el código de la clase Game :
class Game { constructor(props) { // ... this.balls = [] this.canvas.addEventListener('mousedown', (e) => { this.handleMouseClicks(this.canvas, e) }); } handleMouseClicks(canvas, e) { this.balls.push(new Ball()) } } Y la clase Ball :
class Ball { constructor(props) { // ... this.animateBall() } animateBall() { this.ctx.clearRect(0,0, this.canvas.width, this.canvas.height) requestAnimationFrame(this.animateBall) this.drawBall() this.updateBall() } updateBall() { this.ballPosX = this.ballPosX + this.velocity.x this.ballPosY = this.ballPosY + this.velocity.y } drawBall() { this.angle = Math.atan2(this.mouseClickPosY - this.cannonPosY, this.mouseClickPosX - this.cannonPosX) this.velocity = { x: Math.cos(this.angle), y: Math.sin(this.angle) } this.ballRadius = 2 this.ctx.beginPath() this.ctx.arc(this.ballPosX, this.ballPosY, this.ballRadius, 0, Math.PI * 2, false) this.ctx.closePath() this.ctx.fillStyle = this.color; this.ctx.fill() }Pensé en ponerlo como respuesta ya que el código es más fácil de formatear. Mueva su bucle de juego a la clase Game :
class Game { constructor(props) { // ... this.balls = [] this.canvas.addEventListener('mousedown', (e) => { this.handleMouseClicks(this.canvas, e) }); // start the game loop this.gameLoop() } gameLoop() { // clear the canvas this.ctx.clearRect(0,0, this.canvas.width, this.canvas.height) // draw all the balls this.balls.forEach((ball) => { ball.animateBall(); }); // call the next iteration requestAnimationFrame(this.gameLoop); } handleMouseClicks(canvas, e) { this.balls.push(new Ball()) } } Y luego animateBall puede ser simplemente:
animateBall() { this.drawBall() this.updateBall() }(Asegúrese de eliminar la llamada a this.animateBall del constructor Ball)