F1 Higher or Lower游戏功能优化与问题修复技术咨询

问题1：实现猜对后下一轮的司机衔接逻辑 #

修改思路 #

• 新增全局变量存储上一轮的第二个司机索引，初始值为null
• 第一轮随机生成两个司机；后续轮次将上一轮的第二个司机作为本轮第一个司机，再随机生成第二个司机（排除第一个）
• 用户猜对后更新存储的司机索引，为下一轮做准备

代码修改 #

1. 添加全局变量：

let lastUsedDriverIndex = null;

2. 修改showNextDriver函数：

function showNextDriver() {
    // 清空游戏容器内容
    gameContainer.innerHTML = '';
  
    // 根据上一轮结果选择司机
    if (lastUsedDriverIndex === null) {
        // 第一轮：随机选两个不同司机
        currentDriverIndex = getRandomDriverIndex();
        previousDriverIndex = getRandomDriverIndex(currentDriverIndex);
    } else {
        // 后续轮次：用上一轮的第二个司机作为本轮第一个
        currentDriverIndex = lastUsedDriverIndex;
        previousDriverIndex = getRandomDriverIndex(currentDriverIndex);
    }
  
    // 创建司机展示元素（保留原有代码）
    const currentDriverElement = document.createElement('div');
    const previousDriverElement = document.createElement('div');
    const currentDriverDataElement = document.createElement('ul');
    const previousDriverDataElement = document.createElement('ul');
    const vsElement = document.createElement('div');

    currentDriverElement.classList.add('driver');
    previousDriverElement.classList.add('driver');
    vsElement.textContent = "Vs";
    
    currentDriverElement.innerHTML = `
      <h2>${f1Drivers[currentDriverIndex].name}</h2>
      <img src="driver-images/${f1Drivers[currentDriverIndex].name.toLowerCase().replace(' ', '-')}.jpg" alt="${f1Drivers[currentDriverIndex].name}">
    `;
    previousDriverElement.innerHTML = `
      <h2>${f1Drivers[previousDriverIndex].name}</h2>
      <img src="driver-images/${f1Drivers[previousDriverIndex].name.toLowerCase().replace(' ', '-')}.jpg" alt="${f1Drivers[previousDriverIndex].name}">
    `;
  
    // 根据难度设置统计数据（保留原有代码）
    if (currentDifficulty === 'easy') {
      currentDriverDataElement.innerHTML = `<li>Wins: ${f1Drivers[currentDriverIndex].wins}</li>`;
      previousDriverDataElement.innerHTML = `<li>Wins: ${f1Drivers[previousDriverIndex].wins}</li>`;
    } else if (currentDifficulty === 'normal') {
      currentDriverDataElement.innerHTML = `<li>Podiums: ${f1Drivers[currentDriverIndex].podiums}</li>`;
      previousDriverDataElement.innerHTML = `<li>Podiums: ${f1Drivers[previousDriverIndex].podiums}</li>`;
    } else if (currentDifficulty === 'hard') {
      currentDriverDataElement.innerHTML = `<li>Points: ${f1Drivers[currentDriverIndex].points}</li>`;
      previousDriverDataElement.innerHTML = `<li>Points: ${f1Drivers[previousDriverIndex].points}</li>`;
    }
  
    // 初始隐藏统计数据
    currentDriverDataElement.style.display = 'none';
    previousDriverDataElement.style.display = 'none';
  
    currentDriverElement.appendChild(currentDriverDataElement);
    previousDriverElement.appendChild(previousDriverDataElement);
    gameContainer.appendChild(currentDriverElement);
    gameContainer.appendChild(vsElement);
    gameContainer.appendChild(previousDriverElement);
  
    // 显示操作按钮
    const buttonContainer = document.getElementById('button-container');
    buttonContainer.style.display = 'block';
}

3. 修改checkAnswer函数的猜对逻辑：

if (answerIsCorrect) {
    score++;
    // 更新上一轮司机索引为当前轮的第二个司机
    lastUsedDriverIndex = previousDriverIndex;
    // 显示当前轮的统计数据
    document.querySelectorAll('.driver ul').forEach(el => el.style.display = 'block');
    // 显示正确提示
    resultContainer.textContent = `Correct! Score: ${score}`;
    resultContainer.style.color = 'green';
    // 延迟加载下一轮，让用户看清数据
    setTimeout(showNextDriver, 1500);
} else {
    // 显示统计数据
    document.querySelectorAll('.driver ul').forEach(el => el.style.display = 'block');
    // 显示错误提示
    resultContainer.textContent = `Wrong! Final Score: ${score}`;
    resultContainer.style.color = 'red';
    endGame();
}

问题2：隐藏统计数据至猜测完成，添加猜测提示 #

修改思路 #

• 初始渲染司机时隐藏统计数据列表
• 用户完成猜测后，显示统计数据并给出正确/错误提示
• 修正startGame中难度提示的赋值顺序，避免初始显示错误

代码补充 #

1. 完善endGame函数（补全原代码缺失部分）：

function endGame() {
    // 移除按钮事件监听
    higherButton.removeEventListener('click', onHigherButtonClicked);
    lowerButton.removeEventListener('click', onLowerButtonClicked);

    let message = "";
    if (score <= 1) {
        message = `That's a poor score, you should learn more about F1.`;
    } else if (score <= 4) {
        message = `That's okay, not good.`;
    } else if (score <= 10) {
        message = `You are good!!`;
    } else {
        message = `You're an F1 legend!`;
    }
    resultContainer.textContent += ` ${message}`;
    playAgainButton.style.display = 'block';
    // 添加重新开始游戏事件
    playAgainButton.addEventListener('click', () => {
        lastUsedDriverIndex = null;
        startGame();
    });
}

2. 修改startGame函数的变量顺序：

function startGame() {
    const frontImage = document.getElementById('bikar');
    frontImage.style.display = 'none';

    currentDifficulty = difficultySelect.value;
    score = 0;
  
    // 显示当前难度的猜测目标
    const dataTypeElement = document.getElementById('data-type');
    if (currentDifficulty === 'easy') {
        dataTypeElement.textContent = 'Guess the driver with more wins';
    } else if (currentDifficulty === 'normal') {
        dataTypeElement.textContent = 'Guess the driver with more podiums';
    } else if (currentDifficulty === 'hard') {
        dataTypeElement.textContent = 'Guess the driver with more points';
    }
    
    higherButton.addEventListener('click', onHigherButtonClicked);
    lowerButton.addEventListener('click', onLowerButtonClicked);
  
    resultContainer.textContent = '';
    playAgainButton.style.display = 'none';
  
    showNextDriver();
}

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