Collision Detection Basics in 2D Browser Games Quiz Quiz

Explore key techniques and logic behind 2D collision detection in browser games. This quiz highlights foundational principles, detection methods, and common challenges encountered while building interactive gameplay mechanics.

1. Axis-Aligned Rectangular Collisions

   When detecting if two axis-aligned rectangles overlap in a 2D browser game, which condition best determines if a collision has occurred?

   1. Their edges cross or overlap on both the X and Y axes
   2. The centers of the rectangles have the same coordinates
   3. The areas of the rectangles are the same
   4. Their widths and heights are proportional

   Explanation: To detect a collision between two axis-aligned rectangles, you must check if they overlap on both the X and Y axes. If either axis does not overlap, the rectangles are not colliding. Rectangle areas or matching centers do not demonstrate an overlap, only coincidental alignment or size. Proportional widths and heights may make the shapes similar but do not indicate collision.

2. Circle-to-Circle Collision Logic

   Which mathematical approach is commonly used to detect a collision between two circles in a 2D game?

   1. Check if their circumferences are equal
   2. Compare the distance between centers to the sum of their radii
   3. Test if their bounding boxes intersect
   4. Verify if they share at least one axis-aligned point

   Explanation: For circle-to-circle collision, you compare the distance between the centers to the sum of the radii; if the distance is less than or equal, a collision has occurred. Equal circumferences or shared points are not reliable for collision detection. While bounding boxes can be fast to check, they are less accurate for circles and may produce false positives.

3. Pixel-Perfect vs. Bounding Box Detection

   Which statement accurately contrasts pixel-perfect collision detection with bounding box detection in 2D browser games?

   1. Pixel-perfect works only for rectangles, bounding box for circles
   2. Both methods require analyzing every single pixel
   3. Bounding box is always the best method for detailed sprites
   4. Pixel-perfect is more precise but computationally expensive, while bounding box is faster but less accurate

   Explanation: Pixel-perfect detection checks individual pixels and is highly precise but slower, while bounding box detection is faster but less accurate due to its generalization. Pixel-perfect detection is not limited to rectangles and bounding box can apply to any shape. Only pixel-perfect requires per-pixel analysis; bounding box checks do not.

4. Collision Response Basics

   After detecting a collision between two objects in a 2D browser game, which is an appropriate initial response to prevent overlapping?

   1. Change their colors to random values
   2. Move one or both objects so their boundaries no longer intersect
   3. Resize both objects to half their original size
   4. Increase their velocities exponentially

   Explanation: The standard initial response to a collision is to resolve overlap by moving objects apart until their boundaries just touch, preventing further intersection. Increasing velocities or resizing does not stop the overlap. Changing colors only gives visual feedback and does not solve the physical collision. Proper collision response maintains logical game interactions.

5. Common Issues in 2D Collision Detection

   What can often cause 'tunneling' in fast-moving 2D objects with simple collision detection algorithms?

   1. Gravity is set to zero
   2. Objects move too far between frames to detect a collision
   3. A game's canvas is too small
   4. Sprite images are rotated by 180 degrees

   Explanation: Tunneling occurs when an object moves so fast that it passes through another object between frames, missing collision checks entirely. Sprite rotation or canvas size do not inherently affect tunneling. While gravity impacts movement, a value of zero does not specifically cause tunneling; the issue is related to update frequency and object speed.