/gridmangler

HTML5 canvas grid event system to help with tile games

Primary LanguageJavaScript

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