Hex Map in PHP

[Sharlenwar]

I didn't create this, but as I was looking for a solution for my game, I discovered this: http://perludus.com/examples/hexmap/

Hopefully it'll be useful to someone.

[Ark]

That's really awesome thanks for this!

[Callan S.]

Very nifty! Wish there was a grid map version!

[Sharlenwar]

I imagine it shouldn't be too hard to take the code and make a grid map version. That is what I plan on doing.

[Jackolantern]

Hex maps can be quite complex to make in systems that rely primarily on rectangles for asset placement (ie the web). Grid placement doesn't require much more than a nested FOR statement to lay out all the tiles

Nice find!

[OldRod]

I ran across this code the other day when I was looking as well. I downloaded it an planned to blend it in with my project but just hadn't had a chance yet.

Thanks for posting it here

[hallsofvallhalla]

excellent resource!

[Torniquet]

nice find!

I have been playing with the code a bit to use in a project. I am working on highlighting surrounding cells as a 'movement' area based on a movement range.

I have it working fine if the range is 2 hex's any more or any less and things break a bit. Trying to work on the logic a bit more to get it working for any range.



If you want the code in its current state I will post it up, else I will post it up if and when i get it working right lol

~~ EDIT ~~

holy crap, just realized how old this post is! damn time zooms by if you dont watch it.

[Jackolantern]

Very nice! Highlighting cells is quite useful in almost any kind of game that uses them

And the last post before yours wasn't all that long ago

[Torniquet]

Worked it out!

My initial method was completely useless and was not going to work. I ended up going for a similar approach to the response in this post here http://stackoverflow.com/questions/4585 ... ighbourghs

After a couple of hours fighting trying to work out why this was not doing it, I realized that the hexes were a different orientation to those being used on the map generator script.

But I got it working


Range of 1 hex


Range of 2 hexes


3 hexes


4 hexes


3 hex range with map cutoff.

I have changed nothing to the source code and it uses the coordinates given off by the javascript in there (map_x and map_y are the variables holding the coordinates)

All that is added is a function at the end of the handle_map_click() function and 2 variable declarations before the function.

Full script code cuz i am nice

Code: Select all

<script>
var movearea
var c;
function handle_map_click(event) {
    // ----------------------------------------------------------------------
    // --- This function gets a mouse click on the map, converts the click to
    // --- hex map coordinates, then moves the highlight image to be over the
    // --- clicked on hex.
    // ----------------------------------------------------------------------

    // ----------------------------------------------------------------------
    // --- Determine coordinate of map div as we want the click coordinate as
    // --- we want the mouse click relative to this div.
    // ----------------------------------------------------------------------

    // ----------------------------------------------------------------------
    // --- Code based on http://www.quirksmode.org/js/events_properties.html
    // ----------------------------------------------------------------------
	var posx = 0;
	var posy = 0;
	if (event.pageX || event.pageY) {
		posx = event.pageX;
		posy = event.pageY;
	} else if (event.clientX || e.clientY) {
		posx = event.clientX + document.body.scrollLeft
			+ document.documentElement.scrollLeft;
		posy = event.clientY + document.body.scrollTop
			+ document.documentElement.scrollTop;
	}
	// --- Apply offset for the map div
    var map = document.getElementById('hexmap');
	posx = posx - map.offsetLeft;
	posy = posy - map.offsetTop;

    // ----------------------------------------------------------------------
    // --- Convert mouse click to hex grid coordinate
    // --- Code is from http://www-cs-students.stanford.edu/~amitp/Articles/GridToHex.html
    // ----------------------------------------------------------------------
    var hex_height = <?php echo $HEX_SCALED_HEIGHT; ?>;
    x = (posx - (hex_height/2)) / (hex_height * 0.75);
    y = (posy - (hex_height/2)) / hex_height;
    z = -0.5 * x - y;
    y = -0.5 * x + y;

    ix = Math.floor(x+0.5);
    iy = Math.floor(y+0.5);
    iz = Math.floor(z+0.5);
    s = ix + iy + iz;
    if (s) {
        abs_dx = Math.abs(ix-x);
        abs_dy = Math.abs(iy-y);
        abs_dz = Math.abs(iz-z);
        if (abs_dx >= abs_dy && abs_dx >= abs_dz) {
            ix -= s;
        } else if (abs_dy >= abs_dx && abs_dy >= abs_dz) {
            iy -= s;
        } else {
            iz -= s;
        }
    }

    // ----------------------------------------------------------------------
    // --- map_x and map_y are the map coordinates of the click
    // ----------------------------------------------------------------------
    map_x = ix;
    map_y = (iy - iz + (1 - ix %2 ) ) / 2 - 0.5;

    // ----------------------------------------------------------------------
    // --- Calculate coordinates of this hex.  We will use this
    // --- to place the highlight image.
    // ----------------------------------------------------------------------
    tx = map_x * <?php echo $HEX_SIDE ?> * 1.5;
    ty = map_y * <?php echo $HEX_SCALED_HEIGHT ?> + (map_x % 2) * (<?php echo $HEX_SCALED_HEIGHT ?> / 2);
	
    // ----------------------------------------------------------------------
    // --- Get the highlight image by ID
    // ----------------------------------------------------------------------
    var highlight = document.getElementById('highlight');

    // ----------------------------------------------------------------------
    // --- Set position to be over the clicked on hex
    // ----------------------------------------------------------------------
    highlight.style.left = tx + 'px';
    highlight.style.top = ty + 'px';
	highlight.setAttribute("title", (map_x + 1) + " " + (map_y+1));
	show_surround(map_x, map_y, 3)
}
function show_surround(map_x, map_y, range) {
	var minY = map_y - range;
	var maxY = map_y + range;
	movearea = document.getElementById('movearea');
	if(movearea)
		document.getElementById('hexmap').removeChild(movearea);
	
	movearea = document.createElement('div');
	movearea.setAttribute('id', 'movearea');
	document.getElementById('hexmap').appendChild(movearea);
	
	for(var i=minY; i<=maxY; i++) {
		if(i != map_y && i >= 0 && i <= <?=$MAP_HEIGHT-1?>) {
			selection(map_x, i);
		}
	}
	
	for (var xOff = 1; xOff <= range; xOff++) {
		if(Math.round((map_x+xOff) % 2) == 1) {
			maxY--;
		} else {
			minY++;
		}
		for(var i =minY; i<=maxY; i++) {
			if(i >= 0 && i <= <?=$MAP_HEIGHT-1?>) {
				if(map_x + xOff <= <?=$MAP_WIDTH-1?>)
					selection(map_x + xOff, i);
					
				if(map_x - xOff >=  0)
					selection(map_x - xOff, i);
			}
		}
	}
	
}

function selection (s_x, s_y) {
	tx = s_x * <?php echo $HEX_SIDE ?> * 1.5;
	ty = s_y * <?php echo $HEX_SCALED_HEIGHT ?> + (s_x % 2) * (<?php echo $HEX_SCALED_HEIGHT ?> / 2);
	
	new_high = document.createElement('img');
	new_high.setAttribute("class", "hex");
	new_high.src = "hex-highlight-go.png";
	new_high.style.left = tx + 'px';
	new_high.style.top = ty + 'px';
	new_high.setAttribute("title", "X:" + (s_x + 1) + " " + "Y:" + (s_y+1));
	new_high.setAttribute("id",c);
	c++;
	movearea.appendChild(new_high);
}
</script>

use it at your will