Верстаем основу карточной сцены

Сегодня мы набросаем основную нашу верстку, скелет можно сказать, карточный стол. И научимся отправлять карты в нужное место на столе. Вот примерно что-то такое у нас получится в итоге:



С чего вообще начинается любая верстка? Как правило, с разбиения страницы на блоки. Сначала один большой (wrapper), потом поменьше (шапка, подвал), потом еще и еще меньше. Давайте и нашу игровую сцену также разобьем.

Все вместе – это будет игровая сцена, элемент scene. В нем будет выделяться 5 крупных элементов – это стол и четыре руки (игрока, их может быть меньше, но я решил пока сделать так). Можно все эти пять элементов расположить отдельно, но я решил сделать три столбца (слева направо):

• игрок слева
• игрок сверху, стол, игрок снизу
• игрок справа

Логично же, верно? Тогда все очень просто настроить флексами и столбцами.

В блоках hand мы расположим для начала 6 карт, на столе – колоду и 12 мест. Все карты сделаем тегами img и сдвинем слева направо, а на столе сверху вниз.

Вот готовая верстка

<div id="scene">
    <div class="scene_col">
        <div id="hand2" class="hand">
            <img class="pos_card" id="card7" src="img/0.jpg" />
            <img class="pos_card" id="card8" src="img/0.jpg" />
            <img class="pos_card" id="card9" src="img/0.jpg" />
            <img class="pos_card" id="card10" src="img/0.jpg" />
            <img class="pos_card" id="card11" src="img/0.jpg" />
            <img class="pos_card" id="card12" src="img/0.jpg" />
        </div>
    </div>
    <div class="scene_col">
        <div id="hand3" class="hand">
            <img class="pos_card" id="card13" src="img/0.jpg" />
            <img class="pos_card" id="card14" src="img/0.jpg" />
            <img class="pos_card" id="card15" src="img/0.jpg" />
            <img class="pos_card" id="card16" src="img/0.jpg" />
            <img class="pos_card" id="card17" src="img/0.jpg" />
            <img class="pos_card" id="card18" src="img/0.jpg" />
        </div>
        <div id="table">
            <div id="deck">
                <img class="deck_pos" id="card25" src="img/card_back.png" />
            </div>
            <div id="area">
                <div class="tab_pos" id="tab_pos_1"></div>
                <div class="tab_pos" id="tab_pos_2"></div>
                <div class="tab_pos" id="tab_pos_3"></div>
                <div class="tab_pos" id="tab_pos_4"></div>
                <div class="tab_pos" id="tab_pos_5"></div>
                <div class="tab_pos" id="tab_pos_6"></div>
                <div class="tab_pos" id="tab_pos_7"></div>
                <div class="tab_pos" id="tab_pos_8"></div>
                <div class="tab_pos" id="tab_pos_9"></div>
                <div class="tab_pos" id="tab_pos_10"></div>
                <div class="tab_pos" id="tab_pos_11"></div>
                <div class="tab_pos" id="tab_pos_12"></div>
            </div>
        </div>
        <div id="hand1" class="hand">
            <img class="pos_card" id="card1" src="img/0.jpg" />
            <img class="pos_card" id="card2" src="img/0.jpg" />
            <img class="pos_card" id="card3" src="img/0.jpg" />
            <img class="pos_card" id="card4" src="img/0.jpg" />
            <img class="pos_card" id="card5" src="img/0.jpg" />
            <img class="pos_card" id="card6" src="img/0.jpg" />
        </div>
    </div>
    <div class="scene_col" class="hand">
        <div id="hand4">
            <img class="pos_card" id="car19" src="img/0.jpg" />
            <img class="pos_card" id="card20" src="img/0.jpg" />
            <img class="pos_card" id="card21" src="img/0.jpg" />
            <img class="pos_card" id="card22" src="img/0.jpg" />
            <img class="pos_card" id="card23" src="img/0.jpg" />
            <img class="pos_card" id="card24" src="img/0.jpg" />
        </div>
    </div>
</div>
<br>
 <button id="str">Старт</button>  

Стили

<style>
#scene{
    height: 600px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url(img/fon_table_1.png);
}
.pos_card{
    margin-left: -50px !important;
}
.hand{
    margin-left: 50px;
    text-align: center;
}
#table{
    height: 300px;
    display: flex;
    justify-content: start;
    width: 550px;
    align-items: center;
    padding: 10px;
}
.deck_pos, .tab_pos{
    width: 71px;
    height: 96px;
}
.tab_pos{
    background: black;
    border: 2px solid white;
    margin-top: -50px;
}
#area{
    display: flex;
    width: 450px;
    height: auto;
    flex-wrap: wrap;
    margin-left: 10px;
}
</style>

Теперь давайте усовершенствуем движение карты. В прошлый раз что мы делали? Просто вверх на 100 пикселей двигали. А теперь надо в одно из мест на столе. Это несложно: сначала получаем координаты двигаемой карты и конечного места, а затем рассчитываем смещения по горизонтали и вертикали.

function startAnimation(start, end) {
    // Получаем элементы
    let box1 = document.getElementById(start);
    let box2 = document.getElementById(end);

    // Получаем текущие позиции элементов
    let rect1 = box1.getBoundingClientRect();
    let rect2 = box2.getBoundingClientRect();

    // Вычисляем смещения
    let translateX = rect2.left - rect1.left;
    let translateY = rect2.top - rect1.top;

    anime({
        targets: '#'+start,
        translateX: translateX,
        translateY: translateY,
        duration: 1000,
        easing: 'linear'
    });
}

И запускаем функцию. Сразу и через секунду для другой карты.

jQuery("#str").on('click', function() {
    startAnimation('card3', 'tab_pos_1');
    setTimeout(() => {
		startAnimation('card12', 'tab_pos_7');
	}, 1000);
    
}); 

Вот как это выглядит в реальности
Старт