Показать сообщение отдельно
  #5 (permalink)  
Старый 13.05.2021, 21:59
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

пятнашки макет
Ramosok,
проверка только на пусто, нужно ещё на соседа ...
<!DOCTYPE html>
<html>
<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style>
        * {
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            font-family: 'Roboto', sans-serif;
            -webkit-tap-highlight-color: transparent;
        }
        html,
        body {
            width: 100%;
            height: 100%;
            margin: 0;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
            -ms-flex-direction: column;
            flex-direction: column;
            -ms-flex-pack: distribute;
            justify-content: space-around;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            background-color: rgb(61, 58, 58);
            font-size: 16px;
        }
        h1,
        p {
            margin: 0;
            color: #fff;
            text-align: center;
        }
        h1 {
            font-size: calc(3rem + 3vmin);
            padding: 0 3vmin;
        }
        p {
            font-size: calc(2rem + 2vmin);
        }
        .field {
            width: 80vmin;
            height: 80vmin;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -ms-flex-wrap: wrap;
            flex-wrap: wrap;
            -webkit-box-pack: justify;
            -ms-flex-pack: justify;
            justify-content: space-between;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            background-color: rgb(226, 226, 226);
            padding: 1vmin;
        }
        .field div {
            width: 23%;
            height: 23%;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            font-size: calc(2rem + 2vmin);
            border-radius: 1vmin;
            font-weight: bold;
        }
        .win {
            color: red;
            font-weight: bolder;
            text-align: center;
            font-size: calc(3.5rem + 3.5vmin);
        }
        /*Элементы игрового поля*/
        .active {
            background-color: #fff;
            -webkit-box-shadow: inset -0.26vw -0.26vw .26vw 0 rgba(150, 150, 150, .5),
                inset .26vw .26vw .26vw 0 rgba(255, 255, 255, .5);
            box-shadow: inset -0.26vw -0.26vw .26vw 0 rgba(150, 150, 150, .5),
                inset .26vw .26vw .26vw 0 rgba(255, 255, 255, .5);
        }
        .active:hover {
            cursor: pointer;
            opacity: .9;
        }
        /*Выбранный элемент игрового поля*/
        .change {
            -webkit-transform: scale(.95);
            -ms-transform: scale(.95);
            transform: scale(.95);
            -webkit-transition: all 0.2s ease-in-out;
            -o-transition: all 0.2s ease-in-out;
            transition: all 0.2s ease-in-out;
        }
        @media screen and (max-width: 767px) and (orientation: landscape) {
            html,
            body {
                font-size: 12px;
            }
            h1 {
                font-size: calc(2rem + 2vmin);
                padding: 0 3vmin;
            }
            p {
                font-size: calc(1rem + 1vmin);
            }
        }
        @media (max-width: 480px) {
            html,
            body {
                font-size: 12px;
            }
        }
    </style>
</head>
<body>
    <h1>Игра Пятнашки</h1>
    <div class="field">
        <div id="elem1" class="active">15</div>
        <div id="elem2" class="active">14</div>
        <div id="elem3" class="active">13</div>
        <div id="elem4" class="active">12</div>
        <div id="elem5" class="active">11</div>
        <div id="elem6" class="active">10</div>
        <div id="elem7" class="active">9</div>
        <div id="elem8" class="active">8</div>
        <div id="elem9" class="active">7</div>
        <div id="elem10" class="active">6</div>
        <div id="elem11" class="active">5</div>
        <div id="elem12" class="active">4</div>
        <div id="elem13" class="active">3</div>
        <div id="elem14" class="active">2</div>
        <div id="elem15" class="active">1</div>
        <div id="elem16" class=""></div>
    </div>
    <p>Ход: <span id="tour">0</span></p>
    <script>
        const field = document.querySelector('.field');
        const active = document.querySelectorAll('.active');
        const change = document.getElementsByClassName('change');
        const divs = document.querySelectorAll('div');
        field.addEventListener('click', ({ target }) => {
            if(target == field) return;
            let itemChange = change[0];
            if (itemChange) {
                let twoActive = [target, itemChange].every(elem => elem.classList.contains('active'));
                if (twoActive) {
                    itemChange.classList.remove('change');
                    return;
                };
                if (itemChange != target) {
                    [target.innerHTML, itemChange.innerHTML] = [itemChange.innerHTML, target.innerHTML];
                    itemChange.classList.remove('change');
                    tour.innerHTML++;
                    if (target.classList.contains('active')) {
                        target.classList.remove('active')
                        itemChange.classList.add('active')
                    } else {
                        target.classList.add('active')
                        itemChange.classList.remove('active')
                    }
                }
            } else target.classList.toggle('change')
        })
    </script>
</body>
</html>

Последний раз редактировалось рони, 13.05.2021 в 22:26.
Ответить с цитированием