Messing around in JS today (surprising eh?) making an HTML5 vs of rampart-ish. The more I do the less it becomes like rampart. Today I decied to tackle the flood fill portion which is a major part of the gameplay.

Here is the workhorse function

function floodFill(mapData, x, y, oldVal, newVal){ var mapWidth = mapData.length, mapHeight = mapData[0].length; if(oldVal == null){ oldVal=mapData[x][y]; } if(mapData[x][y] !== oldVal){ return true; } mapData[x][y] = newVal; if (x > 0){ floodFill(mapData, x-1, y, oldVal, newVal); } if(y > 0){ floodFill(mapData, x, y-1, oldVal, newVal); } if(x < mapWidth-1){ floodFill(mapData, x+1, y, oldVal, newVal); } if(y < mapHeight-1){ floodFill(mapData, x, y+1, oldVal, newVal); } }

Which is called by doing this

floodFill(map, 3,3,null,2);

map refers to a 2 dimensional array which contains the data, in my case, 0 or 1. The second 2 parameters are the x and y of where to start on the map, null is the initial value to start with, and 2 is the change value parameter, which tells the function to change any tile with the value 0, to 2.

The function is pretty straightforward it recursively checks each points north/south/east/west neighbor until it encounters a neighbors whos value is not 0. Try the code for yourself. I have portions commented out that generate a larger random map to fill for testing purposes. Anything beyond 256×256 has issues within chrome due to stack size restrictions.

Below is the result of the function.

And here is a link to some great information on recursive floodfilling