js实现跳棋

实现跳棋游戏的步骤

初始化棋盘

使用二维数组表示棋盘，每个格子存储棋子状态（空、红子、黑子）。初始化时按照跳棋规则摆放棋子。

const boardSize = 8;
const board = Array(boardSize).fill().map(() => Array(boardSize).fill(0));

// 初始化棋子位置
function initBoard() {
    // 红方初始位置
    for (let i = 0; i < 3; i++) {
        for (let j = 0; j < boardSize; j++) {
            if ((i + j) % 2 !== 0) board[i][j] = 1; // 1代表红子
        }
    }
    // 黑方初始位置
    for (let i = 5; i < boardSize; i++) {
        for (let j =  ......

绘制棋盘

使用HTML5 Canvas或DOM元素绘制棋盘和棋子。为每个格子添加点击事件处理选中和移动逻辑。

function drawBoard() {
    const canvas = document.getElementById('board');
    const ctx = canvas.getContext('2d');
    const cellSize = canvas.width / boardSize;

    // 绘制棋盘格子
    for (let i = 0; i < boardSize; i++) {
        for (let j = 0; j < boardSize; j++) {
            ctx.fillStyle = (i + j) % 2 === 0 ? '#fff' : '#000';
            ctx.fillRect(j * cellSize, i * cellSize, cellSize, cellSize);

            // 绘制棋子
            if (board[i][j] === 1) {
                drawPiece(ctx, j * cellSize, i * cellSize, cellSize, 'red');
            } else if (board[i][j] === 2) {
                drawPiece(ctx, j * cellSize, i * cellSize, cellSize, 'black');
            }
        }
    }
}

移动规则实现

实现跳棋的核心移动逻辑，包括普通移动、跳跃吃子、连续跳跃等规则。需要验证移动是否合法。

function isValidMove(fromRow, fromCol, toRow, toCol, player) {
    // 检查目标位置是否为空
    if (board[toRow][toCol] !== 0) return false;

    // 普通移动（斜向前进一格）
    const rowDiff = toRow - fromRow;
    const colDiff = Math.abs(toCol - fromCol);

    if (player === 1 && rowDiff === 1 && colDiff === 1) return true; // 红子前进
    if (player === 2 && rowDiff === -1 && colDiff === 1) return true; // 黑子前进

    // 跳跃吃子
    if (Math.abs(rowDiff) === 2 && colDiff === 2) {
        const midRow = (fromRow + toRow) / 2;
        const midCol = (fromCol + toCol) / 2;
        return board[midRow][midCol] !== 0 && board[midRow][midCol] !== player;
    }

    return false;
}

游戏状态管理

跟踪当前玩家回合、胜负判断、棋子升级为王棋等游戏状态。添加重新开始、悔棋等功能按钮。

let currentPlayer = 1; // 1: 红方, 2: 黑方
let selectedPiece = null;

function switchPlayer() {
    currentPlayer = currentPlayer === 1 ? 2 : 1;
    updateStatus();
}

function checkWin() {
    const redCount = board.flat().filter(cell => cell === 1).length;
    const blackCount = board.flat().filter(cell => cell === 2).length;

    if (redCount === 0) return 2; // 黑方胜
    if (blackCount === 0) return 1; // 红方胜
    return 0; // 未分胜负
}

交互优化

添加选中高亮、移动动画、音效等增强用户体验的功能。实现AI对手或网络对战功能可进一步提升游戏体验。

function highlightValidMoves(row, col) {
    const highlights = [];
    // 检查所有可能的移动方向
    const directions = [
        {dr: 1, dc: 1}, {dr: 1, dc: -1}, 
        {dr: -1, dc: 1}, {dr: -1, dc: -1},
        {dr: 2, dc: 2}, {dr: 2, dc: -2},
        {dr: -2, dc: 2}, {dr: -2, dc: -2}
    ];

    directions.forEach(dir => {
        const newRow = row + dir.dr;
        const newCol = col + dir.dc;
        if (isValidMove(row, col, newRow, newCol, currentPlayer)) {
            highlights.push({row: newRow, col: newCol});
        }
    });

    return highlights;
}

实现完整的跳棋游戏需要约300-500行JavaScript代码，建议使用模块化方式组织代码，将棋盘逻辑、渲染逻辑和游戏控制逻辑分离。