JSFiddle - React, Tailwind, and code Playground

by LuckyCat

HTML

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

CSS

@import url('https://fonts.googleapis.com/css?family=Open+Sans');
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
}

.specks {
  width: 320px;
}

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

JavaScript

// shuffle array
function shuffle(array) {
  var currentIndex = array.length,
    temporaryValue, randomIndex;

  // While there remain elements to shuffle...
  while (0 !== currentIndex) {

    // Pick a remaining element...
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex -= 1;

    // And swap it with the current element.
    temporaryValue = array[currentIndex];
    array[currentIndex] = array[randomIndex];
    array[randomIndex] = temporaryValue;
  }

  return array;
}

var arrSpecks = [];
//  3х3, 4х4 и 5х5.
var sizeField = 4 * 4;

console.log("sizeField " + sizeField);
for (var i = 0; i < sizeField; i++) {
  arrSpecks.push(i);
}
shuffle(arrSpecks);
console.log(arrSpecks);


function drawSpecks(arr) {
  var html = '';
  //var arrSpecks = [];

  // $('.specks').html(html);

  for (var i = 0; i < arr.length; i++) {
    if (arr[i] === 0) {
    	arr[i] = '';
      html += '<div class="cell cell-empty">' + arr[i] + '</div>';
    }
    else {
    html += '<div class="cell">' + arr[i] + '</div>';
    }
  }

  $('.specks').html(html);

  console.log('arr ' + arr);
}

drawSpecks(arrSpecks);

var $cell = $('.cell');
var sizeCell = $cell.width();
$(document).on('click', '.cell', function () {
	var index = $(this).index();
  
  // var text = index % 4;
  // если пустой находится по краям
  var text = index % 3;
  console.log('index ' + index + '; text ' + text);
  
  /*$(this).css( {'left' : '+=' + sizeCell + 'px'});
  $(this).css( {'left' : '-=' + sizeCell + 'px'});
  
  $(this).css( {'top' : '+=' + sizeCell + 'px'});*/
  //$(this).css( {'top' : '-=' + sizeCell + 'px'});
  
  
  // просто меняем местоположение
  // 
  /*if ($(this).hasClass('cell-empty')) {
  alert();
  }*/
  
  if (arrSpecks[index] !== '') {
     //alert();
     $(this).css( {'top' : '+=' + sizeCell + 'px'});
     $('.cell').eq(index+1).css( {'top' : '-=' + sizeCell + 'px'});
  }
  
});