gridmangler is a simple javascript module for tile or grid-based HTML5 Canvas events. Perfect for games, and probably other stuff! gridmangler manages the cross-browser obnoxiousness so all you have to worry about is the grid. Define your own event functions that take {"x": x, "y": y} integer coordinate grid locations.
Supported grid events are (for now):
* mousedown
* gainfocus (mouse moves into a new grid, called with new coord)
* leavefocus (mouse moves to a new grid, called with "old" coord)
* longpress (hold mouse down/click on a grid for a bit longer (500ms by default)
gain/leave focus events allow for simple mouse-tracking based on grid location.
1. var my_grid = gridmangler();
2. my_grid.init(my_canvas, tile_width, tile_height);
3. my_grid.addGridEvent("mousedown",
function (grid_xy, button, shiftKey, doubleClick) {
// stuff that happens when a grid is clicked
}
);
While not the primary feature of gridmangler, it also supports drawing and simple art by grid:
(Obviously this can be extended pretty easily to handle any Canvas drawing methods)
my_grid.drawImageAt({"x": 2, "y": 2}, my_image);
my_grid.drawBorderAt({"x": 2, "y": 2}, "rgb(200, 0, 0)");
Also has a few helper functions that do simple coordinate math:
var adjacent_tiles = my_grid.getSurroundingTiles({"x": 4, "y": 1});
// returns an array of the 8 grid coordinates surrounding (4, 1)
// will return less than 8 if coordinates are not valid
** DEMO SITE **
http://heroicfisticuffs.com/projects/gridmangler
** NOTES **
tested on chrome and firefox 8