I have been trying to create a river routing system with a grid to make everything simpler. What I need to do is find every route possible that follows the river for x cells. Right now I have followed tutorials to make path finding system that finds all of the rivers connecting it self to the starting point. Also my rivers are little clunks not lines.

My code right now checks all its neighbours and colours them yellow, then running the function again on the coloured cell. This is repeated until the full river piece is routed. What I want it to do is find all the neighbours of the starting cell in the fashion of a square. Then I want it to find all the neighbours of the neighbours that are rivers again in the fashion of a square.

Basically I want the routing to find all the river cells in perfect squares. So it creates a square around the starting cell to find river cells. Then it creates a square around that to find more squares and so on. Also the final path created must be connected. What I explained makes mathematical sense but it is hard to explain.

This does work. Also .bee is basically .river the tutorial I was following had bee as a variable so I went along with it. and there are 2 marks. 1 to make it red when u click on starting cell. And second to make the path found yellow.

Here is my code right now:

Cell.prototype.mark = function(x,y){
  this.marked = true;
  if (this.bee) {
    this.floodFill();
  }
}

var done = 0;

Cell.prototype.floodFill = function() {
  for (var xoff = -1; xoff <= 1; xoff++) {
    for (var yoff = -1; yoff <= 1; yoff++) {
      var i = this.i + xoff;
      var j = this.j + yoff;
      if (i > -1 && i < cols && j > -1 && j < rows) {
        var neighbour = grid[i][j];
        if (neighbour.bee && !neighbour.marked2) {
            neighbour.marked2 = true;
            neighbour.floodFill();
        }
      }
    }
  }
  done++
  console.log("D"+done);
}