I've been learning html5 game development for a few months and now I'm creating a breakout game in vanilla JS without any plugins for physics. And I'm also using assets generated through code. I'm doing this to learn basic game physics and to prove to myself that I can develop a game without 3rd party plugins or framework.
I'm using axis aligned bounding box (AABB) for collision detection. It was easy to implement it for the bricks, the paddle and the ball. Next, I wanted to add powerups. I thought about using shapes other than rectangles and circles for power drops like stars or clouds for powerups and hearts for extra lives. I managed to find the code to draw these shapes but, I can't figure out how to create a bounding box for these odd shapes.
I need guidance for programmatically creating bounding boxes for different shapes generated via code. I hope I'm clear with my question 🙂🤞🏽.