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

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

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

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

 asisChess.swf (31 Кб)

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

 Список софта для работы с 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 Кб)


теги: шахматы вебдезигн сервер игра сервис flash

09.10.2014, 13:15; рейтинг: 14773