My favorite game

I’m not a big board game player in general. But one game I like a lot is Catan (a.k.a. Settlers of Catan, with expansions such as Seafarers, Cities and Knights, etc.). It is a fun game where you compete with other players to settle an unexplored island, making use of resources like wood, wool (commonly known as “sheep”), wheat, brick, and ore.

One of the coolest things about Catan is that every game is different. The game board is made up of a bunch of hexagonal tiles, number tokens, and port tokens which can be rearranged to form practically infinite board combinations. This is especially true in my favorite variant, Seafarers, which uses a bigger board with multiple islands with water in between.

While it is perfectly fine to use the board suggestions from the manual or create your own board manually, I thought it might be interesting to write a program which creates random boards which are also optimized to be fun to play. A while back, before getting serious about coding professionally, I created a JavaScript program to do just that. It worked, but now that I know more what I am doing, looking back at that code is painful. It is one huge set of global variables and functions. And the functions are horribly inefficient. So I’ve decided to take some time to rewrite it using what I’ve learned in recent months in terms of modular, DRY code.

Resources for Hexagonal Grids

I won’t go through the whole project today (I’ll continue writing in the future as I get further along in the project). I’ll just look a little at one of the foundations of this project — the hexagonal grid. It is far less straightforward than the standard square grid, but if you take time to wrap your head around it and utilize the many resources out there on the internet for learning about these things, it is not so bad.

There are two sides to this — building and manipulating the grid, and representing it on screen.

For the latter, I found an awesome resource which you should totally play with. It is the CSS Hexagon Generator. It takes in some parameters and gives you a chunk of CSS code for creating a hexagon with those parameters. Much easier than figuring it out on your own. In my previous iteration of this project I used JavaScript/HTML5 canvas and drew the hexagons, which is also a fine choice. But if you are looking to get actual HTML/CSS elements shaped like hexagons, you should definitely use the generator!

For the underlying code initializing, storing, manipulating, and placing the hexagonal grid, look at Amit Patel’s excellent tutorial. I’ve learned a lot reading through his pages.


When you are first starting out with hexagonal grids, the coordinate system can be daunting. The most obvious way is using an offset rectangular grid. Treat it just like a 2d array, but offset the rows so they fit together as hexagons. Turns out, exclusively using that kind of grid makes it far more difficult to do basic manipulations on the grid. There are other options though, such as cubic coordinates (which crucially, if counterintuitively, allows the use of algorithms developed for 3d cube coordinate systems), and axial coordinates. The tutorial cited above goes through how to convert the various coordinates into each other, and far more.

I chose to use offset coordinates for storage efficiency, but convert back and forth to cubic coordinates for calculations. This is certainly not the only way to do it, but it definitely pays to understand the different coordinate systems when you start thinking about manipulating hexagonal grids.

My Plans

So far I have implemented creating shuffled, randomized boards and displaying them. Next I’d like to algorithmically optimize for number placement. In Catan it is very important for game balance not to have the same numbers next to each other on the board. This involves checking the neighbors of pieces and rearranging (or placing pieces in the first place) to optimize the placement of numbers. I hope to continue along these lines in another post in the near future. I’d also like to have an interface for clumping land together to create a predefined number of islands. You can see my project live here on my website. Stay tuned!