There are many basic features that a grid module should have, such as a public method that can be used to get a cell by way of a canvas pixel position for example. There are also more advanced features such as path detection that maybe should be a part of a grid module, or maybe a part of an optional module that can be used on top of a grid module. In any case for this example I am going to just be sticking with the very basics of this sort of thing. However do not let that fool you, even when it comes to the very basics of a grid module there is still a fare about of ground to cover.
1 - The grid module
1.1 - The create method
So then the start of my grid module is the beginnings of an IIFE, and the create method.
1.2 - The get cell by pixel position method
A must have method for a grid module is a method where I pass a canvas relative pixel position, and what is returned is a cell that is at that position. There are a number of ways to go about making this kind of method, one way might be to loop over all of the cells and using bounding box collision detection. However It might be better to use some examples that just involves some quick expressions.
1.3 - Selected check method
I have a selected cell feature for this grid module so far. There is also the idea of selecting more than one cell also though. So this is a method that I might revise at some point.
2 - The utils module for this over all example
3 - The draw file for the example
I have just a few draw methods that I will be using for this example. For now I just want a method to draw a simple solid background, and of course a method to draw the current state of the grid.
In the main.js file of an example I will often have a main app loop, that will make use of the request animation frame method as a way to have such a loop. There are a few other options when it comes to amking a main app loop, but when working with canvas request animation frame might be the best option.
5 - Conclusion