新手JavaScript OOP优化Wordle克隆：消除代码重复

一、用OOP消除重复的if语句 #

把游戏逻辑封装成Game类，用类属性维护游戏状态（当前轮次、目标词、输入框等），将重复的猜测处理逻辑抽成通用方法，彻底去掉6个冗余的if判断。

核心思路：每一轮的DOM元素id可通过当前轮次计算得出——第guess轮的第i个字母（i从0开始）对应的id是(guess - 1) * 5 + i + 1，直接用这个公式就能定位到对应元素，无需分轮次写重复代码。

二、修复重复字母的颜色标记bug #

原逻辑未考虑已匹配的字母，导致重复字母错误标记。正确处理步骤：

1. 先标记所有位置完全匹配的字母（绿色），同时记录目标词中已被匹配的字母数量；
2. 统计目标词中剩余未被匹配的字母；
3. 对非绿色字母，若在剩余字母中则标记黄色并减少对应字母的剩余计数，否则标记红色。

完整代码实现 #

class WordleGame {
  constructor(targetWord, inputElement) {
    this.targetWord = targetWord.toLowerCase();
    this.inputElement = inputElement;
    this.currentGuess = 1;
    this.maxGuesses = 6;
    this.inputElement.addEventListener('keydown', (e) => this.handleKeyDown(e));
  }

  handleKeyDown(e) {
    if (e.key === 'Enter' && this.currentGuess <= this.maxGuesses) {
      const userInput = this.inputElement.value.trim().toLowerCase();
      if (userInput.length !== 5) {
        alert('请输入5个字母的单词');
        return;
      }
      this.processGuess(userInput);
      this.inputElement.value = '';
      this.currentGuess++;
    }
  }

  processGuess(userInput) {
    // 初始化目标词的字母计数
    const targetLetterCounts = {};
    for (const letter of this.targetWord) {
      targetLetterCounts[letter] = (targetLetterCounts[letter] || 0) + 1;
    }

    const guessLetters = userInput.split('');
    const elements = [];

    // 第一步：标记绿色（位置完全匹配），更新计数
    for (let i = 0; i < 5; i++) {
      const elementId = (this.currentGuess - 1) * 5 + i + 1;
      const ele = document.getElementById(elementId);
      ele.innerText = guessLetters[i];
      elements.push(ele);

      if (guessLetters[i] === this.targetWord[i]) {
        ele.style.color = 'green';
        targetLetterCounts[guessLetters[i]]--;
      }
    }

    // 第二步：标记黄色和红色
    for (let i = 0; i < 5; i++) {
      if (elements[i].style.color === 'green') continue; // 跳过已标记绿色的字母

      const letter = guessLetters[i];
      if (targetLetterCounts[letter] && targetLetterCounts[letter] > 0) {
        elements[i].style.color = 'yellow';
        targetLetterCounts[letter]--;
      } else {
        elements[i].style.color = 'red';
      }
    }
  }
}

// 初始化游戏
const input = document.getElementById('guess-input');
new WordleGame('donut', input);

说明 #

• 类构造函数接收目标词和输入框元素，初始化状态并绑定键盘事件；
• handleKeyDown监听回车事件，验证输入长度后调用处理逻辑；
• processGuess分两步处理颜色标记，先解决绿色匹配，再处理黄/红，彻底修复重复字母的标记bug；
• 通过id计算公式自动适配6轮猜测，完全消除冗余的if语句。

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