Форум

arkadii_parovozov · #1 (**permalink**) 24.09.2019, 18:33

Приветствую всех!

Делаю шахматы на js. Для перетаскивания фигур, использую библиотеку ui а именно функцию draggable. И проблема заключается в том что при перетаскивании фигуры, она не видна в случае когда мы ее наводим на соседнею фигуру. То есть первая уходит под все остальные, вторая показывается над первой (как мне и нужно), но скрывается под всеми остальными, и т.д. А последняя как и нужно всегда показывается над всеми.

Смотрел документацию, пробовал применить:

$(".selector").draggable({ stack:".draggable" });

Пробовал:

$(".selector").draggable({ zIndex:5 });

Пробовал в лоб:

function setDraggable(){
	$('.figure').draggable({
		start: function() {
			$('.figure').css('z-index',2);
			$(this).css('z-index',999);
        },
        stop: function() {
		//cod
        }
	});
}

Но индекс к перетаскиваемой фигуре не применяется. Позиционирование блокам задано, консоль показывает у всех дивов с фигурами z-index: 2, у захваченной фигуры z-index: 2, но она все равно скрывается за фигурами следующими за ней.

Подскажите в чем может быть проблема.

рони · #2 (**permalink**) 24.09.2019, 19:15

arkadii_parovozov,
сделайте минимальный пример

рони · #3 (**permalink**) 24.09.2019, 19:19

arkadii_parovozov,

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>demo</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script type='text/javascript'>
$(window).load(function () {
  $('div[id*=element]').draggable({

        zIndex: 35

    })


     });

</script>
</head>
<body>

                      			<div id="element1" class="img"><div class="delete"></div><img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" width="183" height="23" /><div class="resaze"></div></div>
                      			<div id="element2" class="img"><div class="delete"></div><img src="http://javascript.ru/img/ws_1.png" width="115" height="66" /><div class="resaze"></div></div>
                      			<div id="element3" class="img"><div class="delete"></div><img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" width="183" height="23" /><div class="resaze"></div></div>
                      			<div id="element4" class="img"><div class="delete"></div><img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" width="115" height="66" /><div class="resaze"></div></div>

</body>
</html>

arkadii_parovozov · #4 (**permalink**) 24.09.2019, 19:42

рони, спасибо большое! Я скопировал из Вашего примера ссылки на библиотеки, вставил js код отсюда (естественно element заменил на свой). Но не работает и все тут.

Ничего не могу понять. Консоль молчит.

Вот ссылка на шахматы: chess

Там функция вызывается на 104 строке в js файле.

И еще, как здесь к карме прибавить можно? Когда жму на + выскакивает: "Вы должны добавить отзыв кому-то ещё, прежде чем сможете снова добавить его рони."

рони · #5 (**permalink**) 24.09.2019, 20:12

arkadii_parovozov,
вариант расположить фигуры в .table_chass а не в ячейках.

arkadii_parovozov · #6 (**permalink**) 24.09.2019, 21:20

рони,
но ведь фигура должна быть расположена в конкретном квадрате доски (e2, e4 к примеру). Я не могу их бросить в один контейнер, как потом ходы определять, какая фигура в клетке и т.п.?

Не хочется все что есть выбросить и заново писать логику. Может есть другой вариант?

arkadii_parovozov · #7 (**permalink**) 24.09.2019, 21:39

рони,
Спасибо большое за "наводку". Я прописал z-index клеткам а не фигурам:

function setDraggable(){
	$('.figure').draggable({
		start: function() {
			$('.square').css('z-index',2);
			$(this).parent().css('z-index',999);
        },
        stop: function() {
			//cod
        }
	});
}

на мой взгляд это не правильно конечно, но за неимением лучшего, и так сойдет.

Rise · #8 (**permalink**) 24.09.2019, 23:59

arkadii_parovozov, мне кажется здесь перетаскивание будет напряжно, можно просто на кликах (тапах) сделать - выбор фигуры, выбор хода, а перетаскиванием пусть занимается анимация, да и без нее можно - тут исчез, там появился, ну а так конечно, чтобы не уснуть, всё же лучше добавить спецэффектов, как говорится.

arkadii_parovozov · #9 (**permalink**) 25.09.2019, 13:00

Ну с перетаскиванием красивее будет. Мог конечно и сам реализовать, но с библиотекой быстрее будет.

На днях наткнулся на статью на хабре в которой говорится об одном мексиканце который реализовал алгоритм игры в шахматы всего в 1Кб.

Открыл код, глянул, а там вот это нечто:

