Шахматы: делаем онлайн-просмотр партий для своего сайта
В предыдущей заметке на шахматную тему я упоминал о том, что распознать шахматную диаграмму именно как шахматную диаграмму - задача не из простых. Но если партия уже записана у вас в электронном виде, например, в очень широко распространённом формате 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. С некоторых пор флеш-приложения в браузерах просто так не запускаются, но можно попробовать включить плагин и разрешить это, например, нажав правой кнопкой мыши на неактивной области игры.
Как встроить шахматный плеер от 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 [19898 просмотров]