Test Circle–Rectangle Contact for a Collector Paddle

A more precise collision test is useful when the visual corners of a paddle matter. The collector currently uses a forgiving center band. This article develops a circle–rectangle alternative and explains what it improves, what it leaves unchanged, and what it still cannot detect.

What you'll build

You will write a pure helper that tests a circular falling object against the collector's rectangular paddle. The example is a proposed extension; the live demo still uses the simpler band rule documented in its source.

Prerequisites

Understand the collector's logical coordinates and its current collision handling. You should know Math.min, Math.max, and squared distances. No square root or external physics package is required for this helper.

Find the rectangle point nearest to the circle

For a rectangle, the nearest point to the circle center can be found by clamping each center coordinate to the rectangle's range. If the center is inside the rectangle, that nearest point is the center itself. If it is outside, the result lies on an edge or corner.

function circleTouchesRect(circle, rect) {
  const nearestX = Math.max(rect.x, Math.min(rect.x + rect.width, circle.x));
  const nearestY = Math.max(rect.y, Math.min(rect.y + rect.height, circle.y));
  const dx = circle.x - nearestX;
  const dy = circle.y - nearestY;
  return dx * dx + dy * dy <= circle.radius * circle.radius;
}

The squared distance is compared with the squared radius. Using <= means touching the boundary counts. If you choose a strict inequality instead, tangent contact does not count. That tiny operator is a gameplay decision and deserves a boundary test.

Construct shapes from the actual drawing

The collector draws its paddle at x minus 45, y=HEIGHT - 60, with width 90 and height 18. A collision rectangle should use those same dimensions if the aim is visual agreement. Avoid introducing a second undocumented paddle size in the helper.

The current renderer gives hazards radius 15 and gems radius 12. Pass the appropriate radius for each object. Unlike the band approximation, this helper accounts for that difference and treats corner contact through distance rather than a fixed horizontal allowance.

You can extract geometry constants if several functions need them, but keep the refactor small. Moving dimensions into shared data should improve agreement between rendering and rules, not create a general entity framework for four rectangles.

Replace detection, keep consumption

The helper answers only whether two shapes overlap at the sampled position. The collector still needs to award a point or remove a life, mark the object consumed, and remove it from the array. Replacing geometry must not accidentally remove the protection against repeated scoring.

Likewise, keep completion ordering explicit. A precise collision helper does not decide whether simultaneous victory and loss should favor the player. That belongs to the game-state policy after contacts have been processed.

Test corners as well as centers

Start with a circle center inside the rectangle, then one far away. Add a center just beyond an edge whose radius reaches the rectangle. Finally, test a corner where neither coordinate lies within the rectangle but the diagonal distance is still within the radius.

A helper that checks only separate horizontal and vertical ranges can accept points outside a rounded corner distance. The nearest-point method avoids that mistake. Include exact tangency and a point just beyond tangency to confirm the chosen boundary rule.

Use small, readable test shapes before testing the full game dimensions. A rectangle at zero with width ten is easier to reason about by hand than a paddle at y=480. Once the helper passes those cases, verify the values derived from the real renderer.

Understand the remaining tunneling problem

This remains a discrete overlap test. If a fast circle moves from above the paddle to below it between updates, neither sampled position may overlap. More exact shape geometry does not by itself make collision continuous through time.

For current speeds, a bounded delta and a sufficiently thick contact region may be enough. Faster designs can use smaller simulation steps or swept collision methods. Measure the actual displacement before choosing a more complicated solution.

Next steps

Implement the helper in a separate local copy of Gem Collector. Compare catches near paddle corners with the original band rule, using the same starting objects. Document whether the change makes the game stricter or more forgiving; geometric precision is not automatically the same thing as better game feel.