cm-chessboard开发：如何无需手动点击触发事件执行处理逻辑

你当前的问题根源是把执黑时电脑先走的逻辑绑定在了仅交互触发的输入回调里，直接将公共逻辑抽离后在初始化阶段主动执行即可，无需依赖鼠标事件触发。

核心修改点 #

• 抽离重复的电脑走棋逻辑为独立函数，消除代码冗余
• 棋盘初始化完成后直接判断玩家阵营，若为黑方则主动触发电脑走白方第一步
• 删除原代码中inputHandler内的oneTimeBool相关冗余判断

修改后代码示例 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Chess Opening Trainer</title>
    <meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1.0"/>
    <link rel="stylesheet" href="/cm-chessboard/styles/cm-chessboard.css"/> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/chess.js/0.10.2/chess.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>

<div class="board" id="board" style="width: 800px; max-width: 800px"></div>

<div id="output"></div>

<script type="module">
    const side = 'black'
    const colour = side === 'white' ? 'w' : 'b'
    
    import {INPUT_EVENT_TYPE, COLOR, Chessboard, MARKER_TYPE} from "/cm-chessboard/src/cm-chessboard/Chessboard.js"
    import {BORDER_TYPE} from "/cm-chessboard/src/cm-chessboard/Chessboard.js"

    const chess = new Chess() 

    // 抽离公共的电脑走棋逻辑
    function makeComputerMove(board) {
        board.disableMoveInput()
        const possibleMoves = chess.moves({verbose: true})
        if (possibleMoves.length > 0) {
            const randomIndex = Math.floor(Math.random() * possibleMoves.length)
            const randomMove = possibleMoves[randomIndex]
            setTimeout(() => {
                chess.move({from: randomMove.from, to: randomMove.to})
                board.setPosition(chess.fen())
                board.enableMoveInput(inputHandler, colour)
            }, 500)
        }
    }

    function inputHandler(event) {
        console.log("event", event)
        event.chessboard.removeMarkers(undefined, MARKER_TYPE.dot)

        // 走棋前的落点提示逻辑
        if (event.type === INPUT_EVENT_TYPE.moveStart) {
            const moves = chess.moves({square: event.square, verbose: true});
            for (const move of moves) {
                event.chessboard.addMarker(move.to, MARKER_TYPE.dot)
            }
            return moves.length > 0

        // 玩家完成走棋后的处理逻辑
        } else if (event.type === INPUT_EVENT_TYPE.moveDone) {
            const move = {from: event.squareFrom, to: event.squareTo}
            const result = chess.move(move)
            
            if (result) {
                event.chessboard.setPosition(chess.fen())
                // 玩家走棋完成后调用电脑走棋
                makeComputerMove(event.chessboard)
            } else {
                console.warn("invalid move", move)
            }
            return result
        }
    }

    const board = new Chessboard(document.getElementById("board"), {
        position: chess.fen(),
        sprite: {url: "/cm-chessboard/assets/images/chessboard-sprite-staunty.svg"},
        style: {moveMarker: MARKER_TYPE.square, hoverMarker: undefined},
        orientation: colour
    })

    // 初始化后直接判断阵营，执黑则直接让电脑走第一步
    if (side === 'black') {
        makeComputerMove(board)
    } else {
        board.enableMoveInput(inputHandler, colour)
    }
</script>
</body>
</html>

逻辑说明 #

原来的代码中执黑时的电脑走棋逻辑依赖用户交互触发的inputHandler回调，修改后在页面初始化完成时就会主动判断玩家阵营，如果玩家执黑就立刻调用电脑走棋逻辑，白方走完后再开放黑方的走棋权限，完全不需要用户手动点击触发。

内容的提问来源于stack exchange，提问作者Alfie Stoppani