HTML5 canvas grid event system to help with tile games
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
.gitignore
README
gridmangler.html
gridmangler.js

README

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