求助：如何在类Wordle游戏中实现字母框猜中变绿、未命中变红？

云上老周

2026-7-3

类Wordle游戏开发问题

我正在为学校作业开发一款类Wordle游戏，需求如下：

当字母被正确猜中（位置匹配）时，字母框标记为绿色
当猜测的字母不在目标单词中时，字母框需变为红色

我是JavaScript零基础新手，尝试了ChatGPT提供的多段代码但均无效，以下是我当前使用的代码：

HTML代码

<h1>Raad het woord</h1>
<div id="word-display"></div>
<input type="text" id="guess-input" maxlength="5" placeholder="Enter your 5-letter guess">
<button id="submit-button" onclick="checkGuess()">Antwoord inzenden</button>
<div id="feedback"></div>

<div class="alfabet">
  <div class="letter">A</div>
  <div class="letter">B</div>
  <div class="letter">C</div>
  <div class="letter">D</div>
  <div class="letter">E</div>
  <div class="letter">F</div>
  <div class="letter">G</div>
  <div class="letter">H</div>
  <div class="letter">I</div>
  <div class="letter">J</div>
  <div class="letter">K</div>
  <div class="letter">L</div>
  <div class="letter">M</div>
  <div class="letter">N</div>
  <div class="letter">O</div>
  <div class="letter">P</div>
  <div class="letter">Q</div>
  <div class="letter">R</div>
  <div class="letter">S</div>
  <div class="letter">T</div>
  <div class="letter">U</div>
  <div class="letter">V</div>
  <div class="letter">W</div>
  <div class="letter">X</div>
  <div class="letter">Y</div>
  <div class="letter">Z</div>
</div>

CSS代码

body {
  font-family: Arial, sans-serif;
  text-align: center;
  margin: 50px;
}

#word-display {
  font-size: 24px;
  margin-bottom: 20px;
}

#guess-input {
  font-size: 16px;
  padding: 5px;
}

#submit-button {
  font-size: 16px;
  padding: 8px 16px;
  cursor: pointer;
}

#feedback {
  font-size: 18px;
  margin-top: 20px;
}

.letter {
  display: inline-block;
  padding: 1rem;
  border: 1px solid #ccc;
  color: black;
}

JavaScript代码

const wordList = ["lezen", 'ijzer']; // Lijst van te raden woorden
let currentWordIndex = 0; // houdt bij welk woord momenteel geraden wordt
let targetWord = wordList[currentWordIndex]; // bevat het woord dat de speler moet raden

// Array om de huidige status van geraden letters op te slaan, initieel zijn alle letters vervangen door underscores
let guessedLetters = Array(targetWord.length).fill('_');

const maxAttempts = 10;
let attemptsLeft = maxAttempts;

// Referenties naar HTML-elementen voor latere manipulatie
const wordDisplay = document.getElementById('word-display');
const guessInput = document.getElementById('guess-input');
const feedbackDisplay = document.getElementById('feedback');

// Toon het initiële woord, initieel is dit enkel underscores
updateWordDisplay();

// Deze functie zoekt naar overeenkomende letters tussen de geraden letters en het te raden woord.
function findMatchingLetters(guess, word) {
  let matchingLetters = [];

  for (let i = 0; i < guess.length; i++) {
    if (word.includes(guess[i]) && !matchingLetters.includes(guess[i])) {
      matchingLetters.push(guess[i]);
    }
  }

  return matchingLetters;
}

// Deze functie wordt aangeroepen wanneer de speler een gok doet. Het controleert of de gok correct is, werkt de weergave bij, geeft feedback, en controleert of het spel is gewonnen of verloren.
function checkGuess() {
  const guess = guessInput.value.toLowerCase();

  if (guess.length === 5 && /^[a-z]+$/.test(guess)) { // Deze voorwaarde controleert of de ingevoerde gok voldoet aan de vereisten: 5 tekens lang en bevat alleen letters van a-z
    const isCorrectGuess = updateGuessedLetters(guess); // Controleer of de gok juist is, het resultaat wordt opgeslagen in isCorrectGuess

    updateWordDisplay(); // Update het weergegeven woord, de letters worden getoond als ze op de juiste plaats staan

    if (isCorrectGuess) {
      feedbackDisplay.textContent = "Je hebt een letter geraden";
    }

    console.log(guess, wordList[0])

    const result = findMatchingLetters(guess, wordList[0])

    console.log(result)

    result.forEach(letter => {
      const letterElems = document.querySelectorAll(".letter")
      letterElems.forEach(element => {
        if (element.textContent === letter.toUpperCase()) {
          element.style.backgroundColor = 'green';
        }
      })

      for (let i = 0; i < guessedLetters.length; i++) {
        if (guessedLetters[i] !== '_' && guessedLetters[i] !== targetWord[i] && guessedLetters[i].toUpperCase() === letter.toUpperCase()) {
          const letterElem = document.querySelectorAll(".letter")[i];
          letterElem.style.backgroundColor = 'red';
        }
      }
    })

    attemptsLeft--;
    feedbackDisplay.textContent = `Foute gok. Nog ${attemptsLeft} kansen over.`;

    if (attemptsLeft === 0) {
      feedbackDisplay.textContent += ` Het woord was "${targetWord}".`;
      setTimeout(nextWord, 5000); // Toon het volgende woord na 5 seconden
    }

  } else {
    feedbackDisplay.textContent = "Please enter a valid 5-letter guess.";
  }

  guessInput.value = ''; // Wis het invoerveld
  guessInput.focus(); // Plaats de focus terug op het invoerveld
}

