Nickolay.info. Javascript. Javascript Drag-and-drop Chess Position Builder

В дополнение к шахматной ходилке - ещё один скрипт на близкую тему. Он умеет размещать фигуры на шахматной доске и убирать их методом "перетащил и оставил", а также генерирует стандартные коды FEN шахматных позиций и создаёт соответствующие картинки (серверным скриптом на PHP). Вот скрипт в работе:

 Открыть в текущем окне скрипт с расстановкой фигур и генерацией картинки или HTML-таблицы в Юникоде

updated! Я не хочу ничего расставлять, а вставить готовый FEN и получить большую картинку:

updated! Я не хочу ничего расставлять, а вставить готовый FEN и получить документ HTML с позицией:

Всё остальное легко узнать по ссылке "Помощь" в меню скрипта. Скрипт задуман кросс-браузерным, он должен работать во всех современных браузерах, поддерживающих в яваскрипте методы drag and drop (Internet Explorer 6 и выше, Mozilla Firefox 3 и выше, Opera 8 и выше).

Код для подключения скрипта из своего документа может быть, например, следующим: 

<script src="http://nickolay.info/jscript/ChessPositionBuilder/dragdropchess.js"></script>

<div align="center">
 <p>
 <a href="http://nickolay.info/jscript/js_dragdropchess.html">Страница скрипта</a>
 <a href="#" title="Открыть файл помощи в новом окне"
  onclick="javascript:pr=window.open('http://nickolay.info/jscript/ChessPositionBuilder/help.html','pr',
   'toolbar=no,scrollbars=yes,directories=no,status=no,menubar=yes,resizable=yes,width=600,height=300');">
  Помощь</a>
 <a href="http://nickolay.info/jscript/ChessPositionBuilder/index.html">Обновить</a> 
 <a href="#" id="dlink" target="_blank" style="display: none;">Картинка</a>
 <a href="#" id="dhtml" target="_blank" style="display: none;">HTML</a>
 <a href="#" id="dcode" onclick="javascript:getCodes();"
   style="display: none;">Коды</a>
 <p><span id="fen">8/8/8/8/8/8/8/8</span>
</div>

Естественно, текст ссылок и адреса можно поменять, но элементы dlink, dhtml, dcode, fen должны присутствовать в документе, т.к. на них есть ссылки из скрипта.

Я не стал программно выравнивать фигуры по клеткам, так жизненней, к тому же, в момент, когда Вы ставите фигуру, всё видно по подстветке ячеек :) В серверной части, естественно, всё выравнивается.

Клиентская часть и Drag-and-drop на Javascript

Верхняя часть файла dragdropchess.js (до комментария "Ниже - чисто шахматная часть") - пример компактной и функциональной реализации функционала drag-and-drop ("перетащил и оставил") на Javascript. Вырезав её в свой файл с именем, допустим, dragdrop.js и подключив скрипт из документа HTML тегом вида 

<script src="dragdrop.js"></script>

(если он лежит в текущей для основного документа папке), мы можем легко создавать на странице как перемещаемые объекты: 

<div id="dragObjects">
 <img src="img/1.gif" id="i1">
 <img src="img/2.gif" id="i2">
</div>
<script type="text/javascript">
 var dragObjects = document.getElementById('dragObjects').getElementsByTagName('img');
 for(var i=0; i<dragObjects.length; i++) {
  new DragObject(dragObjects[i]);
 }
</script>

так и "контейнеры", которые будут принимать их: 

<div id="bTable">Корзинка для объектов</div>
<script type="text/javascript">
 new DropTarget(document.getElementById('bTable'));
</script>

Контейнеры при этом можно вкладывать друг в друга, объект будет помещён в самый "внутренний" из подходящих. Именно за счёт этого в клиентском скрипте фигуры можно кидать на клетки доски и убирать в обрамляющий доску раздел "свободного места": 

<div id="freeSpaces"> //Раздел, обрамляющий доску, становится new DropTarget
 //Таблица Board[i][j] с клетками доски, каждый рисунок из 64 становится new DropTarget
</div>

Добавим, что общий размер JS-функций для реализации "перетащил и оставил" - килобайт 5 в несжатом виде, а подключения громоздких внешних библиотек вроде JQuery не требуется.

Серверная часть и генерация картинки на PHP

Маленький скрипт GenFEN на PHP, вызываемый из яваскрипта, генерирует по переданной ему параметром fen нотации картинку с шахматной позицией и позволяет создать постоянную ссылку на неё (нажмите из скрипта "Коды", чтобы увидеть HTML-код картинки). Также скрипт может сгенерировать HTML-доску с фигурами-символами Юникода.

Значение параметра fen - нотация FEN для позиции, сгенерированная яваскриптом автоматически, метод передачи GET, то есть, URL скрипта должен иметь вид 

http://url/genfen.php?fen=FEN

Скрипт требует библиотеки GDLib версии 2.0 или новее, PHP версии 4.3.1 и выше. Как проверить, подключена ли она к PHP на локальном компьютере или хостинге, написано в этой статье.

Ссылки для скачивания и настройки

Скачайте архивы .zip и разверните в новую папку на сервере.

 Скачать скрипт ChessPositionBuilder в архиве ZIP (11 Кб)

 Скачать серверный скрипт GenFEN в архиве ZIP (8 Кб)

 Вариант серверного скрипта GenFEN2 с Юникодом, PNG и большими картинками в архиве ZIP (30 Кб), примеры картинок

Для корректной работы скрипта где-то в другом месте любым тектовым редактором неформатированного текста (Блокнот Windows подойдёт) измените в файле dragdropchess.js следующие настройки: 

var IMGLink=
 "http://nickolay.info/jscript/ChessPositionBuilder/";
var FENLink=
 "http://scripts.kislenko.net/genfen/index.php?fen=";
var HTMLink =
 "http://scripts.kislenko.net/genfen/html.php?fen=";

В IMGLink вместо выделенного красным нужно вписать URL (или путь по дереву каталогов) к папке, содержащей картинки с фигурами и "пустую" картинку blank.png, этот путь завершается символом "/", в FENLink и HTMLink можно вписать другой URL к папке серверного скрипта.

Другие настройки в файле dragdropchess.js касаются цветов: 

 var fieldColorWhite='#EEEEEE'; //Цвет фона белых полей
 var fieldColorBlack='#888888'; //Цвет фона чёрных полей
 var framesColor='green'; //Цвет рамки доски
 var uponColor='#ccffcc'; //Цвет подсветки

В серверном скрипте из второго архива index.php также есть простые настройки: 

$path = "./"; 
 //Пропишите здесь путь (или URL) к картинкам шахматных фигур в формате GIF. 
 //Имена картинок стандартные для шахматных наборов. Путь завершается слешем /
$size = 29; 
 //Размер картинки с фигурой, ячейки доски и клетки на картинке

"Стандартные" для шахматных наборов имена картинок в обоих случаях предполагаются такими:
wr - белая ладья
wn - белый конь
wb - белый слон
wq - белый ферзь
wk - белый король
wp - белая пешка
br - чёрная ладья
bn - чёрный конь
bb - чёрный слон
bq - чёрный ферзь
bk - чёрный король
bp - чёрная пешка

Рейтинг@Mail.ru

вверх гостевая; E-mail