如何编写脚本实现拆分数组后的字母猜词功能？

现有代码的问题 #

• 页面加载时直接显示所有字母，未实现隐藏核心逻辑
• guessLetter 函数无实际猜词处理能力，仅触发提示
• 未区分单字母猜测与完整标题猜测的逻辑
• 元素直接挂载到body，未使用指定的display容器

修改后的完整实现代码 #

HTML

<div id="display"></div>
<div>
  <span>请猜一个字母或完整标题：</span>
  <input type="text" id="entry" maxlength="50">
</div>

CSS

#display {
  margin: 30px 0;
}

.tile {
  width: 50px;
  height: 50px;
  float: left;
  background-color: black;
  margin: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 24px;
}

.space {
  width: 50px;
  height: 50px;
  float: left;
  margin: 10px;
}

body {
  background-color: lightgray;
  margin-top: 100px;
  padding: 0 20px;
}

input {
  padding: 8px;
  font-size: 16px;
}

JavaScript

// 电影标题列表
const movietitles = ['Iron Man', 'Jaws', 'Avengers', 'Evil Dead', 'It', 'Transformers', 'Little Mermaid', 'Mulan', 'Scooby Doo'];

// 随机选中标题并去除首尾空格
const selectedTitle = movietitles[Math.floor(Math.random() * movietitles.length)].trim();
const titleLetters = selectedTitle.split('');
const displayContainer = document.getElementById('display');
const userInput = document.getElementById('entry');

// 存储已猜中的字母
const guessedLetters = new Set();

// 初始化游戏界面
function initGame() {
  displayContainer.innerHTML = '';
  titleLetters.forEach(letter => {
    if (letter === ' ') {
      // 空格显示空白占位块
      const spaceEl = document.createElement('div');
      spaceEl.className = 'space';
      displayContainer.appendChild(spaceEl);
    } else {
      // 字母用黑色tile隐藏
      const tileEl = document.createElement('div');
      tileEl.className = 'tile';
      tileEl.dataset.letter = letter.toLowerCase();
      displayContainer.appendChild(tileEl);
    }
  });
}

// 处理猜词逻辑
function handleGuess(input) {
  input = input.trim().toLowerCase();
  if (!input) return;

  // 猜完整标题的情况
  if (input.length > 1) {
    if (input === selectedTitle.toLowerCase()) {
      // 猜对全部，显示所有字母
      document.querySelectorAll('.tile').forEach(tile => {
        tile.textContent = tile.dataset.letter.toUpperCase();
      });
      alert('恭喜你猜对了！');
      userInput.disabled = true;
    } else {
      alert('猜错了，请再试试！');
    }
    userInput.value = '';
    return;
  }

  // 猜单个字母的情况
  const guessedLetter = input;
  if (guessedLetters.has(guessedLetter)) {
    alert('这个字母已经猜过了！');
    userInput.value = '';
    return;
  }

  guessedLetters.add(guessedLetter);
  const matchingTiles = document.querySelectorAll(`.tile[data-letter="${guessedLetter}"]`);
  
  if (matchingTiles.length > 0) {
    // 显示猜中的字母
    matchingTiles.forEach(tile => {
      tile.textContent = tile.dataset.letter.toUpperCase();
    });
    // 检查是否全部猜完
    if (document.querySelectorAll('.tile:not(:empty)').length === 0) {
      alert('恭喜你猜对了所有字母！');
      userInput.disabled = true;
    }
  } else {
    alert('这个字母不在标题里，请再试试！');
  }
  
  userInput.value = '';
}

// 绑定输入事件
userInput.addEventListener('change', () => {
  handleGuess(userInput.value);
});

// 启动游戏
initGame();

功能说明 #

• 页面加载时随机选取电影标题，用黑色方块隐藏所有字母，空格保留空白占位
• 支持输入单个字母或完整标题，回车触发验证
• 猜中字母时，对应位置方块显示字母；重复猜同一字母会提示
• 猜中完整标题或所有字母后，弹出胜利提示并禁用输入框
• 猜错时给出相应提示

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