for (B = i = y = u = b = i = 5 - 5, x = 10, I = [], l = []; l[B] = "ECDFBDCEAAAAAAAAIIIIIIIIMKLNJLKM@G@TSb~?A6J57IKJT576,+-48HLSUmgukgg OJNMLK  IDHGFE".charCodeAt(B) - 64, B++ < 120; I[B - 1] = B % x ? B / x % x < 2 | B % x < 2 ? 7 : B / x & 4 ? 0 : l[i++] : 7);

function X(c, h, e, s) {
    e ^= 8;
    for (var o, S, C, A, R, T, G, n, N = -1e8, O = 20; ++O < 99;)
        if ((o = I[T = O]) && (G = o ^ e) < 7) {
            A = G-- & 2 ? 8 : 4;
            C = o - 9 ? l[61 + G] : 49;
            do
                if (!(R = I[T += l[C]]) && !!G | A < 3 || (R + 1 ^ e) > 9 && G | A > 2) {
                    if (!(R - 2 & 7)) return 78 - h << x;
                    n = G | (e ? T > 29 : T < 91) ? o : 6 ^ e;
                    S = (R && l[R & 7 | 32] - h - G) + (G ? 0 : n - o ? 55 : (A < 2) + 1);
                    if (c > h || 1 < c & c == h && S > 2) {
                        I[T] = n;
                        I[O] = 0;
                        S -= X(c, h + 1, e, S - N);
                        if (!(h || c - 1 | B - O | T - b | S < -1e4)) return W(B = 0), e && setTimeout("X(2,0,8),X(1,0,8)", 50);
                        I[O] = o;
                        I[T] = R
                    }
                    if (S > N || !h & S == N && Math.random() < .5)
                        if (N = S, c > 1)
                            if (h ? s - S < 0 : (B = O, b = T, 0)) return S
                } while (!R & G > 2 || (T = O, (G || A > 2 | (e ? O > 78 : O < 41) & !R) && ++C * --A))
        } return N
}

function W() {
    i = "<table>";
    for (u = 18; u < 98; i += ++u % x - 9 ? "<th width=60 height=60 onclick='I[b=" + u + "]>8?W(B=b):X(1,0,0)'style='font-size:50px'bgcolor=#" + (u - B ? u * .9 & 1 || 9 : "d") + "0f0e0>&#" + (I[u] ? 9808 + l[67 + I[u]] : 160) + ";" : u++ && "<tr>");
    document.body.innerHTML = i + "</table>"
}
W();

ну и сама отрисовка доски (в счет не берем):

(function() {
    var doc = document;
    var header = doc.getElementsByTagName("header")[0];
    var firstChild = header.firstChild;
    var p = doc.getElementsByClassName("p")[0];
    var n = doc.getElementsByClassName("n")[0];
    header.insertBefore(p, firstChild);
    header.insertBefore(n, firstChild);
    header.appendChild(doc.getElementsByTagName("p")[0])
})();
(function reload() {
    var doc = document;
    var header = doc.getElementsByTagName("header")[0];
    var iframe = doc.createElement("iframe");
    doc.body.appendChild(iframe);
    var iwin = iframe.contentWindow;
    var idoc = iframe.contentDocument;
    idoc.open();
    idoc.close();
    idoc.write('<!doctype html><head><meta charset="utf-8"><body>');
    idoc.head.innerHTML = "<style>\n" + "html, body { margin: 0; padding: 0; border: 0; width: 100%; height: 100%; }\n" + "</style>\n";
    idoc.body.innerHTML = "\n\t\t" + "<canvas" + ' id="c"' + '' + "></canvas>\n" +
        (false ? "<script>\x3c/script>\n" : "") + "";
    var Audio = iwin.Audio;
    iwin.Audio = function(x) {
        return new Audio(x)
    };
    if (false) {
        var canvas = idoc.getElementsByTagName("canvas")[0];
        iwin.a = canvas.getContext("2d");
        iwin.b = idoc.body;
        iwin.c = canvas;
        var p2d = iwin.Path2D;

        function wrap(ctx) {
            var fill = ctx.fill,
                clip = ctx.clip,
                stroke = ctx.stroke;
            ctx.scale = ctx.scale;
            ctx.drawFocusIfNeeded = ctx.drawFocusIfNeeded;
            ctx.ellipse = ctx.ellipse;
            ctx.fill = function(r) {
                fill.call(ctx, r === "evenodd" ? "evenodd" : "nonzero")
            };
            ctx.stroke =
                function(p) {
                    if (p && p2d && p instanceof p2d) stroke.call(ctx, p);
                    else stroke.call(ctx)
                };
            ctx.clip = function(p) {
                if (p && p2d && p instanceof p2d) clip.call(ctx, p);
                else clip.call(ctx)
            };
            return ctx
        }
        if (false) {
            var cvs = iwin.c;
            var cNode = cvs.cloneNode;
            cvs.cloneNode = function() {
                var clone = cNode.apply(cvs, arguments);
                var cloneGet = clone.getContext;
                clone.getContext = function() {
                    return wrap(cloneGet.call(clone, "2d"))
                };
                return clone
            };
            var get = cvs.getContext;
            cvs.getContext = function() {
                return wrap(get.call(cvs, "2d"))
            }
        }
        if (false) wrap(iwin.a)
    }
    idoc.body.clientWidth;
    var demo = idoc.createElement("script");
    var scrpt = doc.querySelector('script[type="demo"]').textContent.replace(/m.location=m.location;/, "top.reload();");
    if (false) scrpt = "A=0,B=0;" + scrpt;
    demo.textContent = scrpt;
    idoc.body.appendChild(demo);
    idoc.close();
    iframe.contentWindow.focus();
    var r = doc.createElement("div");
    r.innerHTML = "&#8635;";
    r.className = "button r";
    r.title = "restart just the demo (local, without remote fetch)";
    window.reload = r.onclick = function() {
        doc.body.removeChild(iframe);
        r.parentElement.removeChild(r);
        iframe = null;
        r = null;
        idoc = null;
        header = null;
        reload()
    };
    var firstLine = doc.getElementsByTagName("div")[0];
    header.insertBefore(r, firstLine)
})();

