Define and Test the Boundaries of a Timing Window

The highlighted zone in Timing Tap is a promise about a rule. Players need to know whether the ring's edge or its center must enter that zone, and developers need to know whether exact boundary contact counts. A single comparison determines all three cases.

What you'll build

We will inspect the current center-based hit test, derive its half-width calculation, and write boundary tests. The live game keeps its strict comparison; an inclusive alternative is discussed as a deliberate rule change.

Prerequisites

Understand the ring's horizontal center and the playfield center. Read tap and the zone definition in timing.js. The model starts with three lives and a target number of successful hits determined by difficulty.

Turn a width into a distance rule

The zone is centered at half the logical playfield width. If its full width is 140, an acceptable ring center must lie less than 70 units from that midpoint. Math.abs makes the same comparison work on either side.

const inside = Math.abs(ringX - width / 2) < zoneWidth / 2;

The current engine uses this strict inequality. A center exactly 70 units from the midpoint at the easiest setting is outside. Changing < to <= would include that boundary. The difference is small but should be specified rather than left to whichever operator was typed first.

The ring's radius is not part of the formula. Its edge can overlap the green rectangle before its center enters the accepted range. The on-canvas instruction explicitly refers to the center so the visual and textual explanation agree with the rule.

Apply one outcome per tap

A successful action increments score. A miss removes one life. The action then updates won and finished, and further taps are rejected once the round is finished. This prevents a held key or extra pointer event after completion from increasing the final score indefinitely.

Keyboard activation also ignores repeated keydown events. Without that wrapper guard, holding Space could send many taps through the same favorable part of a cycle. The engine's per-action rule and the wrapper's accepted-event policy work together.

Do not make the renderer award points merely because the ring is inside the zone. Being in position and choosing to tap are different events. The player action is what turns an opportunity into a scored hit.

Examine difficulty as a time window

Difficulty reduces the zone width and increases the ring's angular speed. The allowed spatial interval therefore becomes smaller while the ring traverses it faster. The player experiences a shorter time window, not just a smaller green shape.

Because sine motion moves fastest near the center, a central hit zone has different timing properties from a zone near an endpoint. Moving the zone would change difficulty even if its width stayed the same. Keep those relationships in mind when tuning parameters.

The target hit count also increases with difficulty. That changes how long a successful round may require, independently of how hard each individual tap is. Separate accuracy demands from total required repetition when evaluating a setting.

Test exact positions without waiting for animation

Create a timing engine instance in a rule test and assign the ring center to the midpoint. A tap should add one hit. Then set it just inside, exactly on, and just outside the zone boundary. Verify the score or life change matches the documented strict comparison.

These tests should not rely on clicking at the exact instant a moving browser animation reaches a boundary. Model-level setup gives repeatable geometry. Browser tests can separately verify pointer and keyboard events reach the action method.

Finally, reach the target and call tap again. The final score must remain unchanged. Repeat after losing all lives to confirm the completion guard applies to both endings.

Next steps

Use the Timing Tap demo to compare what you see with what the center rule accepts. If you switch to edge-overlap scoring or inclusive boundaries, update the instructions and tests in the same change. A more generous rule is valid, but an unexplained difference between picture and scoring is confusing.