Vladimir Kheifets, Прошло 8 лет,я решил рискнуть...И впервые попросить Можете на примере 4х клеток написать Drag & Drop ?? Код (Text): <? $x=$x+'1'; ?> <div class="cell dark" id="E1" style="background-color:<? echo $color_b[$x]; ?>"><img src="<?echo $arImages[$sh[60]]?>" <? echo 'width='.$width; echo 'height='.$height; ?>></div> <? $x=$x+'1'; ?> <div class="cell" id="F1" style="background-color:<? echo $color_b[$x]; ?>"><img src="<?echo $arImages[$sh[61]]?>" <? echo 'width='.$width; echo 'height='.$height; ?>></div> <? $x=$x+'1'; ?> <div class="cell dark" id="G1" style="background-color:<? echo $color_b[$x]; ?>"><img src="<?echo $arImages[$sh[62]]?>" <? echo 'width='.$width; echo 'height='.$height; ?>></div> <? $x=$x+'1'; ?> <div class="cell" id="H1" style="background-color:<? echo $color_b[$x]; ?>"><img src="<?echo $arImages[$sh[63]]?>" <? echo 'width='.$width; echo 'height='.$height; ?>></div> У меня все доски работают,но я давно думаю переделать "анимацию" доски Если не поможете - ниче страшного Я никогда не писал функции на JS,мне этот язык всегда был не интересен [[[-- А если платно - то какая цена у такого скрипта?? --]]]
Добрый день! Проблема в том, что необходимо на JS определить правила ходов, т.к. нужно проверять на какую клетку может пойти каждая фигура. Сейчас у Вас после каждого хода полностью перезагружается доска и всю логика игры в РНР. На сайте https://www.chess.com нет Drag & Drop на JS анимирован выбор фигуры и ход, но конём как пешкой сходить запрещают. Может быть такой анимации Вам достаточно? Вы уверены, что готовы перетаскивать из PHP логику анализа ходов в обработчик на JS? Я мог бы Вам помочь с JS, подвигать с анимацией фигуры, но я не в теме компьютеных шахмат. Удачи!
На странице https://www.codepel.com много полезного. Нашёл шахматы на HTML5, JS, CSS https://www.codepel.com/html5-games/javascript-chess-game-source-code/ https://www.codepel.com/demo/javascript-chess-game-source-code/ Может Вам пригодится. Удачи!
Привет Я перевел запасной сайт на PHP 8.2, почти вся работа сделана Вставил туда Вам код JS - фигура реально тут же прыгает Но не записывается ход: Код (Text): document.cookie = "hod_shto1=" + hod_ot; document.cookie = "hod_kuda1=" + hod_to; Ваш код JS я понимаю на 46%,я этот язык не учил Посмотреть как фигура прыгает по dbclick можно здесь ИИ в шахматах (chess-rmx.net) Слева в углу вывел "Ход откуда" и "Ход куда" - не считывается
Добрый день.Вы пишите что можете помочь.Помогите Корректность ходов на JS мне добавлять не надо Мне давали в 2016 году для ходов такой код: Код (Text): <script language="JavaScript"> chess = { moveIt:false, moveTo:false }; chess.init = function(){ $('.cell').click(chess.onClick); }; chess.onMove = function(data){ // проверяем инфу полученую отскрипта - можно ли двигать // если можем - двигаем chess.moveTo.html(chess.moveIt.html()); chess.moveIt.html(''); chess.moveIt.removeClass('selected'); chess.moveIt=false; chess.moveTo=false; }; chess.onClick=function(e){ e.preventDefault(); e.stopPropagation(); var cell = $(this); if (chess.moveIt===false){ // еще не выбрана фигура для перемещения cell.addClass('selected'); chess.moveIt = cell; }else{ // если выбрана фигура if(cell.html()==='<img src="picture/kletka-0.png" width="46height=46">' | cell.html()>''){ // var hod_shto = document.cookie; var shto=chess.moveIt.attr('id'); document.cookie = "hod_shto=" + shto; // var hod_kuda = document.cookie; var kuda=cell.attr('id'); document.cookie = "hod_kuda=" + kuda; // если новая клетка пустая значит можно двигать отправляем запрос // отправку закоментировал, т.к. показыва функционал только на клиенте // $.ajax({ // url:<скрипт_принимающий_информацию_о_ходе>, // data:{from:chess.moveIt.attr('id'),to:cell.moveIt.attr('id')}, //передали в скрипт ячейки // dataType:'json', // формат в котором будут возвращены // //данные от скрипта. json будет удобнее в данном случае // success:chess.onMove // обработка данных поступивших от php скрипта // }); chess.moveTo=cell; // можно либо так, либо в $.ajax передать в качестве значения // параметра context, но поменять под это принимающую ф-ию // chess.onMove(); // эта строка не нужна если раскоментироватьблок выше // просто эмулирую что получен положительный ответ } else if(cell.attr('id')===chess.moveIt.attr('id')){ //выбрана та же кетка - снимаем выделение cell.removeClass('selected'); chess.moveIt = false; } else { // выбрана другая фигура // chess.moveIt.removeClass('selected'); // chess.moveIt = false; // cell.addClass('selected'); // chess.moveIt = cell; }; }; return false; }; $(document).ready(function(){ chess.init(); }); </script> Я в этом коде не разбирался,просто вывел координаты хода,работает и ладно Клетки прописаны на <div>: Код (Text): <div class="cell dark" id="A8" style="background-color:<? echo $color_b[$x]; ?>"><img src="<?echo $arImages[$sh[20]]?>" <? echo 'width='.$width; echo 'height='.$height; ?>></div> <? $x=$x+'1'; ?> <div class="cell" id="B8" style="background-color:<? echo $color_b[$x]; ?>"><img src="<?echo $arImages[$sh[21]]?>" <? echo 'width='.$width; echo 'height='.$height; ?>></div> <? $x=$x+'1'; ?> <div class="cell dark" id="C8" style="background-color:<? echo $color_b[$x]; ?>"><img src="<?echo $arImages[$sh[22]]?>" <? echo 'width='.$width; echo 'height='.$height; ?>></div> <? $x=$x+'1'; ?> <div class="cell" id="D8" style="background-color:<? echo $color_b[$x]; ?>"><img src="<?echo $arImages[$sh[23]]?>" <? echo 'width='.$width; echo 'height='.$height; ?>></div> Мне нужна помощь,переделать эту "никакую" анимацию доски [[[ Спасибо ]]]
Вы видели Вчера, в 12:45 моё сообщение? Нашёл шахматы с анимацией на HTML5, JS, CSS https://www.codepel.com/html5-games/javascript-chess-game-source-code/ https://www.codepel.com/demo/javascript-chess-game-source-code/
Посмотрел по 2 раза,это программа "ниочем",у меня программа намного мощнее [[[ Сейчас у меня "лёг" хостинг - 7 часов не доступны сайты и файловый менеджер ]]]
Мне не понравилось на PHP 8.2 - сайт долго загружается ,ощущается что php слишком тяжелый Код оставил на месте,а php на хостинге откатал обратно на 5.2 - сайт стал летать
У меня получилось перейти на PHP 8.2 - но отказал JS полностью ...Обновление доски не работало,ход фигурой не работало Помучился 4 дня и в итоге откатал весь код на старое состояние PHP 5.2 Посоветуйте что нибудь,что делать.Создал 2 темы в разделе JS - там не помогают
В том демо нормальный пользовательский интерфейс для игры на javascript. И подсказки по возможностям хода. У вас этого нет
Добрый день! Как обещал сделал анимацию ходов на JS и CSS Работает так: по клику по фигуре она поддергивается типа очень хочет ходить, по клику на клетку куда фигура плавно перелетает в эту клетку. Правила ходов не обработываются. Пока только анимация ходов. Затем информация о ходе: клета откуда, клета куда, название фигуры (выбирается из img src ) отправляется через XMLHttpRequest (GET Request , Response type JSON) на url: processing.php В processing.php обрабатывается GET Request и возвращается в JS JSON Response без перезагрузки страницы. В JS JSON Response декодируется в объект и из него выбирается информация о ответном ходе, полученная из processing.php (PHP 8.2) В PHP пока, для демонстрации ответного хода, рандомно выбираются колонки полей. PHP: <? //Обработчик AJAX Request $hod_shto1 = $_GET["hod_shto1"]; $hod_kuda1 = $_GET["hod_kuda1"]; $hod_piece = $_GET["hod_piece"]; /* здесь ИИ должен реагировать на ход игрока и делать свой следущий ход. За неимение ИИ для тестa присвоены случайные столбцы от "A" до "H" */ $letters = range("A","H"); $ind = random_int(0, 7); $col = $letters[random_int(0, 7)]; $hod_shto2 = $col."7"; $hod_kuda2 = $col."5"; $out = [ "hod_shto1" => $hod_shto1, "hod_kuda1" => $hod_kuda1, "hod_piece" => $hod_piece, "hod_shto2" => $hod_shto2, "hod_kuda2" => $hod_kuda2 ]; //Отправляем JSON Response header('Content-Type: application/json; charset=utf-8'); echo json_encode($out); ?> Демо: https://www.alto-booking.com/developer/chessPieceAnimation/script Коды: https://www.alto-booking.com/developer/chessPieceAnimation/script/chess.zip К сожалению, быстрее не смог. Удачи!
Здрасьте Все сработало,фигуры медленно летают.Вы большой талант в программировании.Премного благодарен. Я налаживал доску,в такой вид: Код (Text): <tr><td class=" " bgcolor=#505050 width=20 height=58>8</td> <td class="cell" bgcolor=#707070 id=A8 ><img src="../<? echo $arImages[$fexo[$s+1]]; ?>"/></td><? $s=$s+'1'; ?> <td class="cell dark" bgcolor=#505050 id=B8 ><img src="../<? echo $arImages[$fexo[$s+1]]; ?>"/></td><? $s=$s+'1'; ?> <td class="cell" bgcolor=#707070 id=C8 ><img src="../<? echo $arImages[$fexo[$s+1]]; ?>"/> </td><? $s=$s+'1'; ?> <td class="cell dark" bgcolor=#505050 id=D8 ><img src="../<? echo $arImages[$fexo[$s+1]]; ?>"/></td><? $s=$s+'1'; ?> <td class="cell" bgcolor=#707070 id=E8 ><img src="../<? echo $arImages[$fexo[$s+1]]; ?>"/></td><? $s=$s+'1'; ?>> <td class="cell dark" bgcolor=#505050 id=F8 ><img src="../<? echo $arImages[$fexo[$s+1]]; ?>"/></td><? $s=$s+'1'; ?> <td class="cell" bgcolor=#707070 id=G8 ><img src="../<? echo $arImages[$fexo[$s+1]]; ?>"/></td><? $s=$s+'1'; ?> <td class="cell dark" bgcolor=#505050 id=H8 ><img src="../<? echo $arImages[$fexo[$s+1]]; ?>"/></td><? $s=$s+'1'; ?></tr> Фигуры ведь перерисовывать надо со сменой позиции Вот та программа с игрой компьютера,ваша анимация работает: https://xn--80aabqnls4av1a5a5b.xn--p1ai/studiere/dosa.php На основном сайте 8 вариантов шахмат написаны через <div id=A1> ,я там хотел бы тоже сделать анимацию Занимаюсь по уроку JS ,вот что получилось: https://chess-rmx.net/variant2/doska_js.php В общем доска на ИИ была сделана на PHP я догнал,что JS не работает через echo Теперь доска сделана через html Прогресс не стоит на месте,все развивается На сайте "Кибершахмат" сделал входную страницу и опцию "Сменить логин"
Добрый день! По поводу HTML. Советую Вам не перегружать код атрибутами bgcolor=#707070, bgcolor=#505050 Лучше их убрать из тэгов и определить в CSS Код (CSS): :root{ --color-dark: #505050; --color-light: #707070; --cell-size: 52px; } .dark, .light{ height: var(--cell-size); width: var(--cell-size); } .dark{ background-color: var(--color-dark); } .light{ background-color:var(--color-light); } и затем в HTML тэгах td убрать bgcolor и заменить class="cell" на class="light" и class="cell dark" на class="dark" Вы ошибаетесь, что "JS не работает через echo". JS код не исполняется на стороне сервера. РНР генерирует HTML код и отправляет его в браузер клиента. Поэтому в РНР через echo можно вставляться JS, CSS и любые тэги, например, Код (PHP): <? ..... echo <<<HTML <script> var a="$a"; </script> HTML; ?> <!-- или так --> <? echo "<script>"; ?> var a="<?=$a?>"; </script> Честно говоря, не здорово выглядит переворачивание доски поле перезагрузки страницы (после каждого хода).
Убрал #707070 и #505050 - в текстовом редакторе махом все заменил Переворачивание доски запросто могу отменить Это написано if($storona=='1') { //показываем для белых } if($storona=='2') { //показываем для черных } Игра ИИ это эксперимент,там компьютер играет слабо Я пытался анимацию поставить на доску с <div id=A1> , не сработало Было бы прекрасно на всех 8 вариантах сделать drag&drop В одной строчке указано td я поменял на div: cells = document.querySelectorAll(".сhess-board div[id]"); Не прокатило Сделал <div class="chess-board">
Изменил HTML так HTML: <body> <div class="сhess-board"> <div id=A8 > <img src="../picture/tura_black.png"/> </div> <div id=B8 > <img src="../picture/kon_black.png"/> </div> <div id=C8 > <img src="../picture/slon_black.png"/> </div> </div> изменил в JS Код (Javascript): window.addEventListener("load", (event) => { cells = document.querySelectorAll(".сhess-board div[id]"); cellsPosition = {}; for (var i = 0; i <cells.length; i++) { cells[i].addEventListener("click",function(){fe(this);}); id = cells[i].id; pos = cells[i].getBoundingClientRect(); T = parseInt(pos.y) + 3; L = parseInt(pos.x) + 3; cellsPosition[id] = [T, L]; if(cells[i].innerHTML.includes("img")) setStyle(cells[i], getPosProp(T, L), 1); } console.log(cellsPosition); }); Здесь определются top и left для каждой клетки и запиписываются в объект cellsPosition и для каждого дочернего элемент img присаиваются свойства top и left клетки. добавил console.log(cellsPosition) посмотрите и можете убрать. Выдаёт Код (Javascript): Object { A8: (2) […], B8: (2) […], C8: (2) […] } A8: Array [ 29, 11 ] B8: Array [ 53, 11 ] C8: Array [ 77, 11 ] <prototype>: Object { … } Всё работает без проблем. Нужно проверять Ваш HTML. В дереве DOM нарyшена cтруктура parent -> children
Чтобы подсвечивать ходы такая каша получилась Вроде бы умно,а вроде бы слишком длинно: Код (Text): <? if($color_b[$s]!='#404040') { $d='cell'; } else $d=''; $col='bgcolor="'.$color_b[$s].'"'; ?><td class="<? echo $d; ?>" <? echo $col; ?> id=A8 ><img src="../<? echo $arImages[$fexo[$s+1]]; ?>"/></td><? $s=$s+'1'; ?> <? if($color_b[$s]!='#404040') { $d='cell dark'; } else $d=''; $col='bgcolor="'.$color_b[$s].'"'; ?><td class="<? echo $d; ?>" <? echo $col; ?> id=B8 ><img src="../<? echo $arImages[$fexo[$s+1]]; ?>"/></td><? $s=$s+'1'; ?> <? if($color_b[$s]!='#404040') { $d='cell'; } else $d=''; $col='bgcolor="'.$color_b[$s].'"'; ?><td class="<? echo $d; ?>" <? echo $col; ?> id=C8 ><img src="../<? echo $arImages[$fexo[$s+1]]; ?>"/> </td><? $s=$s+'1'; ?> <? if($color_b[$s]!='#404040') { $d='cell dark'; } else $d=''; $col='bgcolor="'.$color_b[$s].'"'; ?><td class="<? echo $d; ?>" <? echo $col; ?> id=D8 ><img src="../<? echo $arImages[$fexo[$s+1]]; ?>"/></td><? $s=$s+'1'; ?> <? if($color_b[$s]!='#404040') { $d='cell'; } else $d=''; $col='bgcolor="'.$color_b[$s].'"'; ?><td class="<? echo $d; ?>" <? echo $col; ?> id=E8 ><img src="../<? echo $arImages[$fexo[$s+1]]; ?>"/></td><? $s=$s+'1'; ?>> <? if($color_b[$s]!='#404040') { $d='cell dark'; } else $d=''; $col='bgcolor="'.$color_b[$s].'"'; ?><td class="<? echo $d; ?>" <? echo $col; ?> id=F8 ><img src="../<? echo $arImages[$fexo[$s+1]]; ?>"/></td><? $s=$s+'1'; ?> <? if($color_b[$s]!='#404040') { $d='cell'; } else $d=''; $col='bgcolor="'.$color_b[$s].'"'; ?><td class="<? echo $d; ?>" <? echo $col; ?> id=G8 ><img src="../<? echo $arImages[$fexo[$s+1]]; ?>"/></td><? $s=$s+'1'; ?> <? if($color_b[$s]!='#404040') { $d='cell dark'; } else $d=''; $col='bgcolor="'.$color_b[$s].'"'; ?><td class="<? echo $d; ?>" <? echo $col; ?> id=H8 ><img src="../<? echo $arImages[$fexo[$s+1]]; ?>"/></td><? $s=$s+'1'; ?></tr> Укороченный код доски есть,но на нем не работает анимация(
Дополнение. Не уложился в time-out Отдельная тема переворачивание досок. Предложение. HTML доски статичиские. Нужно заготовить два варианта для игрока белыми и игрока черными и записать их файлах на сервере. Когда игрок заходит на сайт, наверное должна быть авторизация и выбор парнера - ИИ или другой игрок, если таковой есть. Затем выбор белыми и черными. Затем на сервере генерируется HTML и в него встраиваетс HTML код доски, считанный из файла. Далeе всё, что касается ходов игрока обрабатыается JS. Я сделал функуию denyClicks. Сейчас она блокирует пустой ход, клик по фигурам противника. В неё необходимо добавить проверку правил ходов. При отправке HTML в бразер необходимо в JS определить перменные: имя игрока, и его цвет - черными или белыми он играет. После каждого хода игрока, ход противника должен получатьcя из AJAX Response и ходы противника должны отображаться на доске функцией movePiece. Очевидно, что для каждого игрока должна заводится SESSION. Если не понятно объяснил, спрашивайте. Может и знатоки что-то посоветуют. Удачи! --- Добавлено --- Простите, не понял. Вы написали, что доску переделали на дивах. Что имеется ввиду под подветкой ходов? Если это подсказка правил ходов, то это должно быть как всех у кого есть анимация т.е. JS Между прочим в chess.com просто блокируется клики без подсказок.
Понимаете,у меня 2 программы...Одна отдельная программа это игра с ИИ И еще основной сайт https://кибершахматы.рф Игрой ИИ можно не заниматься,это тестовый эксперимент,эту опцию ваще можно удалить А на основном сайте совсем другая доска и другой код JS На "кибершахматах" доски на 8 вариантах написаны на <div id=A!> Вы там не увидите исходник,код прячется за shess.php,я создавал 2 темы чтобы помогли и переделали JS Я ваще не знаю JS,у меня в шахматах ни одной функции ,оператор function() нигде не использовал Все опции написаны на IF ELSE ,это мое любимое Вы большой профессионал,я вас ценю,Вы первый человек за 8 лет кто реально помог Например на варианте #2 начните новую игру,там нет никакой анимации,и JS не работает на PHP 8.2 Меня немного совесть мучает,что сайт написан на PHP 5.2 ПОДСВЕТКА: Сделайте ход E2-E4 ход подсвечивается цветом #404040 ИИ в шахматах (xn--80aabqnls4av1a5a5b.xn--p1ai)
Простите, не понял. Вы написали, что доску переделали на дивах. Что имеется ввиду под подветкой ходов? Если это подсказка правил ходов, то это должно как всех у кого есть анимация т.е. JS Между прочим в chess.com просто блокируется клики без по
Подсветка ходов: Допустим я хожу E2-E4 ,это ход с 53 клетки на 37 клетку.Записываю в файл 2 строчки 53 и 37,и потом эти клетки высвечиваю цветом #404040 Код (Text): <? if($color_b[$s]!='#404040') { $d='cell'; } else $d=''; $col='bgcolor="'.$color_b[$s].'"'; ?><td class="<? echo $d; ?>" <? echo $col; ?> id=A8 ><img src="../<? echo $arImages[$fexo[$s+1]]; ?>"/></td><? $s=$s+'1'; ?> У меня 2 доски на сайте,одна доска на ИИ написана на <table<tr><td> На основном сайте на 8 вариантах доска написана на <div id=A1> Мне надо сделать анимацию на <div id A1> Я ваш код JS пытался переделать с td на div - у меня не сработало Вот здесь сделайте 1 ход - работатет ваша анимация и подсветка ИИ в шахматах (xn--80aabqnls4av1a5a5b.xn--p1ai) [[[ Сейчас у меня другая временная идея: Написать анкеты и профили на сайте,пока думаю ]]]
Добрый день! Переделал полностью разбивку. Tеперь grid и div. Написал утилиту ChessboardMaster, котoрая создаёт и записывает на сервере два html файла для игроков белыми и чёрными фигурам. Вызывается один раз. Перед вызовом нужно изменить файл ChessboardConfig PHP: <? //$patch = "../picture/"; $patch = "https://%D0%BA%D0%B8%D0%B1%D0%B5%D1%80%D1%88%D0%B0%D1%85%D0%BC%D0%B0%D1%82%D1%8B.%D1%80%D1%84/picture/"; $ext = ".png"; ?> CSS и JS выделил в отдельные файлы. Demo1: https://www.alto-booking.com/developer/chessPieceAnimation/script/ChessboardMaster.php Create chessbord and save in files: whitePayerChessBord.html blackPayerChessBord.html Demo2: https://www.alto-booking.com/developer/chessPieceAnimation/script $_SESSION["playerPieces"] --> "white" or "black" default "white" Коды: https://www.alto-booking.com/developer/chessPieceAnimation/script/chess.zip
Запустил на сайте папку chess - работает Подсключил Chessboard.js и Chessboard.css к своему варианту #2 - не работает От файла .css зависит анимация?? Понимаю Ваш JS на 45% ,но этот язык не знаю Провозился 1 час,не настроил.Еще вернусь к этому вопросу,может сработает Я не представляю где ошибка.Или моя доска не совпадает под JS или от файла стиля зависит Надо наладить