Зона влияния города. Игра [дубликат]

const listColors = [
  "black",
  "yellow",
  "blue",
  "green",
  "red",
  "brown",
  "pink",
  "silver",
];
const value = 24000;
const step = 10000;
const area = [];
const size = 9;
for (let i = 0; i < size; i++) {
  const row = [];
  area.push(row);
  for (let h = 0; h < size; h++) {
    row.push(0);
  }
}
function setWeight(arr) {
  const center = Math.floor(arr.length / 2);
  for (let i = 0; i < arr.length; i++) {
    const row = arr[i];
    for (let h = 0; h < row.length; h++) {
      let newX = Math.abs(center - i);
      let newY = Math.abs(center - h);
      let weight = Math.max(newX, newY);
      weight = weight < 0 ? 0 : weight;
      const maxValue = weight * step;
      let power = maxValue <= value ? value - maxValue : step - (maxValue - value);
      power = value - maxValue < 0 ? 0 : power;
      const template = {
        power,
        weight
      }
      row[h] = template;
    }
  }
  createTemplate(arr);
}
function createTemplate(arr) {
  const app = document.querySelector("#app");
  for (let i = 0; i < arr.length; i++) {
    const el = arr[i];
    const row = document.createElement("div");
    row.classList.add("row");
    app.appendChild(row);
    for (let h = 0; h < el.length; h++) {
      const item = el[h];
      const cell = document.createElement("div");
      cell.classList.add("cell");
      cell.style.backgroundColor = listColors[item.weight];
      row.appendChild(cell);
    }
  }
}
setWeight(area);

.row {
  display: flex;
}
.cell {
  width: 30px;
  height: 30px;
  border: 1px solid;
}

<div id="app">
</div>