Previous posts on this topic:

* * *

Another strange turn on the road of game development. I was thinking about hex grid and looking for possible ways to display it. There are several problems about it:

  • cell/tile notation, or basically the system of coordinates
  • conversion between the internal system of coordinates and the cartesian coordinates of the screen
  • adjacency of the fifth and sixth cells

I came across a number of useful resources about hex coordinates:

The main problem is that almost all resources look at hex grids with adjacent upper and lower cell, while I want a grid with adjacent cells located to the right and to the left. So I will learn conversion between coordinates and the math behind it, by implementing the same examples to “my” grid orientation.

To start with, I took Tim Holt’s hex map example, read about a game called Lights Out, and implemented a hex version of it in JavaScript and plain HTML, using no PHP for grid rendering (in contrast to Tim’s example). The result is here. It has a fairly easy solution, the design is wanting and the code is surely buggy, but it’s fully functional and playable.

* * *

Followup posts on the game progress:

Leave a Reply