15

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Пятнашки</title>
    <style type="text/css">

        .cell {
            width: 100px;
            height: 100px;
            position: absolute;
            background: #585858;
            margin: 0;
            padding-top: 0;
            border: 10px;
            border-color: white;
            font-size: 30px;
            color: white;
            text-align: center;
            vertical-align: middle;
        }

        p {
            border-color: white;
            border:10px;
            margin: 1px;
            padding: 30px;
            font-size: 30px;
            color: white;
            text-align: center;
            vertical-align: middle;
        }
    </style>
    <script type="text/javascript">
    var first_id;
    function createField() {
        var variants = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15].sort(function() {return 0.5 - Math.random();});

        var top = -100;
        var left = 0;
        for(var i = 0; i < 15; i++) {
            var div = document.createElement("div");
            div.className = "cell number";
            div.id = i;

            if (i % 4 == 0) {
                left = 0;
                top += 102;
            } else {

                left += 102;
            }
            div.style.top = top + "px";
            div.style.left = left + 'px';
            var num = variants[i];
            div.innerHTML = num;
            document.body.appendChild(div);
        }
        var div = document.createElement("div");
        div.className = "cell";
        div.id = "empty";
        left += 102;
        div.style.top = top + "px";
        div.style.left = left + "px";
        div.innerHTML = '';

        document.body.appendChild(div);
    }

    function moveCells(first_id, second_id) {
        var first = document.getElementById(first_id);
        var second = document.getElementById(second_id);
        if (((first.style.top != second.style.top)  && (first.style.left == second.style.left)) ||
            ((first.style.top == second.style.top)  && (first.style.left != second.style.left))) {

            var tempTop = first.style.top;
            first.style.top = second.style.top;
            second.style.top = tempTop;

            var tempLeft = first.style.left;
            first.style.left = second.style.left;
            second.style.left = tempLeft;
        }
    }


    function getCell(e) {
        console.log(e);
        var target = event.target || event.srcElement;
        first_id = target.id;
        // alert("first id: " + first_id);
    }

    function changeCells(e) {
        var target = event.target || event.srcElement;
        var second_id = target.id;
        if (first_id == "empty" || second_id == "empty") {
            moveCells(first_id, second_id);
        }
        first_id = '';
    }

    function dbChangeCells(e) {
        var target = event.target || event.srcElement;
        var second_id = target.id;
        if (second_id != "empty") {
            moveCells("empty", second_id);
        }
    }
    </script>
</head>
<body onload="createField()", onmousedown="getCell(evt=event)", onmouseup="changeCells(evt=event)", ondblclick="dbChangeCells(evt=event)", onselectstart="return false">

</body>
</html>