Необходимо закрасить все поле вот таким вот образом, как на изображении (квадрат должен увеличиваться на 3 клетки во все стороны каждую секунду). Проблема в том, что на середине программа начинает тормозить и с каждым новым вызовом функции все медленнее и медленнее работает. Подскажите пожалуйста, как можно оптимизировать программу, чтобы поле заполнялось корректно?
let field = document.getElementById('field')
function addCell(field) {
let coordinates = [], i, j;
for(i = 0; i<50; i++) {
coordinates[i] = new Array()
for (j = 0; j<50; j++){
let cell = document.createElement('div')
cell.setAttribute('class','cell')
cell.setAttribute('x',(i+1).toString())
cell.setAttribute('y',(j+1).toString())
coordinates[i][j] = cell
field.appendChild(cell)
}
} return coordinates
}
let coordinates = addCell(field)
function setBomb(coordinates) {
function getRandomInt(max) {
return Math.floor(Math.random() * max);
}
let x = getRandomInt(coordinates.length)
let y = getRandomInt(coordinates.length)
function setAffected(coordinates, x, y) {
if(coordinates[x][y].getAttribute('class') === 'cell') {
if ((x >= 0) && (x < coordinates.length) && (y >= 0) && (y < coordinates.length)) {
coordinates[x][y].setAttribute('class', 'affected')
}
}else return
}
setAffected(coordinates,x,y)
getCoords(coordinates,x,y)
function getCoords(coordinates,x,y) {
let yright1 = y + 1
let yright2 = y + 2
let yleft1 = y - 1
let yleft2 = y - 2
let xtop1 = x + 1
let xtop2 = x + 2
let xbot1 = x - 1
let xbot2 = x - 2
setAffected(coordinates, x, yright1)
setAffected(coordinates, x, yright2)
setAffected(coordinates, x, yleft1)
setAffected(coordinates, x, yleft2)
setAffected(coordinates, xtop1, y)
setAffected(coordinates, xtop2, y)
setAffected(coordinates, xbot1, y)
setAffected(coordinates, xbot2, y)
setAffected(coordinates, xtop1, yright1)
setAffected(coordinates, xtop1, yright2)
setAffected(coordinates, xtop2, yright1)
setAffected(coordinates, xtop2, yright2)
setAffected(coordinates, xtop1, yleft1)
setAffected(coordinates, xtop1, yleft2)
setAffected(coordinates, xtop2, yleft1)
setAffected(coordinates, xtop2, yleft2)
setAffected(coordinates, xtop1, yright2)
setAffected(coordinates, xbot1, yleft1)
setAffected(coordinates, xbot1, yleft2)
setAffected(coordinates, xbot2, yleft1)
setAffected(coordinates, xbot2, yleft2)
setAffected(coordinates, xbot1, yright1)
setAffected(coordinates, xbot1, yright2)
setAffected(coordinates, xbot2, yright1)
setAffected(coordinates, xbot2, yright2)
function explode(coordinates,xtop1,xtop2,yright2,yleft2){
getCoords(coordinates, xtop2, yright2)
getCoords(coordinates, xtop2, yleft2)
getCoords(coordinates, xbot2, yleft2)
getCoords(coordinates, xbot2, yright2)
}
return setTimeout(explode,1000,coordinates,xtop1,xtop2,yright2,yleft2)
}
}
setBomb(coordinates)