// Functie om geraden letters bij te werken
function updateGuessedLetters(guess) {
  let isCorrectGuess = false;

  for (let i = 0; i < targetWord.length; i++) {
    if (targetWord[i] === guess[i] && guessedLetters[i] === '_') {
      guessedLetters[i] = guess[i];
      isCorrectGuess = true;
    }
  }

  return isCorrectGuess;
}

// Functie om het weergegeven woord bij te werken
function updateWordDisplay() {
  wordDisplay.textContent = guessedLetters.join(' ');
}

// Functie om naar het volgende woord te gaan
function nextWord() {
  currentWordIndex++;
  if (currentWordIndex < wordList.length) {
    targetWord = wordList[currentWordIndex];
    guessedLetters = Array(targetWord.length).fill('_');
    attemptsLeft = maxAttempts;
    updateWordDisplay();
    feedbackDisplay.textContent = "";
  } else {
    feedbackDisplay.textContent = "Game over. You've completed all the words.";
  }
}

修正后的完整代码

核心问题修复：

替换硬编码的wordList[0]为当前目标单词targetWord，确保切换单词后逻辑正常
重构字母颜色标记逻辑，先处理位置正确的绿色标记，再处理不在单词中的红色标记
调整反馈信息顺序，避免正确提示被错误提示覆盖
新增猜中完整单词的判断，以及切换单词时重置字母颜色的功能

修正后的JavaScript代码

const wordList = ["lezen", 'ijzer']; 
let currentWordIndex = 0; 
let targetWord = wordList[currentWordIndex]; 

let guessedLetters = Array(targetWord.length).fill('_');
const maxAttempts = 10;
let attemptsLeft = maxAttempts;

const wordDisplay = document.getElementById('word-display');
const guessInput = document.getElementById('guess-input');
const feedbackDisplay = document.getElementById('feedback');

updateWordDisplay();

function checkGuess() {
  const guess = guessInput.value.toLowerCase();

  if (guess.length === 5 && /^[a-z]+$/.test(guess)) {
    let hasCorrectPosition = false;
    // 更新已猜中位置的字母
    for (let i = 0; i < targetWord.length; i++) {
      if (targetWord[i] === guess[i] && guessedLetters[i] === '_') {
        guessedLetters[i] = guess[i];
        hasCorrectPosition = true;
      }
    }

    updateWordDisplay();

    // 处理字母颜色标记
    const letterElems = document.querySelectorAll(".letter");
    // 遍历猜测的每个字母
    for (const char of guess) {
      const upperChar = char.toUpperCase();
      // 位置正确则标绿
      if (targetWord.includes(char) && guess.indexOf(char) === targetWord.indexOf(char)) {
        letterElems.forEach(elem => {
          if (elem.textContent === upperChar) {
            elem.style.backgroundColor = 'green';
          }
        });
      } 
      // 不在目标单词中标红
      else if (!targetWord.includes(char)) {
        letterElems.forEach(elem => {
          if (elem.textContent === upperChar) {
            elem.style.backgroundColor = 'red';
          }
        });
      }
    }

    // 更新反馈信息
    let feedbackText = '';
    if (hasCorrectPosition) {
      feedbackText = "Je hebt een letter op de juiste plaats geraden!";
    } else if ([...guess].some(char => targetWord.includes(char))) {
      feedbackText = "Je hebt een letter geraden die in het woord zit, maar niet op de juiste plaats.";
    } else {
      feedbackText = "Geen van de geraden letters zit in het woord.";
    }

    attemptsLeft--;
    feedbackText += ` Nog ${attemptsLeft} kansen over.`;
    feedbackDisplay.textContent = feedbackText;

    // 检查是否猜中整个单词
    if (guessedLetters.join('') === targetWord) {
      feedbackDisplay.textContent = `Gefeliciteerd! Je hebt het woord geraden.`;
      setTimeout(nextWord, 3000);
      return;
    }

    if (attemptsLeft === 0) {
      feedbackDisplay.textContent += ` Het woord was "${targetWord}".`;
      setTimeout(nextWord, 5000);
    }

  } else {
    feedbackDisplay.textContent = "Voer een geldig 5-letter woord in.";
  }

  guessInput.value = '';
  guessInput.focus();
}

function updateWordDisplay() {
  wordDisplay.textContent = guessedLetters.join(' ');
}

function nextWord() {
  currentWordIndex++;
  if (currentWordIndex < wordList.length) {
    targetWord = wordList[currentWordIndex];
    guessedLetters = Array(targetWord.length).fill('_');
    attemptsLeft = maxAttempts;
    updateWordDisplay();
    feedbackDisplay.textContent = "";
    // 重置字母颜色
    document.querySelectorAll(".letter").forEach(elem => {
      elem.style.backgroundColor = '';
    });
  } else {
    feedbackDisplay.textContent = "Speel klaar! Je hebt alle woorden geraden.";
  }
}

功能说明：

字母位置正确时，对应字母框变为绿色
猜测字母不在目标单词中时，对应字母框变为红色
猜中完整单词后自动切换下一题，同时重置字母颜色
反馈信息清晰，不会被后续提示覆盖

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

求助：如何在类Wordle游戏中实现字母框猜中变绿、未命中变红？

HTML代码 #

CSS代码 #

JavaScript代码 #

修正后的完整代码 #

核心问题修复： #

修正后的JavaScript代码 #

功能说明： #

HTML代码

CSS代码

JavaScript代码

修正后的完整代码

核心问题修复：

修正后的JavaScript代码

功能说明：