JSFiddle - React, Tailwind, and code Playground

by LuckyCat

HTML

<div id="wrapper">

	<div id="content">
	
        
        <div id="border">
            
            <div class="el_style" id="el-1"><p>1</p></div>
            <div class="el_style" id="el-2"><p>2</p></div>
            <div class="el_style" id="el-3"><p>3</p></div>
            <div class="el_style" id="el-4"><p>4</p></div>
            <div class="el_style" id="el-5"><p>5</p></div>
            <div class="el_style" id="el-6"><p>6</p></div>
            <div class="el_style" id="el-7"><p>7</p></div>
            <div class="el_style" id="el-8"><p>8</p></div>
            <div class="el_style" id="el-9"><p>9</p></div>
            <div class="el_style" id="el-10"><p>10</p></div>
            <div class="el_style" id="el-11"><p>11</p></div>
            <div class="el_style" id="el-12"><p>12</p></div>
            <div class="el_style" id="el-13"><p>13</p></div>
            <div class="el_style" id="el-14"><p>14</p></div>
            <div class="el_style" id="el-15"><p>15</p></div>
            
        </div>
        
        
    </div><!-- #content-->

</div><!-- #wrapper -->

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {font: 12px/18px Arial, Tahoma, Verdana, sans-serif; height: 100%; }
#wrapper {
}


/* Header
-----------------------------------------------------------------------------*/
#content {
	padding: 10px 0;
}
#border {
    width: 370px;
    height: 370px;
    
    margin: 0 auto;
    
    position: relative;
    
    radius: 5px;
    box-shadow: 0 0 40px rgba(128,128,255, 1);
}


.el_style {
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(128,128,255, 1);
    
    position: absolute;
    height: 80px;
    width: 80px;
    cursor: pointer; 
    overflow: hidden;
    text-align: center;
    
    /*transition: all .1s ease-in;*/
}
.el_style:hover {
  background-color: #E6EDFF;
}
.el_style p {
    
    font-size: 30px;
    padding-top: 30px;
}

JavaScript

$(function(){
    
    var i;
    var j;
    var array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15];
    var sizeEl = 90;
    var id;
    var lenghtLevel = 4;
    var sizePadding = 10;
    
    for (i = 0; i <= lenghtLevel; i++) {
        for (j = 0; j <= lenghtLevel; j++) {
            var top;
            var left;
            
            var number = array[i * lenghtLevel + j];
            var row = Math.ceil(number / lenghtLevel);
            var col = Math.ceil(number % lenghtLevel);
            if (col == 0) {col = lenghtLevel;}
            
            // console.log('Row: ' + row + ' Col: ' + col + ' Number: ' + number);
            
            var el = i * lenghtLevel + j;
            $('div#el-' + el)
                .css(
                    {'top': sizePadding + (row - 1) * sizeEl, 
                    'left': sizePadding + (col - 1) * sizeEl
                    }
                );
            
            
        //alert(newEl);
        
//        $('div#el-' + i).css();

        }
        
    }
    
    console.dir(array);
    array[16] = 0;
    console.dir(array);
    
    
    $('.el_style').click(function () {
        moveBlock($(this));
    });
    
    
    
    
    
    initField();
    
    function initField() {
        
        var ii;
        for (ii = 1; ii <= 16; ii++) {
            if (array[ii] == 0) {
                break;
            }
        }
        
        //console.log(ii + " " + array[ii]);

        var number = ii;
        var row = Math.ceil(number / lenghtLevel);
        var col = Math.ceil(number % lenghtLevel);
        if (col == 0) {col = lenghtLevel;}

        //console.log("Row " + row);
        
        
        var blockDirection;
        // var step = 1;
        for (var step =1; step < 50; step++) {
        //do {
            //step++;
            blockDirection = Math.floor(Math.random() * (4) + 1);
            // alert(blockDirection);
            if (blockDirection == 1) { // клетка...