Понадобилась на одном из проектов встроенная в "движок" шахматная доска с возможностью задавать расстановки фигур, двигать шахматные фигуры по правилам и сохранять полученные позиции в одном из общепринятых форматов. Разумеется, речь не о том, чтобы реализовать на 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