如何实现F1车手生涯猜谜游戏的元素显示时机控制与交互逻辑？

核心思路梳理 #

先明确几个关键控制点：

• 车手生涯车队按顺序逐步展示，初始仅显示第一个
• 猜测次数与车队数量绑定，最多猜测次数等于车队总数
• 回车提交替代按钮，实时更新猜测次数提示
• 猜对则展示全部车队并结束游戏，猜错则推进到下一个车队，次数用尽则失败

代码实现步骤 #

1. 定义车手数据与状态变量 #

先把车手的生涯数据结构化，同时初始化游戏状态：

// 示例车手数据，可扩展为多个车手随机选择
const targetDriver = {
  fullName: "Lewis Hamilton",
  careerTeams: [
    { team: "McLaren", years: "2007-2012" },
    { team: "Mercedes", years: "2013-2024" }
  ]
};

// 游戏状态变量
let currentTeamIdx = 0;
let guessTimes = 0;
const maxGuessTimes = targetDriver.careerTeams.length;
let isGameOver = false;

2. 页面元素初始化与渲染 #

页面加载时只显示第一个车队，并初始化猜测次数提示：

// 渲染当前展示的车队
function renderCurrentTeam() {
  const teamEl = document.getElementById("current-team");
  const { team, years } = targetDriver.careerTeams[currentTeamIdx];
  teamEl.textContent = `${team} (${years})`;
}

// 更新猜测次数提示
function updateGuessTip() {
  const tipEl = document.getElementById("guess-tip");
  tipEl.textContent = `第${guessTimes + 1}次猜测/共${maxGuessTimes}次`;
}

// 页面加载完成后初始化
window.addEventListener("load", () => {
  renderCurrentTeam();
  updateGuessTip();
});

3. 交互逻辑实现 #

处理回车提交、猜测判断、状态更新：

const guessInput = document.getElementById("driver-guess");

// 监听回车提交
guessInput.addEventListener("keydown", (e) => {
  if (e.key === "Enter" && !isGameOver) {
    checkGuess();
  }
});

// 核心猜测校验函数
function checkGuess() {
  const userInput = guessInput.value.trim().toLowerCase();
  const correctName = targetDriver.fullName.toLowerCase();
  guessTimes++;

  if (userInput === correctName) {
    // 猜对：展示全部车队，结束游戏
    showAllCareerTeams();
    alert(`猜对了！目标车手是 ${targetDriver.fullName}`);
    endGame();
  } else {
    if (guessTimes < maxGuessTimes) {
      // 还有机会：展示下一个车队，重置输入框
      currentTeamIdx++;
      renderCurrentTeam();
      updateGuessTip();
      guessInput.value = "";
    } else {
      // 次数用尽：游戏失败
      alert(`遗憾猜错了，正确车手是 ${targetDriver.fullName}`);
      endGame();
    }
  }
}

// 展示全部生涯车队
function showAllCareerTeams() {
  const teamEl = document.getElementById("current-team");
  const allTeamsText = targetDriver.careerTeams
    .map(item => `${item.team} (${item.years})`)
    .join(" → ");
  teamEl.textContent = allTeamsText;
}

// 结束游戏处理
function endGame() {
  isGameOver = true;
  guessInput.disabled = true;
}

4. 配套HTML结构 #

对应的页面结构示例：

<div class="game-wrapper">
  <h2>F1车手生涯猜谜</h2>
  <div id="current-team" class="team-display"></div>
  <div class="guess-section">
    <p id="guess-tip" class="tip-text"></p>
    <input type="text" id="driver-guess" placeholder="请输入车手全名">
  </div>
</div>

扩展建议 #

• 可以添加随机选择车手的逻辑，每次游戏从车手库中随机挑一个目标
• 优化样式，比如猜对/猜错时添加不同的视觉反馈
• 支持重置游戏功能，允许用户重新开始

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