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

Помощь дата->рейтинг Поиск Почта RSS канал Статистика nickolay.info Домой

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

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

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

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

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

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

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

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

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

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

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

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


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

комментарии (3)

23.04.2015, 13:15; рейтинг: 9037

  свежие записипоиск по блогукомментироватьстатистика

Наверх Яндекс.Метрика
© PerS
вход