Untitled

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://code.jquery.com/jquery-1.11.3.js"></script>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div class="container"></div>
</body>
</html>


<script type="text/javascript">
    var container = $('.container');

    $(document).ready(function() {
        $('.cell').click(function () {
            var currentCell = $(this);

            if (checkMove(currentCell)) {
                swapCells(currentCell);
            }

            console.log(checkMove(currentCell));
            console.log($(this).attr('id'));
        });
    });

    function getEmptyCell() {
        return $('#cell-16');
    }

    function swapCells(el) {
        var emptyCell = getEmptyCell();
        var cloneEmptyCell = $(emptyCell).clone();

        el.after(cloneEmptyCell);

        emptyCell.replaceWith(el);

    }

    function checkMove(el) {
        var emptyCell = getEmptyCell()[0];

        if (el.prev()[0] === emptyCell) {
            return true;
        }

        if (el.next()[0] === emptyCell) {
            return true
        }

        if (el.prevAll().eq(3)[0] === emptyCell) {
            return true;
        }

        if (el.nextAll().eq(3)[0] === emptyCell) {
            return true;
        }

        return false;
    }


    function render() {
        for (var i = 1; i <= 16; i++) {
            var cell = $('<div></div>')
                .addClass('cell')
                .attr('id', 'cell-' + i)
                .html(i)
            ;

            container.append(cell);
        }
    }

    render();
</script>

<style type="text/css">
    body {
        margin: 0;
        padding: 0;
        line-height: 0;
    }

    .container {
        width: 1032px;
        height: 1032px;
        border: 1px solid #0a0a0a;
        text-align: center;
        margin: 0 auto;
    }
        .container .cell {
            font-size: 120px;
            font-weight: bold;
            border: 1px solid #0a0a0a;
            width: 256px;
            height: 256px;
            display: inline-block;
            margin: 0;
            padding: 0;
            line-height: 242px;
        }

        .container #cell-16 {
            color: white;
        }
</style>