Шахматы: делаем онлайн-просмотр партий для своего сайта

В предыдущей заметке на шахматную тему я упоминал о том, что распознать шахматную диаграмму именно как шахматную диаграмму - задача не из простых. Но если партия уже записана у вас в электронном виде, например, в очень широко распространённом формате PGN, то задача получения "живой" игры, которую можно прокрутить и отследить по ходам, становится очень простой и не потребует от вас знания программирования (разве что, базовых навыков вебмастера или блогера).

Изобретать велосипед не нужно, достаточно воспользоваться прекрасным сайтом pgn4web.casaschi.net и перейти на нём к разделу board generator (прямая ссылка)

Теперь сделать интерактивную шахматную партию на основе файла PGN очень легко.

Найти на странице зеленоватое окно под заголовком chess games notation in PGN format, вставить в это окно код "поганца" PGN, например, вот мой недавний шыдевр (не мой, конечно, классика, просто соперник был куда "мастеровитей" меня):

[Event "Chess party"]
[Site ""]
[Date "2014.10.04"]
[Round "1"]
[White "PerS"]
[Black "Player 2"]
[Result "1-0"]

1. e2e4 c7c6 2. d2d4 d7d5 3. Nb1c3 d5xe4 4. Nc3xe4 Nb8d7 5. Qd1e2 Ng8f6 
6. Ne4d6#  1-0

К сожалению, русские комментарии в фигурных скобках { ... } скрипт не поймёт, даже если они будут в кодировке Юникод (UTF-8), а вот вьюер покажет их нормально.

Потом пройдитесь по остальным настройкам, ставя опции так, как удобно. Минимально достаточно вот что:

• выставить в списке templates подходящий шаблон вида доски и фигур;
• выбрать в секции game replay options настройку autoplay games = none (чтобы сам собой не играл);
• подрегулировать высоту окна с игрой (web page options, iFrame height, написаны рекомендуемые минимальное и максимальное значения);
• нажать кнопку "generate HTML codes and update preview".

Вы увидите, что получилось и код для вставки на сайт или в блог в теге <iframe>.

Можно просто щёлкать ходы под доской и наслаждаться :) Конечно, следует понимать, что работа партии зависит от доступности сайта, на котором вы получили такой прекрасный код :)

На этом же сайте есть ещё как минимум 2 полезных возможности:

• ссылка games viewer позволяет смотреть файлы PGN, загруженные с вашего компьютера, полученные с удалённого URL-адреса или просто вставленные в многострочное поле на странице (сделав одно из этих трёх действий, нажмите соответствующую кнопку в форме ввода);
• ссылка downloads позволяет загрузить шахматные плагины для WordPress, Joomla и MediaWiki, а также исходники сайта (не все, например, php-части в скачанном не будет). На всякий случай делаю себе копию версии 2.87.

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

Ещё онлайн-просмотр PGN:

• от Ingram Braun;
• от Caissa (на 1 файл через текстовое поле);
• от шахфедерации РФ (кривой);
• от chess.com (загрузка через текстовое поле, но, наконец, есть FEN текущей позиции);
• онлайн-анализ от сайта lichess.org с FEN и загрузкой PGN через текстовое поле;
• от chesstempo.com (с загрузкой PGN)

Онлайн-игра на флеше в тему

 asisChess.swf (31 Кб)

Старая, но не устаревшая flash-программка asisChess для игры в шахматы онлайн. Кнопки под доской:
THINK NOW! - компьютер сходит за вас :)
FLIP VIEW - повернуть доску на 180 градусов
EASY/MEDIUM/HARD - уровень сложности, выбирается перед игрой;
NEW GAME - наверное, понятно :)

P.S. С некоторых пор флеш-приложения в браузерах просто так не запускаются, но можно попробовать включить плагин и разрешить это, например, нажав правой кнопкой мыши на неактивной области игры.

 Список софта для работы с PGN

Как встроить шахматный плеер от Chesstempo или разместить скрипт Chesstempo у себя на сайте

Ответ на первый вопрос даёт сам ресурс, всё просто и удобно, потому что обычно от PGN-вьюера хочется следующего:

• Плеер, работающий с любого хода, а не только с первого;
• Несколько партий/досок одним кодом;
• Комментарии/аннотация партии без проблем с кодировкой русской Windows или Юникодом;
• Чтение как загруженного файла, так и PGN-кода из строки;
• Человеческое перемещение фигур и т.д.;

Совсем немного файлов понадобится и если установить ChessTempo на свой сервер. На локальном хосте localhost мне пришлось, правда, сделать пару замен:

• в файле pgnviewer.js заменить

  boardImagePath="http://chesstempo.com"

  на

  boardImagePath="http://вашхост.net/chesstempo"

  так как скрипт я поместил в папку с именем chesstempo внутри корневой папки хоста.

• в этом же файле

  soundPath:"/sounds"

  заменил на

  soundPath:"/chesstempo/sounds"

  чтобы положить звуки в папку внутри папки chesstempo, а не уровнем выше.

Вот компактный архив chesstempo, настроенный на размещение по URL http://localhost/chesstempo/ . В нём не гарантируется работа плеера со всеми настройками оригинала.

 Скачать скрипт chesstempo для локального хоста, архив .zip (143 Кб)

09.10.2014, 13:15 [19559 просмотров]