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
Примеры использования
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);
});
Нестандартный размер, переключение темы и переворот доски
Репозиторий
5 комментариев