Автоматическое заполнение сетки ячеек

#javascript #html

Есть поле пикселей и код для выбора пикселя, который меняет цвет: 



$(".pixel").click(function() {
  $(this).toggleClass("white");
  $(this).toggleClass("black");
})
var delta;
var isCall = false;
if (!isCall) {
  var zoom = 1;
  isCall = true;
}
#art {
  width: 101px;
  height: 101px;
  display: table;
  border-spacing: 1px;
  background-color: #d8d8d8;
}

.row {
  display: table-row;
}

.pixel {
  display: table-cell;
}

.black {
  background-color: black;
}

.white {
  background-color: white;
}


  

    

    

    

    

    

  
  

    

    

    

    

    

  
  

    

    

    

    

    

  
  

    

    

    

    

    

  
  

    

    

    

    

    

  





Но возникла необходимость автоматически заполнять все поле, допустим я нажимаю на
какую-нибудь клеточку и с небольшими задержками заполняются рандомные соседние клеточки(как
домино падает во все стороны) и так пока не будет заполнено все поле. Такое возможно
вообще реализовать? Мне намекнули, что похожий алгоритм в игре KAMI, но я пока не придумал,
как такое можно сделать, поэтому надеюсь на ваши советы.
    

Ответы

Ответ 1

var size = 20;
for (var i = 0; i < size; i++) {
  var row = $('
');
  $("#art").append(row);
  for (var j = 0; j < size; j++) {
    row.append('
');
  }
}


var timerFind = null;
var convert = [];
$(".pixel").click(function() {
  $(this).removeClass("white");
  $(this).addClass("black");
  if (timerFind)
    return;      

  function FindPixels() {
    var matrix = [];
    $(".row").each(function(iRow, row){
      matrix[iRow] = [];
      $(row).find(".pixel").each(function(iPix, pix){
        matrix[iRow].push($(pix));
      });
    });
  
    var blacks = [];
    for (var iRow = 0; iRow < matrix.length; iRow++) {
      for (var iPix = 0; iPix < matrix[iRow].length; iPix++) {
        if (matrix[iRow][iPix].hasClass("black"))
          blacks.push({ row: iRow, col: iPix });
      }  
    }

    for (var iB = 0; iB < blacks.length; iB++) {
      for (var i = Math.max(0, blacks[iB].row-1); 
          i <= Math.min(matrix.length-1, blacks[iB].row+1); i++) {
        for (var j = Math.max(0, blacks[iB].col-1); 
            j <= Math.min(matrix[0].length-1, blacks[iB].col+1); j++) {
          if ((i == blacks[iB].row || j == blacks[iB].col) && 
              matrix[i][j].hasClass("white") && 
              convert.indexOf(matrix[i][j]) == -1) {
            convert.push(matrix[i][j]);
            $("#convert").text(convert.length);
          }
        }
      }
    }

    if (convert.length > 0) {
          var index = Math.floor(Math.random() * convert.length)
          convert[index].removeClass("white");
          convert[index].addClass("black");
          convert = [];
          $("#convert").text(convert.length);
    }

    if ($(".pixel.white").length == 0) {
      console.log("done");
    } else {
      timerFind = setTimeout(FindPixels, 100);
    }
  } // FindPixels

  timerFind = setTimeout(FindPixels, 100);
});

$(".row").last().find(".pixel").last().click();
#art {
  width: 181px;
  height: 181px;
  display: table;
  border-spacing: 1px;
  background-color: #d8d8d8;
}

.row {
  display: table-row;
}

.pixel {
  display: table-cell;
}

.black {
  background-color: black;
}

.white {
  background-color: white;
}

0