Только крести


Посмотрите на позицию вниз и не раздумывая, за пару секунд, скажите ваш алгоритм победы для нижнего игрока (его ход). Получилось?




Нижний игрок здесь – это я. Первое, что приходит в голову – это вариант 1. То есть королей давать одного за одним и потом остаться с мелочью крестовой. Давать её сразу конечно нельзя ни в коем случае. Но и первый вариант ведет к поражению. Что делать?

А надо немного подумать. Почему надо после первого короля кидать сразу второго? Можно отдать одного любого короля (кроме козырного) первым ходом, а вторым – уже сунуть крестовую шестерку. Тогда, если противник её побьет крестовым королем, то вы дадите еще одного некозырного короля, а следующим ходом – уже козырного (или девятку - неважно) и победа за вами.

Верстка 

<div id="scene">
    <div class="scene_col">
        <div id="hand2" class="hand">
            <div class="hand_pos" id="hand_2_pos_1"></div>
            <div class="hand_pos" id="hand_2_pos_2"></div>
            <div class="hand_pos" id="hand_2_pos_3"></div>
            <div class="hand_pos" id="hand_2_pos_4"></div>
            <div class="hand_pos" id="hand_2_pos_5"></div>
            <div class="hand_pos" id="hand_2_pos_6"></div>
            <div class="hand_pos" id="hand_2_pos_7"></div>
        </div>
    </div>
    <div class="scene_col">
        <div id="hand3" class="hand">
            <div class="hand_pos" id="hand_3_pos_1"></div>
            <div class="hand_pos" id="hand_3_pos_2"></div>
            <div class="hand_pos" id="hand_3_pos_3"></div>
            <div class="hand_pos" id="hand_3_pos_4"></div>
            <div class="hand_pos" id="hand_3_pos_5"></div>
            <div class="hand_pos" id="hand_3_pos_6"></div>
            <div class="hand_pos" id="hand_3_pos_7"></div>
        </div>
        <div id="table">
            <div id="deck">
                <img src="images/pik.png" id="trump" />
                <img class="flash_pos" 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 id="flash" >
                <img class="flash_pos" src="images/card_back.png" />
            </div>
        </div>
        <div id="hand1" class="hand">
            <div class="hand_pos" id="hand_1_pos_1"></div>
            <div class="hand_pos" id="hand_1_pos_2"></div>
            <div class="hand_pos" id="hand_1_pos_3"></div>
            <div class="hand_pos" id="hand_1_pos_4"></div>
            <div class="hand_pos" id="hand_1_pos_5"></div>
            <div class="hand_pos" id="hand_1_pos_6"></div>
            <div class="hand_pos" id="hand_1_pos_7"></div>
        </div>
    </div>
    <div class="scene_col" >
        <div id="hand4" class="hand">
            <div class="hand_pos" id="hand_4_pos_1"></div>
            <div class="hand_pos" id="hand_4_pos_2"></div>
            <div class="hand_pos" id="hand_4_pos_3"></div>
            <div class="hand_pos" id="hand_4_pos_4"></div>
            <div class="hand_pos" id="hand_4_pos_5"></div>
            <div class="hand_pos" id="hand_4_pos_6"></div>
            <div class="hand_pos" id="hand_4_pos_7"></div>
        </div>
    </div>
</div>
<div id="start"></div>


<br>
<button id="str0" class="btn btn-primary">Стартовая позиция</button>  
<button id="str1" class="btn btn-primary">Вариант 1</button> 
<button id="str2" class="btn btn-primary">Вариант 2</button>
Стили 

<style>
#scene{
    height: 600px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url(images/fon_table_1.png);
}
.hand_pos{
    margin-left: -50px !important;
    width: 71px;
    height: 96px;
}
.hand{
    margin-left: 50px;
    text-align: center;
    display: flex;
}
#table{
    height: 300px;
    display: flex;
    justify-content: start;
    width: 650px;
    align-items: center;
    padding: 10px;
}
.deck_pos, .tab_pos{
    width: 71px;
    height: 96px;
}
.tab_pos{
    margin-top: -50px;
}
#area{
    display: flex;
    min-width: 440px;
    height: auto;
    flex-wrap: wrap;
    margin-left: 10px;
}
.hand img{
display: unset!important;
}
#deck, #flash{
    width: 71px;
    height: 96px;
    margin-left: 70px;
    display: inline-flex;
}
#deck{
    position: relative;
}
#deck > img,  #flash> img{
    margin-left: -70px;
}
.flash_pos{
    z-index: 9999;
}
#trump{
    position: absolute;
    width: 30px;
    right: 50%;
    top: 50%;
    margin-top: -15px;
    z-index: 99999;
    margin-right: 5px;
}

