如何在JavaScript中实现打字游戏的游戏循环及动态单词生成？

核心思路 #

你之前尝试的while循环会阻塞浏览器主线程（JS是单线程模型），导致页面完全无响应；时间戳方案如果没结合定时器管理也很难实现动态间隔。正确的做法是用setInterval创建定时任务，配合clearInterval动态更新间隔时间，同时处理用户输入的匹配逻辑。

完整实现代码 #

HTML结构

<div class="game-container">
  <div id="words-container"></div>
  <input type="text" id="input-box" placeholder="输入单词..." />
  <p>正确数: <span id="correct-count">0</span></p>
</div>

CSS样式

.game-container {
  max-width: 600px;
  margin: 2rem auto;
  padding: 0 1rem;
}
#words-container {
  min-height: 200px;
  border: 1px solid #ddd;
  padding: 1rem;
  margin-bottom: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
#words-container p {
  margin: 0;
  padding: 0.3rem 0.6rem;
  background: #f0f0f0;
  border-radius: 4px;
}
#words-container p.correct {
  background: #d4edda;
  color: #155724;
}
#input-box {
  width: 100%;
  padding: 0.5rem;
  font-size: 1rem;
}

JavaScript逻辑

// 单词库，可自行扩展
const wordList = ["apple", "banana", "cherry", "date", "elderberry", "fig", "grape"];
// 初始配置
let generateInterval = 5000; // 初始5秒
let correctCount = 0;
let timerId = null;
const wordsContainer = document.getElementById('words-container');
const inputBox = document.getElementById('input-box');
const correctCountEl = document.getElementById('correct-count');

// 生成随机单词并添加到页面
function generateWord() {
  const randomIndex = Math.floor(Math.random() * wordList.length);
  const wordEl = document.createElement('p');
  wordEl.textContent = wordList[randomIndex];
  wordsContainer.appendChild(wordEl);
}

// 启动/重启单词生成定时器
function startGenerateTimer() {
  // 清除旧定时器，避免重复触发
  if (timerId) clearInterval(timerId);
  timerId = setInterval(generateWord, generateInterval);
}

// 处理用户输入匹配
inputBox.addEventListener('input', () => {
  const inputText = inputBox.value.trim().toLowerCase();
  // 获取第一个未完成的单词元素
  const pendingWords = wordsContainer.querySelectorAll('p:not(.correct)');
  if (pendingWords.length === 0) return;

  const currentWordEl = pendingWords[0];
  const currentWord = currentWordEl.textContent.toLowerCase();

  if (inputText === currentWord) {
    // 标记为已完成
    currentWordEl.classList.add('correct');
    // 清空输入框
    inputBox.value = '';
    // 更新计数
    correctCount++;
    correctCountEl.textContent = correctCount;

    // 每5个正确单词缩短间隔（最低限制1秒）
    if (correctCount % 5 === 0 && generateInterval > 1000) {
      generateInterval -= 1000; // 每次缩短1秒，可自定义调整幅度
      startGenerateTimer();
      alert(`速度提升！当前间隔：${generateInterval / 1000}秒`);
    }
  }
});

// 初始化启动游戏
startGenerateTimer();

关键细节说明 #

1. 定时器管理：每次需要调整间隔时，先用clearInterval清除旧的定时任务，再用新间隔启动新任务，确保间隔更新生效。
2. 输入匹配逻辑：这里采用匹配第一个未完成单词的规则，你可以根据需求修改为匹配任意显示的单词。
3. 边界控制：添加了间隔最小值（1秒），防止间隔过短导致游戏难度过高。
4. 避免线程阻塞：放弃while循环，改用浏览器异步定时器，保证页面能正常响应用户输入和渲染。

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