Есть поле пикселей и код для выбора пикселя, который меняет цвет:
$(".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, но я пока не придумал, как такое можно сделать, поэтому надеюсь на ваши советы.
Ответ
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
Комментариев нет:
Отправить комментарий