My random generation of a tile set isn't working as expected. How can I fix this?

Question

So I am trying to generate a random tile set from an array. I want to create everything equally random except the "lake" tile (4 in the code and blue in the final graphic). In the code below, I have tried to make it so it counts how far along the row the generation process and if there is a lake that has been generated in the row. If there is a lake that has already been generated in that row, the process tries to create a tile other than a lake instead. Finally, I also don't want to make more than five lakes in the set total.

This is where the problem comes in. When I run the program, it creates the tile set completely, but the lakes are all kinds of wonky. Random number of lakes along with multiple per row. I don't want this obviously. If someone could help point me in the right direction to fix this issue, that'd be greatly appreciated. I'm fine if you completely rewrite it. I just want to figure this out.

Also sorry if the code is sloppy and poorly made. I've just recently got into programming a few months ago. Feedback is always appreciated!!

var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
var t = Math.round(Math.random()*10/2);
var lakecount = 0;
  var arr = [];
var ln = row = 0;
//create initial array
for(let i = 0; i < 10; i++) {
  arr.push([]);
};
//create second part of 2d array
for(let i = 0; i < arr.length; i++) {
  for(let j = 0; j < 10; j++) {
    //check if there are more then five lakes.
    if(lakecount > 5) {
      //if there is, reset until the new tile generated isn't a lake.
      while(t == 4) {
        t = Math.round(Math.random()*10/2);
      }
      //create new tile
      arr[i].push([t,0,0,0]);
      t = Math.round(Math.random()*10/2);
    }
    else {
      if(t == 4 && ln == 1) {
        //check if the program generated a lake and there is one already in the row, regenerate tile until a lake hasn't been generated for the tile
        while(t == 4) {
          t = Math.round(Math.random()*10/2);
        }
        console.log("one per row");
      }
      //create tile
      arr[i].push([t,0,0,0]);
      t = Math.round(Math.random()*10/2);
      console.log(arr[i][j]);
      if(t == 4) {
        //if there is a lake generated, add to the amount of overall lakes, then say there is a lake in the row.
        lakecount++
        ln++;
        console.log("add");
      }
      if(row < 10) {
        //add for each tile, until you reach end of row.
        row++	
        console.log("row add");
      }
      else {
        //reset row, reset if lakes are in that row.
        row = 0;
        ln = 0;
        console.log("row reset");
      }
    }
  }
};
//color everything
for(let i = 0; i < arr.length; i++) {
  for(let j = 0; j < 10; j++) {
    switch(arr[i][j][0]) {
      case 0:
        ctx.fillStyle = "lime"
        ctx.fillRect(j*48,i*48,48,48);
        break;
      case 1:
        ctx.fillStyle = "black"
        ctx.fillRect(j*48,i*48,48,48);
        break;
      case 2:
        ctx.fillStyle = "green"
        ctx.fillRect(j*48,i*48,48,48);
        break;
      case 3:
        ctx.fillStyle = "gray"
        ctx.fillRect(j*48,i*48,48,48);
        break;
      case 4:
        ctx.fillStyle = "blue"
        ctx.fillRect(j*48,i*48,48,48);
        break;
      case 5:
        ctx.fillStyle = "bisque"
        ctx.fillRect(j*48,i*48,48,48);
        break;
    }
  }
}

<canvas id="canvas" height="480" width="480"></canvas>

   

Answer 1

//check if there are more then five lakes
//regen if more than 5 lakes or we already have a lake for this row.
if(lakecount > 5 || ln > 1) 

Your logic could be much simpler too, rather than doing the random generation before the for loop then before the end of the for loop (which is hard to read and follow the logic), try performing the random generation as the first line in the for loop before doing any checks. Your code will be easier to debug if you simplify your logic.