Breakout-2 uses AABB Collision Detection so that the ball can bounce when it collides with the paddle or the walls.

Important Code

• In SpriteManager.js you’ll notice that we’ve added a method to extract the ball sprites from the sprite sheet.
  • In this function, we’re finding the offset for our ball sprites in our sprite sheet and looping over it, generating Sprite objects for the balls as we go. This is the same function for how we extracted our paddle sprites.
• Read through Ball.js, which creates our Ball class:
  • constructor() initializes the ball’s position, size, velocity, colour and sprites.
  • didCollide() checks for collisions using AABB Collision Detection.
  • reset() resets the ball to the middle of the screen.
  • update() implements behavior for bouncing off walls.
  • render() renders the ball to the screen.
• Again, we conclude with some additions to PlayState.js:
  • constructor() now instantiates a ball.
  • update() calls the ball’s update method and naively implements behavior for bouncing off the paddle. Can you think of a potential issue with our implementation? (Hint: think about what else we might want to do besides reversing the ball’s velocity). You might be able to observe the issue by trying to bounce the ball off the paddle at an angle.
  • render() calls the ball’s render() method.