</style>
Код JS 

<script src="js/anime.min.js"></script>
<script src="js/jquery-3.6.0.min.js"></script>
<script>


const names = {
        "6d": "0.jpg",
        "7d": "1.jpg",
        "8d": "2.jpg",
        "9d": "3.jpg",
        "10d": "4.jpg",
        "Jd": "5.jpg",
        "Qd": "6.jpg",
        "Kd": "7.jpg",
        "Ad": "8.jpg",
        "6s": "9.jpg",
        "7s": "10.jpg",
        "8s": "11.jpg",
        "9s": "12.jpg",
        "10s": "13.jpg",
        "Js": "14.jpg",
        "Qs": "15.jpg",
        "Ks": "16.jpg",
        "As": "17.jpg",
        "6c": "18.jpg",
        "7c": "19.jpg",
        "8c": "20.jpg",
        "9c": "21.jpg",
        "10c": "22.jpg",
        "Jc": "23.jpg",
        "Qc": "24.jpg",
        "Kc": "25.jpg",
        "Ac": "26.jpg",
        "6h": "27.jpg",
        "7h": "28.jpg",
        "8h": "29.jpg",
        "9h": "30.jpg",
        "10h": "31.jpg",
        "Jh": "32.jpg",
        "Qh": "33.jpg",
        "Kh": "34.jpg",
        "Ah": "35.jpg"
    }

const coef = 2;
function build_pos_card(card){
    let src = convert_name_to_src(card);
    return `<img class="pos_card" id="card_${card}" src="${src}" />`;
}

let cards_table = 0;
let cards_hand1 = 0;
let cards_hand2 = 0;
let cards_hand3 = 0;
let cards_hand4 = 0;
let delay = 0;
full_reset();

let trump = "s";

//стартовая позиция 
let variant0 = Array("1+ Ks", "1+ Kd", "1+ Kh", "1+ 9c", "1+ 6c", "4+ Kc");

//варианты игры
let variant1 = Array("1-4 Kd", "4+ Kd", "1-4 Kh", "4+ Kh", "1-4 Ks", "4+ Ks");
let variant2 = Array("1-4 Kd", "4+ Kd", "1-4 6c", "4-t Kc", "1-4 Kh", "4+ Kh", "4+ Kc", "4+ 6c"
,"1-4 Ks",  "4+ Ks", "1-4 9c");

function full_reset(){
    cards_table = 0;
    cards_hand1 = 0;
    cards_hand2 = 0;
    cards_hand3 = 0;
    cards_hand4 = 0;

    jQuery(".pos_card").remove();

    Object.entries(names).forEach(([key, value]) => {
        let img = `<img class="pos_card" id="card_${key}" src="images/${value}" />`;
        jQuery("#deck").prepend(img);
    });
}

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

    box1.setAttribute("style", "z-index: "+end.charAt(end.length - 1));

    // Получаем текущие позиции элементов
    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',
        complete: function() {
            $('#'+start).appendTo('#'+end);
            $('#'+start).css("transform", "unset");
        }
    });
}

function parse_hod(str){
    let start = "";
    let end = "";
    let action = "";
    let numb = 0;

    let arr = str.split("");
    if (arr[1] == "-" || arr[0] == "t"){
        action = "table";
        start = "card_"+str.split(" ")[1];
        end = "tab_pos_";
    }
    else if (arr[0] == "f"){
        action = "flash";
        start = "card_"+str.split(" ")[1];
        end = "flash";
    }
    else if (arr[1] == "+"){
        action = "hand";
        start = "card_"+str.split(" ")[1];
        end = `hand_${arr[0]}_pos_`;
        numb = arr[0];
    }

    let obj = {
        "action": action,
        "start": start,
        "end": end,
        "numb":  numb
    }
    return obj;
}

