当前位置：首页 > JavaScript

js实现棋盘

2026-03-02 07:18:58JavaScript

使用HTML和JavaScript创建棋盘

在JavaScript中创建一个棋盘可以通过HTML的<canvas>元素或DOM操作实现。以下是两种常见方法：

js实现棋盘

方法1：使用Canvas绘制棋盘

<!DOCTYPE html>
<html>
<head>
    <title>Canvas Chessboard</title>
    <style>
        canvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas id="chessboard" width="400" height="400"></canvas>
    <script>
        const canvas = document.getElementById('chessboard');
        const ctx = canvas.getContext('2d');
        const size = 8; // 8x8棋盘
        const squareSize = canvas.width / size;

        for (let i = 0; i < size; i++) {
            for (let j = 0; j < size; j++) {
                ctx.fillStyle = (i + j) % 2 === 0 ? 'white' : 'black';
                ctx.fillRect(j * squareSize, i * squareSize, squareSize, squareSize);
            }
        }
    </script>
</body>
</html>

方法2：使用DOM创建棋盘

<!DOCTYPE html>
<html>
<head>
    <title>DOM Chessboard</title>
    <style>
        .chessboard {
            display: grid;
            grid-template-columns: repeat(8, 50px);
            grid-template-rows: repeat(8, 50px);
            width: 400px;
            height: 400px;
            border: 1px solid black;
        }
        .square {
            width: 50px;
            height: 50px;
        }
        .white {
            background-color: white;
        }
        .black {
            background-color: black;
        }
    </style>
</head>
<body>
    <div id="chessboard" class="chessboard"></div>
    <script>
        const chessboard = document.getElementById('chessboard');
        const size = 8;

        for (let i = 0; i < size; i++) {
            for (let j = 0; j < size; j++) {
                const square = document.createElement('div');
                square.className = `square ${(i + j) % 2 === 0 ? 'white' : 'black'}`;
                chessboard.appendChild(square);
            }
        }
    </script>
</body>
</html>

添加交互功能

可以为棋盘添加点击事件，实现棋子放置或移动功能：

js实现棋盘

// 在Canvas版本中添加点击事件
canvas.addEventListener('click', (event) => {
    const rect = canvas.getBoundingClientRect();
    const x = event.clientX - rect.left;
    const y = event.clientY - rect.top;
    const col = Math.floor(x / squareSize);
    const row = Math.floor(y / squareSize);

    // 绘制棋子
    ctx.beginPath();
    ctx.arc(col * squareSize + squareSize/2, row * squareSize + squareSize/2, squareSize/3, 0, Math.PI * 2);
    ctx.fillStyle = (row + col) % 2 === 0 ? 'red' : 'blue';
    ctx.fill();
});

使用第三方库

对于更复杂的棋盘游戏，可以考虑使用专门的库：

Chess.js：处理棋类游戏规则
chessboard.js：创建交互式棋盘界面

示例使用chessboard.js：

<!DOCTYPE html>
<html>
<head>
    <title>Chessboard.js Demo</title>
    <link rel="stylesheet" href="https://unpkg.com/@chrisoakman/chessboardjs@1.0.0/dist/chessboard-1.0.0.min.css">
    <script src="https://unpkg.com/@chrisoakman/chessboardjs@1.0.0/dist/chessboard-1.0.0.min.js"></script>
</head>
<body>
    <div id="board" style="width: 400px"></div>
    <script>
        const board = Chessboard('board', {
            position: 'start',
            draggable: true
        });
    </script>
</body>
</html>

这些方法提供了从简单到复杂的棋盘实现方式，可以根据项目需求选择合适的方法。