ну и сама ссылка на игру

Может кто-то обьяснить как этот алгоритм устроен? У меня файл приблежается к 1к строк, а я еще не приступал к реализации шаха и мата, а у него 1010 символов и там реализована даже логика игры! То есть он еще и сам ходит, причем не как попало, а с учетом стоимости фигур, позиции, цвета и т.п. Проверяет правильность ходов в обычном режиме, в режиме угрозы королю, превращение пешки в ферзя. В общем я смотрю на эти символы и понять не могу как туда можно зашить такую логику.

Просветите пожалуйста )

Rise · #10 (**permalink**) 25.09.2019, 15:39

arkadii_parovozov, там написано Update available here!, юзаем тот код. Смотрим там demo details, написано queen-only promotion and without castling or en passant, это что не реализовано. Отрисовка доски это функция W из первого скрипта, а второй скрипт относится только к кнопке restart.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Chess</title>
</head>
<body>
<script>
for(B=i=y=u=b=i=5-5,x=10,I=[],l=[];l[B]="ECDFBDCEAAAAAAAAIIIIIIIIMKLNJLKM@G@TSb~?A6J57IKJT576,+-48HLSUmgukgg OJNMLK  IDHGFE".charCodeAt(B)-64,B++<120;I[B-1]=B%x?B/x%x<2|B%x<2?7:B/x&4?0:l[i++]:7);function X(c,h,e,s){c^=8;for(var o,S,C,A,R,T,G,d=e&&X(c,0)>1e4,n,N=-1e8,O=20;++O<99;)if((o=I[T=O])&&(G=o^c)<7){A=G--&2?8:4;C=o-9?l[61+G]:49;do if(!(R=I[T+=l[C]])&&!!G|A<3||(R+1^c)>9&&G|A>2){if(!(R-2&7))return 78-h<<x;n=G|(c?T>29:T<91)?o:6^c;S=(R&&l[R&7|32]*2-h-G)+(G?0:n-o?110:(A<2)+1);if(e>h||1<e&e==h&&S>2|d){I[T]=n;I[O]=0;S-=X(c,h+1,e,S-N);if(!(h||e-1|B-O|T-b|S<-1e4))return W(),c&&setTimeout("X(8,0,2),X(8,0,1)",50);I[O]=o;I[T]=R}if(S>N||!h&S==N&&Math.random()<.5)if(N=S,e>1)if(h?s-S<0:(B=O,b=T,0))return N}while(!R&G>2||(T=O,(G||A>2|(c?O>78:O<41)&!R)&&++C*--A))}return N}function W(){i="<table>";for(u=18;u<98;document.body.innerHTML=i+=++u%x-9?"<th width=60 height=60 onclick='I[b="+u+"]>8?W():X(0,0,1)'style='font-size:50px'bgcolor=#"+(u-B?u*.9&1||9:"d")+"0f0e0>&#"+(I[u]?9808+l[67+I[u]]:160)+";":u++&&"<tr>")B=b}W()
</script>
</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript