Wordle克隆游戏重复字母验证逻辑问题求助

当前代码的核心问题是：只要字母存在于目标词中，就会被标记为「位置错误」（黄色），完全没考虑目标词里该字母的实际出现次数。比如目标词THOSE仅含1个E，用户输入GEESE时，三个E都会被错误标记，正确逻辑应该只保留1个E的有效提示，另外两个E标记为「不存在」（灰色）。

解决方案思路 #

1. 先统计目标词中每个字母的出现次数
2. 第一轮遍历：标记所有位置完全匹配的字母（绿色），同时减少对应字母的剩余可用次数
3. 第二轮遍历：处理位置不匹配的字母，只有当该字母的剩余次数>0时，才标记为「位置错误」（黄色），否则标记为「不存在」（灰色）
4. 键盘样式更新要遵循优先级：绿色（正确）> 黄色（位置错误）> 灰色（不存在），避免低优先级样式覆盖高优先级

修改后的完整代码 #

/**
 * Get the information how many active tiles are there per guess.
 */
function getActiveTiles() {
    return gameArea.querySelectorAll('[data-state="active"]');
}

/**
 * Submits user's guess.
 */
function submitGuess() {
    let activeTiles = [...getActiveTiles()]

    if (activeTiles.length !== 5) {
        showAlert("Not enough letters");
        shakeTiles(activeTiles);
        return
    }

    let guess = activeTiles.reduce(function (word, tile) {
        return word + tile.dataset.letter
    }, "");

    if (!dictionary.includes(guess)) {
        showAlert("Not in word list");
        shakeTiles(activeTiles);
        return
    }

    // 统计目标词中各字母的出现次数
    const letterCounts = {};
    for (const char of targetWord) {
        letterCounts[char] = (letterCounts[char] || 0) + 1;
    }

    // 第一轮：标记位置正确的字母，减少对应计数
    const tileStates = [];
    for (let i = 0; i < 5; i++) {
        const letter = guess[i];
        if (targetWord[i] === letter) {
            tileStates[i] = "correct";
            letterCounts[letter]--;
        } else {
            tileStates[i] = null; // 留到第二轮处理
        }
    }

    // 第二轮：处理位置错误但存在的字母
    for (let i = 0; i < 5; i++) {
        if (tileStates[i] !== null) continue;

        const letter = guess[i];
        if (letterCounts[letter] > 0) {
            tileStates[i] = "wrong-location";
            letterCounts[letter]--;
        } else {
            tileStates[i] = "wrong";
        }
    }

    stopGame();
    activeTiles.forEach(function (tile, index, array) {
        flipTile(tile, index, array, guess, tileStates[index]);
    });
}

/**
 * Flip the tiles after user have submitted their guess
 */
function flipTile(tile, index, array, guess, state) {
    let letter = tile.dataset.letter
    let key = keyboard.querySelector(`[data-key="${letter}"i]`)

    setTimeout(function () {
        tile.classList.add("flip")
    }, (index * FLIP_ANIMATION_DURATION) / 2)

    tile.addEventListener("transitionend", function () {
        tile.classList.remove("flip");
        // 应用提前计算好的状态
        tile.dataset.state = state;
        
        // 更新键盘样式，遵循优先级：correct > wrong-location > wrong
        if (state === "correct") {
            key.classList.add("correct");
        } else if (state === "wrong-location" && !key.classList.contains("correct")) {
            key.classList.add("wrong-location");
        } else if (state === "wrong" && !key.classList.contains("correct") && !key.classList.contains("wrong-location")) {
            key.classList.add("wrong");
        }

        if (index === array.length - 1) {
            tile.addEventListener("transitionend", function () {
                startGame();
                checkWinLose(guess, array);
            }, {
                once: true
            })
        }
    }, {
        once: true
    })
}

关键修改说明 #

• 把状态判断逻辑从flipTile提前到submitGuess中，先完成所有字母的状态计算，避免逐tile判断时的计数混乱
• 严格控制重复字母的标记次数，确保标记数量不超过目标词中该字母的实际出现次数
• 键盘样式更新加入优先级判断，避免已标记为绿色的按键被后续的黄色/灰色样式覆盖

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