I am developing a browser game based on a hex map. I am storing my data based on axial coordinates system.


I developed a function which shows me axial coordinates of hexes within $distance from a given hex. Now I want to show those hexes in a form in a HTML table.

The data that I have is only axial coordinates of center hex as well a list of axial coordinates of hexes within distance (not sorted in any way)

As shown in the transition scheme below, hexes may always be shown in form of a simple HTML table:


But I am struggling at how to get each of the map hexes shown in a correct table field (row/column) of the table, assuming that table numbering looks like this:

enter image description here

To solve this out it seems to me that in first instance I need to determine the size of the HTML table that I need. If I will be able to determine what is table coordinate of center of the HTML table then I would be able to find out localisation of each hex in reference to the center hex.

In case of $distance = 1 I need 3 columns and 3 rows:

enter image description here

In case of $distance = 2 I need 5 columns and 5 rows:

enter image description here

This leads me to the conclusion that my required HTLM table size is:

$distance *2 + 1

The center hex lies in the middle of the table, so its coordinates are:

($distance *2 + 2) /2

But what is next, how to convert axial coordinates to table coordinates?

  • \$\begingroup\$ Looking at the 5x5 table, it looks like the first number is the table row and the second number is the table column. \$\endgroup\$ – amitp Nov 20 '15 at 17:35
  • \$\begingroup\$ This is a great guide to this: redblobgames.com/grids/hexagons \$\endgroup\$ – Silent137 Jan 14 '16 at 20:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.