Chessboard.js: универсальная шахматная доска

Для своего проекта мне приходилось использовать сторонний виджет шахматной доск��. Это ускоряет разработку на старте, но вызывает сложности при поддержке проекта. Так я решил создать универсальный модуль шахматной доски на чистом JavaScript + Canvas, лёгкий, без зависимостей и с открытым кодом.

Пример работы модуля Chessboard.js на шахматной доске размером 8x12

Основные возможности модуля

  • 🆓 JavaScript без использования сторонних библиотек.
  • 🚀 Рендеринг через HTML Canvas.
  • 📜 Установка позиции на доске через FEN-нотацию.
  • 🎨 Три встроенных темы (синяя, коричневая, зеленая) и возможность кастомизации шахматной доски.
  • 🔄 Возможность перевернуть доску.
  • 🧩 Возможно установить нестандартный размер доски, например: 5x5, 10x20
  • 🏷 Настроить доску можно в HTML через атрибут data-chessboard.

Установка модуля

1. Подключите скрипт в <head> или <body>:

<script src="src/chessboard.min.js"></script>

2. В любой HTML элемент добавьте data-chessboard атрибут:

<div data-chessboard='{"fen": "rnbqkb1r/1p2pppp/p2p1n2/8/3NP3/2N5/PPP2PPP/R1BQKB1R w KQkq - 0 6"}'></div>

Шахматная доска отобразиться при загрузке страницы:

Шахматная доска с установленной позицией FEN: rnbqkb1r/1p2pppp/p2p1n2/8/3NP3/2N5/PPP2PPP/R1BQKB1R w KQkq - 0 6
Шахматная доска с установленной позицией FEN: rnbqkb1r/1p2pppp/p2p1n2/8/3NP3/2N5/PPP2PPP/R1BQKB1R w KQkq - 0 6

Примеры использования

1. С помощью установки FEN можно анимировать ходы:

const board = new Chessboard({skin: "brown-theme"}); const fenPositions = [/* FEN-строки */]; fenPositions.forEach((fen, index) => { setTimeout(() => board.setFEN(fen), (index + 1) * 1000); });
Динамическое изменение позиции на шахматной доске

2. Создаем доску размером 6x6, переворачиваем и изменяем тему:

// Устанавливаем нестандартный размер доски: const board = new Chessboard({ rows: 6, cols: 6, fen: "nqkbnr/pppppp/6/6/PPPPPP/NQKBNR" }); board.setOrientation("black"); // Переворачиваем доску // Поддерживаемые темы: const skinList = ["green-theme", "brown-theme", "blue-theme"]; // Меняем тему каждые 2 секунды: skinList.forEach((skin, index) => { setTimeout(() => { board.setSkin(skin); }, (index + 1) * 2000); });
Нестандартный размер, переключение темы и переворот доски

Репозиторий

14
1 комментарий