I'm trying to make a game where you shoot a ball in the direction of the cursor click.
I have two classes: Game class and Ball class. The Game class created Balls and then the Ball class animates the balls. It works but when I clear the canvas, it also clears the previous balls although I am pushing new balls to the array.
This is the code from the Game class:
class Game {
constructor(props) {
// ...
this.balls = []
this.canvas.addEventListener('mousedown', (e) => {
this.handleMouseClicks(this.canvas, e)
});
}
handleMouseClicks(canvas, e) {
this.balls.push(new Ball())
}
}
And the Ball class:
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()
}
Thought I'd put it as an answer as code is easier to format. Move your game loop to the Game class:
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())
}
}
And then animateBall can just be:
animateBall() {
this.drawBall()
this.updateBall()
}
(Make sure to remove the call to this.animateBall from the Ball constructor)