Игра пятнашки, не могу реализовать чтобы при нажатии на кнопку обновлялся массив, (массив обновляется но ячейки не двигаются)

const game = document.createElement('div');
game.className = 'game';
document.body.prepend(game);

const header = document.createElement('header');
game.append(header)

const play = document.createElement('button');
play.className = 'btn-play'
play.innerHTML = 'play'
header.append(play)

const field = document.createElement('div');
field.className = 'field';
game.append(field)


const cellSize = 100;
const empty = {
    value: 0,
    top: 0,
    left: 0
};


const cells = [];
cells.push(empty);


function move(index){
    const cell = cells[index];
    //соседние ячейки
    const leftDiff = Math.abs(empty.left - cell.left);
    const topDiff = Math.abs(empty.top - cell.top);

    if(leftDiff + topDiff > 1){
        return;
    }
    //координаты пустых ячеек
    cell.element.style.left = `${empty.left * cellSize}px`
    cell.element.style.top = `${empty.top * cellSize}px`  
    //промежуточные переменные координаты пустых ячеек 
    const emptyLeft = empty.left;
    const emptyTop = empty.top; 
    // в координаты пустой клетки, координаты текущей ячейки 
    empty.left = cell.left;
    empty.top = cell.top;
    //в тек. ячейку координаты пустой
    cell.left = emptyLeft;
    cell.top = emptyTop;

    const isFinished = cells.every(cell => {
        return cell.value === cell.top * 4 + cell.left;
    });

    if(isFinished){
        win()
    }
}

//сортировка массива
const numbers = [...Array(15).keys()]
.sort(() => Math.random() - 0.5);

for(let i = 1; i <= 15; i++){
    const cell = document.createElement('div');
    const value = numbers[i - 1] + 1;
    cell.className = 'cell';
    cell.innerHTML = value;
    //вычисление координат
    const left = i % 4;
    const top = (i - left) / 4;

    cells.push({
        value: value,
        left: left,
        top: top,
        element: cell
    })

    cell.style.left = `${left * cellSize}px`;
    cell.style.top = `${top * cellSize}px`;

    field.append(cell);

    cell.addEventListener('click', () => {
        move(i);
    })
}


play.addEventListener('click', () =>{
    newGame()
})

function newGame(){
  field.innerHTML = '';

  const  numbers = [...Array(15).keys()]
.sort(() => Math.random() - 0.5);

for(let i = 1; i <= 15; i++){
    const cell = document.createElement('div');
    const value = numbers[i - 1] + 1;
    cell.className = 'cell';
    cell.innerHTML = value;
    //вычисление координат
    const left = i % 4;
    const top = (i - left) / 4;

    cells.push({
        value: value,
        left: left,
        top: top,
        element: cell
    })

    cell.style.left = `${left * cellSize}px`;
    cell.style.top = `${top * cellSize}px`;

    field.append(cell);

    cell.addEventListener('click', () => {
        move(i);
    })
}
}


Ответы (1 шт):

Автор решения: vp_arth

Вообще, всё двигается.

Обратите внимание на position: absolute

const game = document.createElement('div');
game.className = 'game';
document.body.prepend(game);

const header = document.createElement('header');
game.append(header)

const play = document.createElement('button');
play.className = 'btn-play'
play.innerHTML = 'play'
header.append(play)

const field = document.createElement('div');
field.className = 'field';
game.append(field)


const cellSize = 100;
const empty = {
  value: 0,
  top: 0,
  left: 0
};


const cells = [];

function move(index) {
  const cell = cells[index];
  //соседние ячейки
  const leftDiff = Math.abs(empty.left - cell.left);
  const topDiff = Math.abs(empty.top - cell.top);

  if (leftDiff + topDiff > 1) {
    return;
  }
  //координаты пустых ячеек
  cell.element.style.left = `${empty.left * cellSize}px`
  cell.element.style.top = `${empty.top * cellSize}px`
  //промежуточные переменные координаты пустых ячеек 
  const emptyLeft = empty.left;
  const emptyTop = empty.top;
  // в координаты пустой клетки, координаты текущей ячейки 
  empty.left = cell.left;
  empty.top = cell.top;
  //в тек. ячейку координаты пустой
  cell.left = emptyLeft;
  cell.top = emptyTop;

  const isFinished = cells.every(cell => {
    return cell.value === cell.top * 4 + cell.left;
  });

  if (isFinished) {
    win()
  }
}

play.addEventListener('click', () => {
  newGame()
})

function newGame() {
  field.innerHTML = '';
  cells.length = 0;
  empty.top = 0;
  empty.left = 0;
  cells.push(empty);

  //сортировка массива
  const numbers = [...Array(15).keys()]
    .sort(() => Math.random() - 0.5);
  for (let i = 1; i <= 15; i++) {
    const cell = document.createElement('div');
    const value = numbers[i - 1] + 1;
    cell.className = 'cell';
    cell.innerHTML = value;
    //вычисление координат
    const left = i % 4;
    const top = (i - left) / 4;

    cells.push({
      value: value,
      left: left,
      top: top,
      element: cell
    })

    cell.style.left = `${left * cellSize}px`;
    cell.style.top = `${top * cellSize}px`;

    field.append(cell);

    cell.addEventListener('click', () => {
      move(i);
    })
  }
}
.field {
  position: relative;
}

.cell {
  position: absolute;
  width: 95px;
  height: 95px;
  border: 1px solid silver;
}

Ну и инициализировать состояние нужно аккуратнее:

  field.innerHTML = '';
  cells.length = 0;
  empty.top = 0;
  empty.left = 0;
  cells.push(empty);
→ Ссылка