I have been building a browser geography game with a deliberately simple prompt: hide a country, let the player redraw its border from memory, and explain exactly where the drawing was right or wrong.
The playable version is Country Draw. It works on desktop and mobile without an account.
The interaction looks simple, but the scoring is not a conventional quiz. A player's stroke has to become valid geographic geometry, then be compared with a real country polygon that may contain islands, holes, or multiple parts.
The scoring model
I wanted the result to answer three different questions:
- How much of the real country did the player cover?
- How much of the real country did the player miss?
- How much did the player draw outside the real border?
Those became three visual layers:
- Matched: the intersection of the drawing and the target country.
- Missed: the target country minus the drawing.
- Extra: the drawing minus the target country.
That gives more useful feedback than a single percentage. A drawing can cover most of a country but still extend far outside it. Another drawing can be precise but too small.
The core geometry operations use Turf.js:
const overlap = intersect(target, drawing);
const missed = difference(target, drawing);
const extra = difference(drawing, target);
const targetArea = area(target);
const overlapArea = overlap ? area(overlap) : 0;
const matchedRatio = overlapArea / targetArea;
const missedRatio = 1 - matchedRatio;
const extraRatio = extra ? area(extra) / targetArea : 0;
const accuracy = Math.max(0, 1 - missedRatio - extraRatio);
The displayed values are rounded percentages, while the map keeps the actual geometry so the player can inspect every error.
Turning a stroke into a polygon
Pointer events produce an ordered list of longitude and latitude coordinates. That list is not automatically a valid polygon.
Before scoring, I remove points that are too close, close the ring, clean duplicate coordinates, split self-intersections, discard tiny accidental fragments, and union the remaining pieces.
Self-intersection matters on touch screens. A player can cross their own line accidentally. Rejecting the entire attempt feels broken. Repairing the shape makes the game more forgiving without changing the geographic result.
Normalize against the target, not the viewport
A screen-space comparison is tempting but misleading. Countries are displayed at different zoom levels, and Web Mercator changes apparent size with latitude.
The scoring operates on geographic features and computes geodesic area. The map projection is only the presentation layer. This keeps a result comparable whether the player is drawing Norway, Brazil, or Australia.
The denominator is the target country's area. Extra area is also divided by target area. A stray loop the size of the target is a large error; a small bump outside the border is a small error.
Show the error, not just the grade
The most important product decision was rendering the three geometries directly on the result map: green for matched area, red for missed area, and gold for extra area.
The percentage is useful for streaks and personal bests, but the colored shapes teach the player what to change. The result card uses labels and percentages as well as color, so the feedback is not dependent on color perception.
Drawing and map navigation need separate modes
On a map, a drag normally pans. In a drawing game, the same gesture draws a border. Trying to infer intent produced unpredictable interactions, so the interface has explicit Draw and Move modes.
This is more visible UI, but it is more reliable on phones and trackpads. Undo removes the most recent stroke state, while Clear starts over.
Use real boundaries and disclose the data
Approximate SVG silhouettes were not sufficient. Small islands, coastlines, enclaves, and multipart countries expose errors quickly.
The game uses Natural Earth boundary data for countries and administrative areas, with additional regional data where needed. The production bundle stores target geometry locally so scoring does not depend on a third-party API request.
What I would measure next
The useful product events are not just page views: drawing started, drawing submitted, practice target selected, result shared, and second attempt started.
A geography game succeeds when players complete the loop and try again. Search traffic can bring someone to a country page, but the drawing and retry events reveal whether the tool actually answered the query.
The current version includes country practice, a deterministic daily challenge, US states, Canadian provinces, Australian states, and UK countries. You can test the scoring directly in the browser geography game.
Top comments (0)