Pers.narod.ru. JavaScript. Шахматная "ходилка" на JavaScript |
Понадобилась на одном из проектов встроенная в "движок" шахматная доска с возможностью задавать расстановки фигур, двигать шахматные фигуры по правилам и сохранять полученные позиции в одном из общепринятых форматов. Разумеется, речь не о том, чтобы реализовать на JavaScipt полноценные шахматы, но вдвоём на такой доске можно даже и поиграть.
Оказалось, велосипед изобретать не нужно, а можно воспользоваться готовым GUI от человека с ником Мистик (возможно, есть более новая ссылка на него).
Я позволил себе немного изменить его скрипт, а именно, русифицировать интерфейс и систему сообщений, приделать русскую же помощь, исправить незначительные ошибки JavaScript и неудобства, добавить к доске всплывающие подсказки с обозначениями полей и т.п.
Выглядит "ходилка" так (фигуры уже можно перетаскивать мышкой):
Все правила шахмат учитываются, так что сходить неправильно скрипт не даёт, очередность ходов также соблюдается.
Для записи позиций используется стандартная нотация Форсайта—Эдвардса, причём, можно задать позицию с помощью соответствующей кнопки формы, а текущая позиция в этой же нотации выводится под доской.
Скрипт формирует "полную" нотацию в том виде, в каком она описана в "Википедии" по ссылке выше. Часто на шахматных серверах можно скопировать из кода ссылок только расстановку фигур (то, что записано до первого пробела в строке FEN). В этом случае добавьте после расстановки хотя бы очерёдность хода - пробел и букву w (white), если ходят белые, или букву b (black) для хода чёрных. Скрипт предупредит о том, что не указана очерёдность хода, а вот остальные данные к расстановке можно не добавлять, однако, понятно, что в этом случае они будут иметь значения по умолчанию (скажем, рокировки будут считаться разрешёнными).
Например, этот код, передаваемый flash-ходилке с сервера ChessPro.Ru
javascript: lookstep('g1v0n63', '5r1k/5q1p/b2p2RQ/1p3p2/p1nPp2B/2P5/1P6/R6K')
легко перенести в нашу ходилку: нажать кнопку "Задать FEN" и вставить
5r1k/5q1p/b2p2RQ/1p3p2/p1nPp2B/2P5/1P6/R6K b
- получится итоговая позиция из необычайно красивой для современных шахмат партии Юдит Полгар - Борис Гельфанд (кубок мира-2009), которую играющий чёрными Гельфанд сдал венгерской шахматной королеве.
Код для подключения на свой сайт шахматной ходилки может быть, например, таким:
<script type="text/javascript" src="http://pers.narod.ru/jscript/chessJs/chess.js"></script> <script type="text/javascript" src="http://pers.narod.ru/jscript/chessJs/chessGui.js"></script> <script type="text/javascript"> config.pieceDir = "http://pers.narod.ru/jscript/chessJs/" + config.pieceDir; </script> <form name="chessFormId" id="chessFormId"> <div align="center"> <div id="chessDivId" style="width:328px"></div> <p><span id="chessDivIdSpan" style="color:green"></span></p> <input id="chessUndoId" type="button" value="Отменить ход"/> <input name="btnSetFen" type="button" value="Задать FEN" onclick="SetFen('chessDivId', 'chessUndoId', 'notId')"/> <p id="notId"></p> </div> </form> <script type="text/javascript"> SetDiagram("chessDivId", "rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0 1", "chessUndoId","notId"); </script>
Как видно, текущая версия скрипта также пишет обычную шахматную нотацию под доской. Чтобы она этого не делала,
не передавайте параметр notId
функциям
SetFen
и SetDiagram
.
В этом коде адрес
http://pers.narod.ru/jscript/chessJs/
можно заменить на свой URL к файлам скрипта. Но можно оставить и этот, т.к. скрипт поправленный и будет лежать здесь :)
Итак, для получения на страничке интерактивной шахматной партии, начинающейся с нужной позиции, достаточно поместить FEN-код позиции (который можно получить этим же скриптом) в качестве второго аргумента функции
SetDiagram
(вместо начальной расстановки rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0 1
) и вставить в страничку код из листинга выше.
Разумеется, если на одной странице выводится несколько партий, первые 3 тега <script> можно не дублировать и для следующих партий включать повторно код, начиная с тега <form>.
Скачать русскоязычный скрипт шахматной доски chessJs.zip с помощью и примером запуска (20 Кб)
Первая версия скрипта (без стандартной нотации, 18 Кб)
Нотация FEN в англоязычной "Википедии"
Типовые вопросы по шахматной "ходилке" |
1. Как поменять размер доски, вид фигур и т.п.?
Поменять сами картинки в папке pieces
на новые (имена картинок лучше не трогать), также поменять
настройки в переменной config
файла chessGui.js
. Например, для картинок отсюда
получаем маленькую красно-белую доску:
var config = { pieceDir: 'pieces/', pieceExt: '.png', bitmapWidth: 29, bitmapHeight: 29, fieldColorWhite: 'white', fieldColorBlack: 'red' };
2. Можно ли по-другому разместить нотацию, поменять дизайн и т.п.?
Конечно, можно, например, так:
<table border="0" cellpadding="4" cellspacing="0" align="center"><tr><td valign="top" width="200"> <p id="notId"></p> </td><td valign="top"> <form name="chessFormId" id="chessFormId"> <div align="center"> <div id="chessDivId" style="width:328px"></div> <p><span id="chessDivIdSpan" style="color:green"></span></p> <input id="chessUndoId" type="button" value="Отменить ход"/> <input name="btnSetFen" type="button" value="Задать FEN" onclick="SetFen('chessDivId', 'chessUndoId', 'notId')"/> </div> </form> <script type="text/javascript"> SetDiagram("chessDivId", "rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0 1", "chessUndoId","notId"); </script> </td></tr></table>
Здесь нотация выводится слева от доски в столбце таблицы шириной 200 пикселов. При выводе справа надо отследить, где находится код JavaScript по отношению к контейнеру notId
- если контейнер описан ниже по тексту, чем используется, в ряде браузеров это может вызвать проблему с его "опознанием" интерпретатором.
3. Почему не работает вместе с JQuery?
Когда это писалось, JQuery ещё не был так распространён. Не работает из-за конфликтующих имён. Просто замените везде в файле chessGui.js
символ $
(имя функции, которое есть и в JQuery) на другое имя, например, get_Id
, проверено, заработает. Ну или, если мне не изменяется память, в JQuery есть метод noConflict
.
В последней версии, выложенной здесь, функция уже переименована, так что проблемы совместимости с JQuery быть не должно.
гостевая; E-mail |