JavaScript Haxagon Game Board with Hexagon tiles

27Aug/092

JavaScript Haxagon Game Board with Hexagon tiles

I'm working on a JavaScript version of The Settlers of Catan. The first problem I decided to tackle was constructing (visually and array-structure wise) the game board using nothing but loops (didn't want to hard code it).

This ended up being much more difficult than I thought it would be.

I am going to split this up into two parts:

1. Setting up the game board visually
2. Setting up the array structure

Creating a Hexagonal game board with hexagonal spaces in JavaScript with for loops:

For this to work properly, you must have an even number of columns and rows. I chose seven since that is what makes up the Settlers of Catan game-board.

You have to split the building of the board into three stages:

1. The expanding stage
2. The apex or middle of the board
3. The contracting stage

I placed everything in one large for loop that counted off the "rows".

I figured out that while the rows are less than half the max rows divided by two (and rounded down) the board would be contracting. The number of tiles you would start with would be equal to the maximum number of tiles divided by two, rounded up, plus the current row number.

Once the number of rows equals exactly half the number of maximum tiles (rounded down) you are on the middle row. In this case the number of tiles is the max number of tiles, no math required.

Otherwise, you are in the contracting stage and the number of tiles you need is equal to the maximum number of tiles, minus the current row, minus half of the maximum rounded down.

Sound complicated? That's because it is. This took me about 30 minutes to get straight in my head after studying the game-board shape, tiles, and making several diagrams and sudo-coding and then writing the actual code and fixing bugs (and deciding if I had to round up or down at certain places).

Here is the actual code:

<html>
<head>
<style>
img{
	margin-top: -18px;
}
#board{
	padding: 50px 25px;
	background-color: #000;
}
</style>
</head>
<body>
<div id="board">error loading</div>
</body>
<script>
function boardSetup(){
	var max = 7;
	var html = "";

	for(var row = 0; row < max; row++){
		if(row < Math.floor(max/2)){
			//place spacer tiles
			for(var space = 0; space < (Math.floor(max/2) - row); space++){
				html += '<img src="spacerTile.png" />';
			}

			//place game tiles
			for(var cols = 0; cols < (Math.ceil(max/2) + row); cols++){
				html += '<img src="tile.png" />';
			}
			html += "<br />";
		}else if(row == Math.floor(max/2)){
			for(var cols = 0; cols < max; cols++){
				html += '<img src="tile.png" />';
			}
			html += "<br />";
		}else{
			for(var space = 0; space < (row - Math.floor(max/2)); space++){
				html += '<img src="spacerTile.png" />';
			}
			for(var cols = 0; cols < (max - (row - Math.floor(max/2))); cols++){
				html += '<img src="tile.png" />';
			}
			html += "<br />";
		}
	}

	document.getElementById("board").innerHTML = html;
}

boardSetup();
</script>
</html>

Here are the images that go with it:

Here is the tile: tile
Here is the spacer. This one is completely invisible: start-><-end

Here is the code running on my site.

Tagged as: Game Programming, How to, Javascript, Programming, tutorial Leave a comment

Comments (2) Trackbacks (0) ( subscribe to comments on this post )

Maurice
December 31st, 2009 - 11:43

Nice start, any change of continuing this? Like adding the harboars etc.
Christopher McCulloh
December 31st, 2009 - 12:13

Thanks. I might come back to it someday, but no immediate plans. I got really busy at work, and then Chrome came out with the ability to do extensions, so that’s been eating up all my spare time.

I may come back and redo/finish it out in jQuery someday. Feel free to take what I’ve got and expand if you’d like. I’d be interested in seeing what you came up with so please leave a comment here if you do…