^updated! Показанная ниже ходилка разрабатывалась в 2009-10 гг, с тех пор и прогресс, и Javascript шагнули далеко вперёд :) Новая ходилка, основанная на библиотеках chess.js и chessboard.js, доступна в этой заметке блога, а старая, увы, больше обновляться не будет.

^updated! Хочу делать это на большой доске, как на Личессе, и с записью партии в PGN!

Другие версии скрипта можно получить здесь:

 Версия с записью партии в формате PGN и фигурами 36x36px (страница версии в блоге)

 Версия с "золотой" доской и маленькими фигурами 29x29px

Понадобилась на одном из проектов встроенная в "движок" шахматная доска с возможностью задавать расстановки фигур, двигать шахматные фигуры по правилам и сохранять полученные позиции в одном из общепринятых форматов. Разумеется, речь не о том, чтобы реализовать на JavaScipt полноценные шахматы, но вдвоём на такой доске можно даже и поиграть.

Оказалось, велосипед изобретать не нужно, а можно воспользоваться частично готовым GUI от человека с ником Мистик (возможно, есть более новая ссылка на него).

Я позволил себе немного изменить его скрипт, а именно, русифицировать интерфейс и систему сообщений, приделать русскую же помощь, исправить незначительные ошибки JavaScript и неудобства, добавить к доске всплывающие подсказки с обозначениями полей и т.п.

Выглядит "ходилка" так (фигуры уже можно перетаскивать мышкой):

Все правила шахмат учитываются, так что сходить неправильно скрипт не даёт, очередность ходов также соблюдается.

Для записи позиций используется стандартная нотация Форсайта—Эдвардса, причём, можно задать позицию с помощью соответствующей кнопки формы, а текущая позиция в этой же нотации выводится под доской.

Скрипт формирует "полную" нотацию в том виде, в каком она описана в "Википедии" по ссылке выше. Часто на шахматных серверах можно скопировать из кода ссылок только расстановку фигур (то, что записано до первого пробела в строке FEN). В этом случае добавьте после расстановки хотя бы очерёдность хода - пробел и букву w (white), если ходят белые, или букву b (black) для хода чёрных. Скрипт предупредит о том, что не указана очерёдность хода, а вот остальные данные к расстановке можно не добавлять, однако, понятно, что в этом случае они будут иметь значения по умолчанию (скажем, рокировки будут считаться разрешёнными; если их нужно отключить и нет взятия на проходе, добавьте строку w - - 0 1).

Например, этот код, передаваемый 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://nickolay.info/jscript/chessJs/chess.js"></script>
<script type="text/javascript" src="http://nickolay.info/jscript/chessJs/chessGui.js"></script>
<script type="text/javascript">
 config.pieceDir = "http://nickolay.info/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://nickolay.info/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'
};

Возможно, при этом придётся поменять явно заданную ширину раздела, в который помещается шахматная доска:

<div id="chessDivId" style="width:232px"></div>

вместо

<div id="chessDivId" style="width:328px"></div>

в коде вызова скрипта (29*8=232, а 41*8=328 при прежних размерах картинок).

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 быть не должно.

4. Скачал, развернул, запустил, вижу только "чёрные квадратики" вместо букв в нотации?

Укажите на странице с кодами скрипта кодировку Windows-1251 мета-тегом

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

или перекодируйте файлы скрипта в нужную вам кодировку, например, в Юникод.

5. Не получилось подключить несколько досок на одну страницу, вывод "перепутывается"?

Коды разделов для разных досок должны быть разными. Посмотрите, например, в исходник вот этого примера, здесь успешно работают две разных партии на одной странице. Фича, которую поленился исправить - элемент для вывода FEN должен называться так же, как раздел для доски с допиской 'Span' в конце, например, chessDivId2 и chessDivId2Span.

6. В Internet Explorer не увидел фона полей под картинками?

Где берёте такие браузеры? :) IE6 ещё не умел показывать png с прозрачным фоном. Конвертируйте любым редактором все файлы png из папки pieces в формат gif и поменяйте переменную config в файле chessGui.js:

var config =
{
  pieceDir: 'pieces/',
  pieceExt: '.gif',

Вот архив с готовыми картинками в gif с прозрачным фоном: pieces_gif.zip, 7 Кб.

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