Всё должно быть связано HTML, JS и CSS. Нельзя просто подключить JS и CSS к другому сайту. Не хотел бы Вас перегружать, но Вам важно понять как работают браузеры. Получив HTML код, бразеры создают DOM - Document Object Model. Это объект - дерево связей всех HTML элеменетов (тэгов). Есть родительские элементы, а у них дочение, которые могут также могут быть родительскими для других элементов. JS и CSS манипулируют DOM элементами с помощью селекторов. Если Вы попытаетесь в CSS изменить свойства элемента, указав его селектор. например, .dark, то браузер попытается найти этот элемент в DOM. Если, например, в html тэге не задан class="dark", то браузер просто игнорирует эту CSS директиву. А вот JS при попытке манипулировать элементом, который не существует, возникнет фатальная ошибка. Поэтому, что-то, как у Вас, перестаёт работать. В таких, случаях, следует искать причину в консоле браузера. Удачи!
Подключил вашу доску,фигура не летает,все "dark" и "light" на своих местах: https://кибершахматы.рф/gallery/data/bg666.jpg
Глядя на скриншот про "полёты" ничего сказать не могу. Покажите, пожалуйста сообщения в консоле браузера. Кроме доски выводится информация, которая должна актуализироваться после каждого хода без перезагрузки страницы. Я показал Вам как работает в JS с AJAX получение информации об ответном ходе и сам ход. Вам нужно добавить в JS изменение контента в инфоблоках, например, так HTML: <div id="info"></div> <script> elem = document.getElementById("info"); elem.innerHTML = "Ход " + moveInfoObj["hod_kuda2"] + " - " + moveInfoObj["hod_shto2"]; </script> Вы же этого не делаете, а перезгружаете страницу после каждого хода. Поэтому не видите анимацию.
Я курил и меня осенило,давайте добьем программу.Вы проделали большую работу.Надо наладить до конца Если Вам не трудно зайдите на тестовый сайт https://chess-rmx.net и начните новую игру на варианте #2,чтобы Вам выпали белые.посмотрите ошибку Обновление страницы сделал 5 минут,можно посмотреть в консоли пока 5 минут проходит При первом открытии доски пешка ДРОЖИТ,но не летит,и на этом вся анимация заканчивается. Я запросто могу поменять все свои 16 досок на 8 вариантах на Вашу доску Консоль открыл,навел на пешку,Написано только img 44 x 44.63 Спасибо Вам за большой код JS ,не поленились написать.Впервые за 8 лет такого доброго человека вижу
Ошибка на картинке: https://кибершахматы.рф/gallery/data/gttt888.jpg Надо отменить position: absolute; Код (Text): .chess-bord img{ width: 52px; position: absolute; transition: 1s linear; z-index: 999; cursor: pointer; } Но без этого "абсолюта" анимация не работает У вас на примере та же ошибка: Chessbord Master (alto-booking.com) Помогите,остался один штрих Еще вопрос: Если я изменю размеры <div> и размеры img то скрипт не будет работать?? Мне хорошо бы убавить доску,на всех вариантах разный размер
Добрый день! Я добавил вишунку на торте. Слева от доски инфоблок, в котором выводятся все ходы. Добавил для этого ещё одну функцию Код (Javascript): function addInfo(moveFrom, moveTo){ if(typeof moveFrom == "object") { hod_otkuda = moveFrom["hod_shto2"]; hod_kuda = moveFrom["hod_kuda2"]; } else { hod_otkuda = moveFrom; hod_kuda = moveTo; } src = document.getElementById(hod_otkuda).children[0].src; el = document.createElement("div"); el.innerHTML = `${moveNumber.toString().padStart(2,"0")}. <img src=${src} width=17> ${hod_otkuda}-${hod_kuda}`; info.appendChild(el); info.scrollTo(0, info.scrollHeight); moveNumber++; } На сервере сделал update. Все ссылки я Вам посылал. На всякий случай одну повторю. https://www.alto-booking.com/developer/chessPieceAnimation/script/ Какие должны быть размеры клеток и картинок? Удачи!
Спасибо за инфоблок,у меня ходы внизу под доской высвечиваются.Такого узкого нифоблока мало,в ходах я записываю данные "Белые взяли пешку,белым - 3 балла" Я уже поставил свою доску с параметрами,анимация работает при первом открытии страницы,потом вот таккая ошибка с фигурами: https://кибершахматы.рф/gallery/data/ppp999.jpg На вашей ссылке то же самое Это настройки .css? Как исправить?
На этой ссылке https://www.alto-booking.com/developer/chessPieceAnimation/script/ Всё нормально, показал скриншот Размер инфоблока может быть любой только обязательно д.б id="info" Внизу доски не советую. будет не виден. Скролить страницу после каждого хода никто не будет. То, что там выдаётся, получается из PHP. Нужны ещё балы к ходу, отправляйте. Сделал update. В CSS для img убрал postion:absolute. Это свойство устанавливается в JS после клика на клетку "hod_kuda". Теперь img "взлетает" после второго клика. Однако, для реального использования всего этого необходимо в JS определять правила ходов для каждой фигуры. Известно кто и где стоит, нужно проверять куда допускается сделать ход. Вы ограничиваете время на ход? По идее таймер и прерывание игры д.б. JS Какие у Вас намеренья по респонсибилите? На какие устойства Вы делаете рабивку? Какого размера нужна доска? Очень важный вопрос - синхронизация ходов нескольких онлай-игроков без перезагрузок страниц после каждого хода
Покажите, пожалуйста, скриншот консоли браузера. Вы знаете, что браузер сохраняет в кэше JS скрипты и CSS? Когда тестируте сайта после update полезно чистить кэш.
Консоль это вот это? https://кибершахматы.рф/gallery/data/lll888-8.jpg Че там можно понять? JS там нету
Убил пешку D2-D5 https://кибершахматы.рф/gallery/data/ggg333.jpg А если я играю черными? На вариантах игры компьютера нету Если var playerPieces = "black"; Как анимировать ходы обоих? Если var playerPieces = "white"; Как анимировать ходы обоих? Итого 4 ошибки не решены
--- Добавлено --- Там наверху красный кружочек, а в нём цифра 3. Оно говорит щёлкни меня, покажу ошибки --- Добавлено ---
Спасибо,посмотрел: https://кибершахматы.рф/gallery/data/kkk999.jpg Перевожу с английского - переменные не найдены И еще,в гугл хром фигуры глючат,попробуйте убить черную пешку на поле 5: ИИ в шахматах (alto-booking.com) [[[ Спасибо за помощь,Вы очень терпеливы ]]]
Не понял почему Вы называете это ошибками. Сейчас можно открыть на двух клиентах две доски и без правил двигать фигуры, но с анимацией, что на самом деле тысячная часть работы от всего этого проекта. По сути сказанного. Одновременно один игрок и чёрными и белыми не играет. Если хочется, то можно реализовать и такое. Во всех перечиленных случаях необходимо проверять правила кто как может ходить и атакавать. Игрок выбирает белые фигуры. Противник или ИИ играет чёрными. Или наоборот. Если два игрока, то у одного на компе выводится белая доска, другого чёрная. Тот кто играет белыми может сделать первый ход. Повторный ход возможен только после получения ответного хода. Тот кто играет чёрными может сделать первый ход только после получения первого хода белых. Всё это должно организовано на стороне сервера. --- Добавлено ---
Да,я знаю логику шахмат,у меня так и спрограммировано на старых досках. Я собираюсь протестировать 2х игроков,на телефоне буду играть черными. Буду налаживать var playerPieces = "black"; var playerPieces = "white"; и хочу посмотреть как все сработает Мы одну изначальную ошибку вылечиваем уже неделю.Я не могу с места сдвинуться,пока анимация не работает Давно бы сделал и доску для черных,и переделал бы все доски на 8ми вариантах
Ошибки говорят, что JS не находит селекторов клеток доски. Даже по русски пишет. Посмотрите HTML в браузере. Даже пробовать не буду кого-то убивать. Правил ходов сейчас никак не обработываются. Можете попробовать сходить ферзём перешагнув через пешки. --- Добавлено --- Анимация не работает из-за ошибок HTML. Пришлите ссылку на Вашу страницу и я попробую разобраться. Про телефон есть большие сомнения в связи с размером экрана.
Подождите,я понял,HTML спрятан за обновлением shess_x.php Код (Javascript): <script> function show() { $.ajax({ url: "shess_x.php", cache: false, success: function(html){ $("#panec").html(html); } }); } $(document).ready(function(){ show(); setInterval('show()',1000*6); }); </script> Я сейчас переделаю всё обновление и попозже напишу
ЗАРАБОТАЛО https://кибершахматы.рф/gallery/data/sss555.jpg Я выключил обновление AJAX Включил location.reload(); Код (Javascript): <script> setTimeout(function(){ location.reload(); }, 6000); </script> Сделал ход за белых,потом за чёрных - работает Только фигуры в полете глючат,но ходят [[[ Спасибо ]]] Задача наконец то выполнена.Надеюсь на досках 10х8 и 12х8 эта анимация тоже сработает
Добрый день! Если Вы "выключили обновление AJAX и включил location.reload()", то можете убрать JS, с анимацией и вернуть, тот который был у Вас раньше. С location.reload анимация работать не будет. "Каряво", это значит не работает. Зато не нужно думать о правилах ходов в JS. Куда кликнули и кликнули вообще никто не поймёт. Значит, вопрос закрыт. Удачи! P.S. "Не следует ребёнка вместе с водой выплескивать из ванны", М. Лютер (1483–1546)
Извините,рука дрожит Анимация работает Правила на JS прописывать не надо: Теперь займусь остальными 7 вариантами
Посоветуйте метод,чтобы убрать location.reload(); и обновлять страницу ,чтобы весь сайт не мигал и сервер не перегружался location.reload(); и правда не подходит,надо другое [[[ Спасибо ]]] Поищу в интернете [ сейчас настраиваю доску варианта #1 ]
--- Добавлено --- Мало того, что мигает, но и после перезагрузки фигуры возвращаются в исходные позиции. https://www.alto-booking.com/developer/chessPieceAnimation/script//ИИ в шахматах – Mozilla Firefox 2024-01-21 10-20-01.mp4 Не ищите вчерашний день. Без AJAX не удасться обойтись.