当前位置：首页 > JavaScript

js实现棋盘

2026-01-31 16:11:46JavaScript

使用HTML和JavaScript实现棋盘

创建一个棋盘可以通过HTML表格结合JavaScript动态生成。以下是一个简单的实现方法：

<!DOCTYPE html>
<html>
<head>
    <title>棋盘</title>
    <style>
        table {
            border-collapse: collapse;
        }
        td {
            width: 50px;
            height: 50px;
            border: 1px solid black;
        }
        .black {
            background-color: black;
        }
        .white {
            background-color: white;
        }
    </style>
</head>
<body>
    <div id="chessboard"></div>
    <script>
        const boardSize = 8;
        const chessboard = document.getElementById('chessboard');
        const table = document.createElement('table');

        for (let i = 0; i < boardSize; i++) {
            const row = document.createElement('tr');
            for (let j = 0; j < boardSize; j++) {
                const cell = document.createElement('td');
                cell.className = (i + j) % 2 === 0 ? 'white' : 'black';
                row.appendChild(cell);
            }
            table.appendChild(row);
        }

        chessboard.appendChild(table);
    </script>
</body>
</html>

添加交互功能

可以为棋盘添加点击事件，让用户能够与棋盘交互：

js实现棋盘

// 在上面的script标签内添加
table.addEventListener('click', function(event) {
    if (event.target.tagName === 'TD') {
        event.target.style.backgroundColor = 'red';
    }
});

使用Canvas绘制棋盘

另一种方法是使用HTML5 Canvas元素绘制棋盘：

js实现棋盘

<canvas id="canvas" width="400" height="400"></canvas>
<script>
    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');
    const size = 8;
    const cellSize = 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 * cellSize, i * cellSize, cellSize, cellSize);
            ctx.strokeRect(j * cellSize, i * cellSize, cellSize, cellSize);
        }
    }
</script>

实现可拖动的棋子

在Canvas棋盘上添加可拖动的棋子：

// 在上面的script标签内添加
const pieces = [];

// 添加棋子
function addPiece(x, y, color) {
    pieces.push({x, y, color});
    drawBoard();
}

// 重绘棋盘和棋子
function drawBoard() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    // 绘制棋盘
    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 * cellSize, i * cellSize, cellSize, cellSize);
            ctx.strokeRect(j * cellSize, i * cellSize, cellSize, cellSize);
        }
    }

    // 绘制棋子
    pieces.forEach(piece => {
        ctx.beginPath();
        ctx.arc(
            piece.x * cellSize + cellSize/2,
            piece.y * cellSize + cellSize/2,
            cellSize/2 - 5,
            0,
            Math.PI * 2
        );
        ctx.fillStyle = piece.color;
        ctx.fill();
        ctx.stroke();
    });
}

// 添加初始棋子
addPiece(3, 3, 'red');
addPiece(4, 4, 'blue');

// 实现拖动功能
let selectedPiece = null;
canvas.addEventListener('mousedown', e => {
    const rect = canvas.getBoundingClientRect();
    const x = (e.clientX - rect.left) / cellSize;
    const y = (e.clientY - rect.top) / cellSize;

    selectedPiece = pieces.find(p => 
        Math.abs(p.x - Math.floor(x)) < 0.5 && 
        Math.abs(p.y - Math.floor(y)) < 0.5
    );
});

canvas.addEventListener('mousemove', e => {
    if (selectedPiece) {
        const rect = canvas.getBoundingClientRect();
        selectedPiece.x = (e.clientX - rect.left) / cellSize;
        selectedPiece.y = (e.clientY - rect.top) / cellSize;
        drawBoard();
    }
});

canvas.addEventListener('mouseup', () => {
    if (selectedPiece) {
        selectedPiece.x = Math.round(selectedPiece.x);
        selectedPiece.y = Math.round(selectedPiece.y);
        selectedPiece = null;
        drawBoard();
    }
});

使用SVG创建棋盘

还可以使用SVG来创建棋盘：

<svg id="svgBoard" width="400" height="400"></svg>
<script>
    const svg = document.getElementById('svgBoard');
    const svgSize = 8;
    const svgCellSize = 400 / svgSize;

    for (let i = 0; i < svgSize; i++) {
        for (let j = 0; j < svgSize; j++) {
            const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
            rect.setAttribute('x', j * svgCellSize);
            rect.setAttribute('y', i * svgCellSize);
            rect.setAttribute('width', svgCellSize);
            rect.setAttribute('height', svgCellSize);
            rect.setAttribute('fill', (i + j) % 2 === 0 ? 'white' : 'black');
            rect.setAttribute('stroke', 'black');
            svg.appendChild(rect);
        }
    }
</script>

这些方法提供了不同技术实现棋盘的方式，可以根据项目需求选择最适合的方案。