Два варианта окончания

Продолжаем работу над карточной сценой. В этой заметке мы рассмотрим реальное окончание партии в дурака и анимируем его в разных вариантах. Осталось два игрока из четырех, ход игрока слева. Вариант 1 Вариант 2

---

Вы видите две кнопки: вариант 1 и вариант 2. При нажатии на вариант 1 – игрок слева проигрывает. Вариант 2 – выигрывает. В реальности кстати игрок выбрал первый и проиграл.

Теперь давайте посмотрим, что у нас под капотом этой карточной сцены.

Верстка

<div id="scene">
    <div class="scene_col">
        <div id="hand2" class="hand">
            <img class="pos_card" id="card7" src="images/14.jpg" />
            <img class="pos_card" id="card8" src="images/12.jpg" />
            <img class="pos_card" id="card9" src="images/24.jpg" />
            <img class="pos_card" id="card10" src="images/3.jpg" />
            <img class="pos_card" id="card11" src="images/30.jpg" />
        </div>
    </div>
    <div class="scene_col">
        <div id="hand3" class="hand">
            <img class="pos_card" id="card13" src="images/16.jpg" />
            <img class="pos_card" id="card14" src="images/6.jpg" />
            <img class="pos_card" id="card15" src="images/33.jpg" />
        </div>
        <div id="table">
            <div id="deck">
                <img class="deck_pos" id="card25" src="images/card_back.png" />
            </div>
            <div id="area">
                <div class="tab_pos" id="tab_pos_1"></div>
                <div class="tab_pos" id="tab_pos_3"></div>
                <div class="tab_pos" id="tab_pos_5"></div>
                <div class="tab_pos" id="tab_pos_7"></div>
                <div class="tab_pos" id="tab_pos_9"></div>
                <div class="tab_pos" id="tab_pos_11"></div>
                <div class="tab_pos" id="tab_pos_2"></div>
                <div class="tab_pos" id="tab_pos_4"></div>
                <div class="tab_pos" id="tab_pos_6"></div>
                <div class="tab_pos" id="tab_pos_8"></div>
                <div class="tab_pos" id="tab_pos_10"></div>
                <div class="tab_pos" id="tab_pos_12"></div>

            </div>
        </div>
        <div id="hand1" class="hand">
        </div>
    </div>
    <div class="scene_col" >
        <div id="hand4" class="hand">

        </div>
    </div>
</div>


<br>
<button id="str1">Вариант 1</button>  
<button id="str2">Вариант 2</button>  

Стили

<style>
#scene{
    height: 600px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url(images/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{
    margin-top: -50px;
}
#area{
    display: flex;
    width: 450px;
    height: auto;
    flex-wrap: wrap;
    margin-left: 10px;
}
.hand img{
display: unset!important;
}
#deck{
    opacity: 0;
}
</style>

Код

let variant1 = Array("card11", "card15", "card10", "card14", "card8", "card13");
let variant2 = Array("card11", "card15", "card9", "card13", "card8");

let arr_hod = variant1;

let chet = 0;
let delay = 1000;
let is_do = false;


function doAnimation() {
    if (!is_do){
        return;
    }

    if (chet >= arr_hod.length){
        return;
    }

    let start = arr_hod[chet];
    chet++;

    let end = "tab_pos_"+chet;

    // Получаем элементы
    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: delay,
        easing: 'linear'
    });
}



jQuery("#str1").on('click', function() {
    jQuery(".pos_card").css("transform", "unset");
    chet = 0;
    arr_hod = variant1;
    is_do = true;
}); 

jQuery("#str2").on('click', function() {
    jQuery(".pos_card").css("transform", "unset");
    chet = 0;
    arr_hod = variant2;
    is_do = true;
});


setInterval(() => {
	doAnimation();
}, delay);
</script>

Вот на коде и остановимся подробнее. Напомню, что основная моя задача – это сделать анимацию автоматической. То есть задать карточную нотацию и в итоге получить анимированную карточную партию.

Здесь, как вы видите, по сравнению с прошлой заметкой я изменил функцию анимации и убрал из нее параметры. Зачем? Потому что setTimeout в цикле JS работает не совсем так, как хочется изначально, а пока усложнять код различными замыканиями не будет.

В итоге у нас сейчас постоянно работает функция setInterval, а то, с чем работать – она берет из глобальных переменных.

Сами ходы (варианты) тут записаны в двух массивах variant1 и variant2. По сути это элементы, которые стремятся к центру доски. По нажатию кнопки просто очищаем свойства этих элементов и запускаем цикл анимации с выбранным массивом.

Всё в целом работает как надо, но увы – только при ходах на стол, так что придется переделывать дальше.

Да, кстати, вернемся непосредственно к партии. Если вы задаетесь вопросом, откуда человек знать, какие карты остались у противника, то вам сюда.