I have developed a game using HTML5 and Javascript/JQuery. This game is a Tile based game and uses a Multi-dimensional array to save the map of the current level. The current array looks something like the code below for the first level:

Code:
 var map = [[1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
               [1, 3, 0, 0, 0, 0, 2, 4, 0, 1],
               [1, 1, 1, 1, 1, 1, 1, 1, 1, 1]];
Just so you know:

Code:
    0 = Floor
    1 = Wall
    2 = Block
    3 = Player
    4 = Goal
The map when rendered looks like the following:




So basically what i would like to do is create a Map Creator for the user.

I would like every block in the image above to be click-able and when the user clicks on the square it cycles through the possible blocks in the game (e.g 0,1,2,3 or 4).

I have been trying to get this to work using the KineticJS library but with no luck.

Could anyone give me any advice on what to use or any information on how i could do this using KineticJS.

Thanks