Battle Analysis: Drawing a Hexagon Grid
The hexagon map is drawn one hexagon at a time.
The center of the hexagon is located with a hexagon grid on the screen.
The hexagon is drawn by calculating the 6 corners and drawing a line between them. See the code below.
The hexagon grid will have a certain width and height. When the hexagon width is selected, the horizontal distance between adjacent hexes is equal to the width * 3/4.
The height of a hexagon will be equal to = sqrt(3)/2 * width and vertical distance between adjacent hexes is equal to the height.
In the panel below, adjust the hexagon width and height in pixels to draw a hexagon map. The hexagon size: (width, height) will display the hexagon size. The calculated size: (√3*width /2) will show the calculated height. Using the hexagon grid coordinate, each hexagon is draw by multiplying it with the distances between hexagon centers.
function isCenter(x,y) {
var isCenterType = false;
if ( x % 8 == 0 && y % 8 == 0 ) isCenterType = true;
if ( x % 8 == 4 && y % 8 == 4 ) isCenterType = true;
return isCenterType;
}
function drawHexagon(x,y){
drawHexagonAtPixel((*x + ),(*y + ));
}
for (y = 16; y <= 48; y += 4 ){
for(x = 8; x <= 24; x += 4){
if( isCenter(x,y) ) drawHexagon( x, y);
}
}