【亲测免费】 chessboard.js 开源项目教程

2026-01-16 10:16:03作者：姚月梅Lane

1. 项目介绍

chessboard.js 是一个独立的 JavaScript 棋盘组件，旨在提供一个简单而强大的 API，以便在不同的应用场景中使用。该项目依赖于 jQuery v3.4.1 或更高版本。chessboard.js 的设计目标是“只是一个棋盘”，因此它不包含任何与棋局规则相关的逻辑，而是专注于提供一个灵活的棋盘界面。

2. 项目快速启动

安装

首先，你需要通过 npm 安装 chessboard.js：

npm install @chrisoakman/chessboardjs

引入和使用

在你的 HTML 文件中引入 chessboard.js 和 jQuery：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Chessboard Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="node_modules/@chrisoakman/chessboardjs/dist/chessboard-1.0.0.min.js"></script>
    <link rel="stylesheet" href="node_modules/@chrisoakman/chessboardjs/dist/chessboard-1.0.0.min.css">
</head>
<body>
    <div id="myBoard" style="width: 400px"></div>
    <script>
        var board = Chessboard('myBoard', 'start');
    </script>
</body>
</html>

代码解释

Chessboard('myBoard', 'start')：在 myBoard 元素中创建一个棋盘，并初始化为棋局的起始位置。

3. 应用案例和最佳实践

案例1：展示棋局

你可以使用 chessboard.js 来展示棋局，并结合 chess.js 来处理棋局逻辑：

<div id="gameBoard" style="width: 400px"></div>
<script>
    var board = Chessboard('gameBoard', 'start');
    var game = new Chess();

    board.position(game.fen());
</script>

案例2：用户交互

允许用户通过点击棋盘来移动棋子：

<div id="interactiveBoard" style="width: 400px"></div>
<script>
    var board = Chessboard('interactiveBoard', 'start');
    var game = new Chess();

    board.position(game.fen());

    board.on('move', function(oldPos, newPos) {
        var move = game.move({
            from: oldPos,
            to: newPos
        });
        if (move === null) return 'snapback';
        board.position(game.fen());
    });
</script>