function job_variant(variant){
    arr_hod = variant;

arr_hod.forEach((hod, idx) => {
    obj = parse_hod(hod);

    if (obj['action'] == "table"){
        cards_table++;
        (function(obj, cards_table) {        
            setTimeout(() => {
                stepAnimation(obj['start'], obj['end']+cards_table);
            },  coef*delay*idx);
        })(obj, cards_table);
    }
    if (obj['action'] == "hand"){
        if (obj['numb'] == 1){
            cards_hand1++;
            if (cards_table > 0){
                cards_table--;
            }            
            (function(obj, cards_hand1) {        
                setTimeout(() => {
                    stepAnimation(obj['start'], obj['end']+cards_hand1);
                },  coef*delay*idx);
            })(obj, cards_hand1);
        }
        if (obj['numb'] == 2){
            cards_hand2++;
            if (cards_table > 0){
                cards_table--;
            }  
            (function(obj, cards_hand2) {        
                setTimeout(() => {
                    stepAnimation(obj['start'], obj['end']+cards_hand2);
                }, coef*delay*idx);
            })(obj, cards_hand2);
        }
        if (obj['numb'] == 3){
            cards_hand3++;
            if (cards_table > 0){
                cards_table--;
            }  
            (function(obj, cards_hand3) {        
                setTimeout(() => {
                    stepAnimation(obj['start'], obj['end']+cards_hand3);
                },  coef*delay*idx);
            })(obj, cards_hand3);
        }
        if (obj['numb'] == 4){
            cards_hand4++;
            if (cards_table > 0){
                cards_table--;
            }  
            (function(obj, cards_hand4) {        
                setTimeout(() => {
                    stepAnimation(obj['start'], obj['end']+cards_hand4);
                },  coef*delay*idx);
            })(obj, cards_hand4);
        }
    }
    if (obj['action'] == "flash"){
        cards_table--;
        (function(obj, cards_table) {        
            setTimeout(() => {
                stepAnimation(obj['start'], obj['end']);
            },  coef*delay*idx);
        })(obj, cards_table);
        
        
    }
});
}

job_variant(variant0);
jQuery("#str0").on('click', function() {
    delay = 0;
    full_reset();
    job_variant(variant0);
}); 


jQuery("#str1").on('click', function() {
    delay = 1000;
    job_variant(variant1);  
}); 

jQuery("#str2").on('click', function() {
    delay = 1000;
    job_variant(variant2);  
}); 

jQuery("#str3").on('click', function() {
    delay = 1000;
    job_variant(variant3);  
}); 


</script>
Изменения

Я увеличил интервал запуска анимации, чтобы не мгновение в мгновение начиналась следующая, а в два раза больше коэффициент. То есть при времени анимации сейчас 500мс, следующая начнется через 500мс (1с – 500мс). Это нужно для фиксации карты на месте, чтобы браузер мог обновить, пересчитать стили-координаты (точнее JS).

Еще добавил отображение козырной масти. Переменная trump.

В следующей статье уже наверно можно приступать к получению данных по сети, начинать оптимизировать код (кривой и повторения мне не нравится). Дальше уже адаптировать для мобильных. Как адаптировать, честно говоря, пока не имею представления; надо обдумать – это все же не обычный сайт.
Автор этого материала - я - Пахолков Юрий. Я оказываю услуги по написанию программ на языках Java, C++, C# (а также консультирую по ним) и созданию сайтов. Работаю с сайтами на CMS OpenCart, WordPress, ModX и самописными. Кроме этого, работаю напрямую с JavaScript, PHP, CSS, HTML - то есть могу доработать ваш сайт или помочь с веб-программированием. Пишите сюда.

тегизаметки, личное, карты, js, css




Отправляя сообщение я подтверждаю, что ознакомлен и согласен с политикой конфиденциальности данного сайта.




Помогите сайту
Калькулятор для сайта: основа основ
Атрибуты продукта, или интерактив с помощью jQuery