4

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

$(".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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="art">
  <div class="row">
    <div class="pixel white" id="1-1"></div>
    <div class="pixel white" id="1-2"></div>
    <div class="pixel white" id="1-3"></div>
    <div class="pixel white" id="1-4"></div>
    <div class="pixel white" id="1-5"></div>
  </div>
  <div class="row">
    <div class="pixel white" id="2-1"></div>
    <div class="pixel white" id="2-2"></div>
    <div class="pixel white" id="2-3"></div>
    <div class="pixel white" id="2-4"></div>
    <div class="pixel white" id="2-5"></div>
  </div>
  <div class="row">
    <div class="pixel white" id="3-1"></div>
    <div class="pixel white" id="3-2"></div>
    <div class="pixel white" id="3-3"></div>
    <div class="pixel white" id="3-4"></div>
    <div class="pixel white" id="3-5"></div>
  </div>
  <div class="row">
    <div class="pixel white" id="4-1"></div>
    <div class="pixel white" id="4-2"></div>
    <div class="pixel white" id="4-3"></div>
    <div class="pixel white" id="4-4"></div>
    <div class="pixel white" id="4-5"></div>
  </div>
  <div class="row">
    <div class="pixel white" id="5-1"></div>
    <div class="pixel white" id="5-2"></div>
    <div class="pixel white" id="5-3"></div>
    <div class="pixel white" id="5-4"></div>
    <div class="pixel white" id="5-5"></div>
  </div>
</div>

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

1 ответ 1

5

var size = 20;
for (var i = 0; i < size; i++) {
  var row = $('<div class="row"></div>');
  $("#art").append(row);
  for (var j = 0; j < size; j++) {
    row.append('<div class="pixel white"></div>');
  }
}


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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="convert">0</span>
<div id="art">
</div>

12
  • По-моему в условии заполнять а не скидывать потом на белые, а по заполнении прекращать работу. Commented 21 дек. 2017 в 20:30
  • Не совсем так, это поле не скоро будет заполнено полностью, и еще надо заполнять соседние элементы, а не просто рандомные по всей сетке. Я просто не знаю как еще объяснить, я бы назвал это эффектом домино. Чтобы от центральной пошли по все стороны.
    – NTP
    Commented 21 дек. 2017 в 20:30
  • @Erm после клика всё поле заполняет, или пока мышку держишь кликнутой? Commented 21 дек. 2017 в 20:31
  • 1
    @ДмитрийПолянин не знаю, чего Вы такие привередливые. По-моему, красиво мельтешит.
    – user176262
    Commented 21 дек. 2017 в 20:33
  • @ДмитрийПолянин, после клика. Я нажал и оно как домино начало заполняться во все стороны. Возможно ролики в интернете по указаной игре помогут более точно объяснить смысл.
    – NTP
    Commented 21 дек. 2017 в 20:33

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.