rollingshow
/
laraveltest


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212
							<!DOCTYPE html>
<html lang="ru">

<head>
    <meta charset="UTF-8">
    <title>Пазл</title>
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900&display=swap" rel="stylesheet">
    <style>
        body {
            font-family: Roboto;
            font-weight: 400;
            color: #202020;
            margin: 0px;
        }
        
        h2 {
            padding:0px 36px;


        }


        #board {
            margin-left: auto;
            margin-right: auto;
            border-collapse: collapse;
            box-sizing: border-box;
            outline: 1px lightgray solid;
            font-size: 0px;
            display: table;
            position: relative;
            border-radius: 0px;
            margin-top: 18px;
            width: auto;
        }

        tr,
        tbody {
            height: 50px;
            box-sizing: border-box;
            overflow: auto;
            width: 100%;
            padding: 0px;
            margin: 0px;
            border: 0px;
        }

        td {
            box-sizing: border-box;
            border: 1px solid gray;
            padding: 0px;
            margin: 0px;
            width: 50px;
            height: 50px;
        }


        .block {
            box-sizing: border-box;
            display: block;
            padding: 0px;
            margin: 0px;
            background-size: 450px;
            transition: box-shadow 0.1s ease-in-out;
            border: 0px white solid;
            position: absolute;
            z-index: 500;
            width: 50px;
            height: 50px;

        }


        #puzzle {
            width: 50%;
            float: right;
            background: #EEF;
            height: 100vh;
            position: relative;
        }

        #pieces {
            width: 50%;
            float: left;
            height: 100vh;
            position: relative;
        }
    </style>
</head>

<body>
    <div id="pieces">
        <div id="over"></div>
    </div>
    <div id="puzzle">
        <h2>{{ $data->title}} {{ $data->text}}</h2>
        <table id="board" cellspacing="0"></table>
    </div>


    <script type="text/javascript">
        var done = 0;
        var picture = "https://sun9-51.userapi.com/c204524/v204524368/1974/GIIiot2uoiw.jpg";

        function getCoords(elem) {
            let box = elem.getBoundingClientRect();
            return {
                top: box.top + pageYOffset,
                left: box.left + pageXOffset
            };
        }

        function startgame() {
            let index = 0;
            let over = document.querySelector("#over");
            let board = document.querySelector("#board");
            board.style.width = 50 * 9;

            for (let r = 0; r < 6; r++) {
                let tr = '<tr class="row" data-row="' + r + '"></tr>';
                board.insertAdjacentHTML('beforeend', tr);

                for (let c = 0; c < 9; c++) {
                    index = c + (r * 9);

                    let td = '<td class="tile" data-id="' + index + '"></td>';

                    let ar = document.querySelector('tr[data-row="' + r + '"]');
                    ar.insertAdjacentHTML('beforeend', td);

                    let ac = document.querySelector('td[data-id="' + index + '"]');

                    let block = '<div class="block" style="background-position: ' + c * -50 + "px " + r * -50 + 'px" data-id="' + index + '"></div>';
                    over.insertAdjacentHTML('beforeend', block);

                    let ab = over.querySelector('div[data-id="' + index + '"]');
                    ab.style.backgroundImage = 'url("' + picture + '")';
                    ab.addEventListener("mousedown", down);
                    ab.style.left = Math.random() * (document.documentElement.clientWidth / 2 - 50) + "px";
                    ab.style.top = Math.random() * (document.documentElement.clientHeight - 50) + "px";
                    ab.dataset.left = getCoords(ab).left;
                    ab.dataset.top = getCoords(ab).top;
                }
            }
        }

        function isCollide(orig, tile) {
            let b = getCoords(tile);
            let a = getCoords(orig);
            return !(
                ((a.top + 50) < (b.top)) ||
                (a.top > (b.top + 50)) ||
                ((a.left + 50) < b.left) ||
                (a.left > (b.left + 50))
            );
        }

        function down(e) {
            cell = e.target;
            if (cell.classList.contains("complete")) {
                return;
            }
            let coords = getCoords(cell);
            let shiftX = e.pageX - coords.left;
            let shiftY = e.pageY - coords.top;

            cell.style.position = 'absolute';
            moveAt(e);

            cell.style.zIndex = 1000;

            function moveAt(e) {
                cell.style.left = (e.pageX - shiftX) + 'px';
                cell.style.top = (e.pageY - shiftY) + 'px';
            }

            document.onmousemove = function(e) {
                moveAt(e);
            };

            cell.onmouseup = function() {
                document.onmousemove = null;
                cell.onmouseup = null;
                cell.style.zIndex = 500;
                field = document.querySelector("td[data-id='" + cell.dataset.id + "']");
                if (isCollide(cell, field)) {
                    let temp = getCoords(field);
                    cell.style.left = temp.left + "px";
                    cell.style.top = temp.top + "px";
                    cell.classList.add("complete");
                    done++;
                    if (done === 54) alert("You win!");
                } else {
                    if (!isCollide(cell, document.querySelector("#pieces"))) {
                        cell.style.left = cell.dataset.left + "px";
                        cell.style.top = cell.dataset.top + "px";
                    }
                }

            };

            cell.ondragstart = function() {
                return false;
            };

        }

        startgame();
    </script>


</body>