Только крести
Посмотрите на позицию вниз и не раздумывая, за пару секунд, скажите ваш алгоритм победы для нижнего игрока (его ход). Получилось?
Нижний игрок здесь – это я. Первое, что приходит в голову – это вариант 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 - то есть могу доработать ваш сайт или помочь с веб-программированием. Пишите сюда.
Читайте также:
Отправляя сообщение я подтверждаю, что ознакомлен и согласен с политикой конфиденциальности данного сайта.
Программы на заказ
Отзывы
Контакты