JSFiddle - React, Tailwind, and code Playground

by LuckyCat

HTML

<div class="specks">
</div>

CSS

* {
  margin: 0;
  padding: 0;
}

.specks {
  width: 320px;
  margin: 200px;
  position: relative;
}

.cell {
  position: relative;
  top: 0;
  left: 0;
  float: left;
  border-radius: 5px;
  box-shadow: inset 0 0 10px rgba(128, 128, 255, 1);
  height: 80px;
  width: 80px;
  line-height: 80px;
  font-size: 30px;
  text-align: center;
  transition: all .1s ease-in;
}

.cell-empty {
  background: #333;
  border-radius: 0;
  z-index: 10;
}

JavaScript

//алгоритм запутывания пятнашек
var f15 = {
  //случайный набор с 0 в конце
  order: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15].sort(function() {
    return Math.random() - .5;
  }), //.concat(0),
  // перестановка ячеек
  swap: function(i1, i2) {
    var t = this.order[i1];
    this.order[i1] = this.order[i2];
    this.order[i2] = t;
  },
  // проверка на решаемость
  solvable: function(a) {
    //для каждого элемента массива
    for (var kDisorder = 0, i = 1, len = a.length - 1; i < len; i++) {
      //узнаём сколько предшествующих элементов больше текущего
      for (var j = i - 1; j >= 0; j--) {
        //если один из предыдущих элементов больше - накручиваем счетчик
        if (a[j] > a[i]) {
          kDisorder++;
        }
      }
    }

    //если сумма вышла четной - комбинация имеет решение
    return !(kDisorder % 2);
  }
};

// Если пазл нерешаемый, делаем его решаемым.
if (!f15.solvable(f15.order)) {
  f15.swap(0, 1);
}
// end: алгоритм запутывания пятнашек

// рисуем игровое поле
var arrSpecks = f15.order;
var html = '';
for (var i = 0; i < arrSpecks.length; i++) {
  if (arrSpecks[i] === 0) {
    arrSpecks[i] = ' ';
    html += '<div class="cell cell-empty">' + arrSpecks[i] + '</div>';
  } else {
    html += '<div class="cell cell-' + i + '">' + arrSpecks[i] + '</div>';
  }
}
$('.specks').html(html);

console.dir(arrSpecks);


var $cell = $('.cell');
var sizeCell = $cell.width();

var DIRECTION_TOP = 1;
var DIRECTION_BOTTOM = 2;
var DIRECTION_LEFT = 3;
var DIRECTION_RIGHT = 4;


function myChange(n, m, dir) {
  //меняются местами значения на кнопках n и m  
  // arrSpecks[m] === "" <-- всегда
  var arrSpecks0 = arrSpecks[n]; // старое значение (значение, по которому мы кликнули)
  arrSpecks[n] = arrSpecks[m]; // старое значение меняется на соседское
  arrSpecks[m] = arrSpecks0; // сосед принимает значение 
  
  console.dir(arrSpecks);  
  
  console.log("index old n: " + n);
  console.log("index соседа m: " + m);
  
    
  switch(dir){
 ...