Rogammon

Thu, 28 May 2026 00:00:00 +0000

A backgammon board drawn and animated in pure SVG — no canvas, no WebGL, no external dependencies beyond a single JavaScript file. The board lives in the browser; nothing touches a server.

Circular layout. The 24 points are arranged around a clock face rather than the traditional rectangular board. Checkers stack inward toward the hub, and the bar runs as a horizontal band across the centre.

Dice and autoplay. Click Roll to get a pair of dice, then click a point or checker to move. Autoplay button plays both sides automatically so you can watch a game run to completion.

Implementation. The entire game — board geometry, checker rendering, move validation, dice, and UI — is in rogammon.js, a single self-contained script with no build step. SVG elements are created with document.createElementNS and positioned with trigonometry derived from the point angle formula:

1

θᵢ = θ₀ + i · (2π / 24)

where θ₀ = 277.5° places the gap between points 6 and 7 at 3 o’clock.

Games on Theta Nil's Blog

Rogammon