Precision target example
Playground target mode demonstrates rings, ten events and an aggregate result.
Mechanics
Map a normalized impact to Canvas coordinates. Measure its distance from the target centre in the same units. The outer ring uses a logical Canvas pixel radius, preserving a visually circular target even on a 16:9 physical surface.
Accounting
Each new event increments shots; an impact inside the game target increments hits. Ring position determines score. Ignore an already processed shot_id. Do not score during pause or countdown. Finish after ten accepted events, not after ten trigger pulls that may have missed the physical surface.
Verification
Test the centre, ring boundary, outside-circle impacts, surface corners and repeated IDs. CSS resizing must not change scoring for the same physical coordinate. Commercial precision rules, duration and tie-breaks are separate game-design decisions.
Code example
Integration excerpt: game-specific variables belong to the application. Playground contains the runnable reference.
const p = toCanvasPoint(hit, {width: canvas.width, height: canvas.height});
const radius = Math.hypot(p.x - target.x, p.y - target.y) / target.r;
const points = radius > 1 ? 0 : Math.max(1, 10 - Math.floor(radius * 10));