How to Make a Hex Board in HTML

by Jon Kleiser

The game of Hex was invented by Piet Hein in 1942, and independently by John F. Nash in 1948.
For a description of the game, go to Wikipedia.

The purpose with this page is to show how one might build a Hex board using a small number of graphic elements (GIFs), glued together with HTML.
You may copy freely from this page, including the GIFs, but I would appreciate if you give me some credits.
I hope one day to make this board interactive, so you can actually make "moves" by clicking on the hexagons. It shouldn't be too difficult (I hope), maybe using JavaScript, Perl or WebObjects. If you do something like that, please let me know!


Some conventions:
In David Boll's Hex FAQ, the columns are named by letters A, B, C, ... from left to right, and the rows are numbered 1, 2, 3, ... downwards.
The "vertical" player makes the first move. I prefer the "vertical" player to use the red pieces, and the "horizontal" player to use the blue ones. Remember: Red Sun raising/setting vertically; Blue Water flowing horizontally.

The GIFs I used to build the Hex board, are:

top1.gifleft halfsingle width
top2.gifright halfsingle width
top0.gifplace-holdersingle width
nox.gifempty hexagondouble width
redx.gifred piecedouble width
bluex.gifblue piecedouble width
lefte.gifleft edgesingle width
righte.gifright edgesingle width
right0.giffinal right edgesingle width
bot.gifbottomdouble width


Updated 04-Jun-2007

jon.kleiser@usit.uio.no