Пытаюсь сделать 'Пятнашки' столкнулся с проблемой

103

31 октября 2021, 23:20

при нажатии на верхний ряд или нижний, выдает ошибку (Uncaught TypeError: Cannot read property '3' of undefined), и кубик не передвигается

let item = [ 
  ['1','2','3','4'], 
  ['5','6','7','8'], 
  ['9','10','11','12'], 
  ['13','14','15',''] 
] 
let itemEl = document.getElementsByClassName('item') 
 
function start(){ 
  for(let x = 0; x<item.length; x++ ){ 
    for(let y = 0; y<item[x].length; y++ ){ 
      let number = ((y+1)+(x*4))-1; 
      empty(x,y,number) 
      itemEl[number].innerText = item[x][y]; 
       
      itemEl[number].addEventListener( "click" , () => { 
          let itemMove = Number(itemEl[number].innerText); 
          move(itemMove,x,y) 
        }); 
       
    } 
  } 
} 
 
 
function move(itemMove,x,y){ 
 
  if(item[x+1][y] == ''){ 
    item[x+1][y] = itemMove; 
    item[x][y] = ''; 
    start() 
  } 
  else if(item[x-1][y] == ''){ 
    item[x-1][y] = itemMove; 
    item[x][y] = ''; 
    start() 
  } 
  else if(item[x][y-1] == ''){ 
    item[x][y-1] = itemMove; 
    item[x][y] = ''; 
    start() 
  } 
  else if(item[x][y+1] == ''){ 
    item[x][y+1] = itemMove; 
    item[x][y] = ''; 
    start() 
  } 
 
} 
 
function empty(x,y,number){ 
  if(itemEl[number].className === 'item hide'){ 
    itemEl[number].className = 'item'} 
  else if(item[x][y] === ''){ 
    itemEl[number].className = 'item hide'} 
} 
 
start()

.content{ 
  height: 100vh; 
  display: flex; 
  justify-content: center; 
  align-items: center; 
} 
.block{ 
  width: 248px; 
  height: 248px; 
  border:solid black 3px; 
  border-radius:10px; 
  display: flex; 
  flex-wrap: wrap; 
} 
.item{ 
  background:red; 
  width: 56px; 
  height: 56px; 
  border:solid green 3px; 
  border-radius:10px 
} 
.hide{ 
  background:white; 
  border:none; 
  width: 56px; 
  height: 56px; 
}

<!DOCTYPE html> 
<html lang="en"> 
<head> 
  <meta charset="UTF-8"> 
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
  <meta http-equiv="X-UA-Compatible" content="ie=edge"> 
  <title>Document</title> 
</head> 
<body> 
  <div class="content"> 
    <div class="block"> 
      <div class="item"></div> 
      <div class="item"></div> 
      <div class="item"></div> 
      <div class="item"></div> 
      <div class="item"></div> 
      <div class="item"></div> 
      <div class="item"></div> 
      <div class="item"></div> 
      <div class="item"></div> 
      <div class="item"></div> 
      <div class="item"></div> 
      <div class="item"></div> 
      <div class="item"></div> 
      <div class="item"></div> 
      <div class="item"></div> 
      <div class="item"></div> 
    </div> 
  </div> 
</body> 
</html>