БлогNot. Делаем онлайн-решалку шахматных задач

Fvt помощь ¿ поиск ≡ статистика ⌂ домой

Делаем онлайн-решалку шахматных задач

Ещё относительно недавно я ленился переделать "шахматную ходилку" так, чтобы она могла помочь решать шахматные задачи. Сегодня, благодаря готовому продукту chessboard.js и ещё паре известных решений, таких как JQuery и JSON, можно сделать у себя на сайте такую решалку за 5 минут. Ну или не на сайте, а просто, "чтоб была".

Для удобства скидаем все нужные яваскрипты в папку js, стили - в папку css, картинки - в img. Я поменял в коде chessboard.js какой-то бывший там длинный и неудобный путь к картинкам на 

cfg.pieceTheme = 'img/{piece}.png';

(строка 445). Ну и сами картинки выкачал.

Всё, что понадобится для запуска системы - подключить скрипты и стили из обычного файла HTML (или PHP), скажем, так:

<link rel="stylesheet" type="text/css" href="css/style.css" media="screen" />
<link rel="stylesheet" href="css/chessboard.css" />
<link rel="stylesheet" href="css/puzzle.css" />
<script src="js/json3.js"></script>
<script src="js/jquery.js"></script>
<script src="js/jquery-ui.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/chessboard.js"></script>
<script src="js/chess.js"></script>
<script src="js/puzzle.js"></script>

(можно разместить всё это в теге <head> документа), ну и

<div id="container">
 <div id="title" style="font-weight:bold;"></div>
 <div id="board" style="width: 400px"></div>
 <div id="msg" style="font-weight:bold; color:#CD5C5C;"></div>
</div>

<script src="puzzles.js"></script>
<noscript>Извините, для работы приложения нужен включённый JavaScript</noscript>

(где хотите). Скрипты, правда, занимают почти мегабайт, но, по нынешним временам, это мелочь.

Не гарантирую, что не будет каких-нибудь мелких предупреждений в консоли Javascript, например, сообщений от JQuery об отсутствующем файле чего-нибудь :)

Теперь засуньте свои задачи в файл puzzles.js следующего формата:

var puzzles = [
    {
        date: '04/23/15',
        balP: '3',
        balM: '8',
        title: 'Мат в 2 хода - Ход белых',
        start: '1Q6/8/8/8/8/k2K4/8/8 w - - 0 1',
        moves: [
            'd3-c3',
            'a3-a4',
            'b8-b4'
        ]
    },
    {
        date: '04/23/15',
        balP: '1',
        balM: '10',
        title: 'Мат в 1 ход - Ход белых',
        start: '3q1rk1/5pbp/5Qp1/8/8/2B5/5PPP/6K1 w - - 0 1',
        moves: [
            'f6-g7'
        ]
    }
];

Файл расположен, как видно из HTML-кода, в той же папке, что файл HTML. В файле, лежащем в архиве, задач намного больше.

  • date - дата составления задачи;
  • balP, balM - это баллы "+" и "-" за решение, раскомментарьте в js/puzzle.js строки 41 и 56 и впишите там URL скрипта, который будет накапливать статистику... если, конечно, хотите таковой завести;
  • title - заголовок;
  • start - начальная позиция в нотации FEN;
  • moves - решение.

Можно скачать всё сразу, развернуть архив, не создавая новой папки, и запустить файл puzzle.html, должно работать на локальном компьютере.

Конечно, в очень старых браузерах, вроде IE8, работать не будет, как и используемые библиотеки.

Кодировка обоих файлов с кириллицей - Windows-1251, а не Юникод, но не должно быть проблем и после перекодирования в Юникод, так как все остальные библиотеки чисто англоязычные.

Скриншот приложения из "Хрома":

решаем шахматные задачи прямо в браузере
решаем шахматные задачи прямо в браузере

У кого есть интересные задачи - буду рад их увидеть.

При составлении задач имейте в виду следующее:

  • кто ходит первым - определяется из нотации FEN (свойство start): значение w после описания положений фигур - белые, b - чёрные;
  • ходы в массиве moves - только поле "отправления" и поле назначения, с тире между ними: 'e2-e4';
  • ходы в массиве moves записываются с чередованием ходов белых и чёрных, ходы за соперника компьютер делает сам;
  • избегайте неоднозначностей при решении задач, теоретически можно было бы сделать moves массивом массивов и предусмотреть варианты ходов, но хлопотно (см. js/puzzle.js);
  • избегайте пата, после этого придётся обновлять документ, так как отмены ходов в этой версии нет; если предусмотрено превращение пешки - превращайте в ферзя, в коде js/puzzle.js стоит указание promotion: 'q' - это вроде поправил, можно превращать, превращения белых - строчными буквами

 Скачать решалку шахматных задач, работающую онлайн и оффлайн в браузере, архив .zip (275 Кб)

 Более новая сборка для PHP 7, MySQLi и кодировки Юникода utf-8, архив .zip с папкой внутри (274 Кб)

 Эта решалка в работе онлайн

 poschess.gixx.ru - задачи, игра по переписке, общение

 Ещё одна решалка задач онлайн

23.04.2015, 13:15 [16951 просмотр]

теги: шахматы javascript html jquery

показать комментарии (5)