本文将详细介绍如何在 javascript 测验游戏中，确保当所有问题都被回答完毕时，游戏能够立即结束，而无需等待计时器归零。我们将分析现有代码中的不足，并提供一个简洁有效的解决方案，通过检查当前问题索引与问题总数的逻辑，实现游戏的即时终止，并停止计时器。
JavaScript 测验游戏：实现所有问题回答完毕后立即结束游戏
在开发基于 JavaScript 的测验（Quiz）游戏时，一个常见的需求是游戏不仅要在计时器归零时结束，还应在所有问题都被回答完毕后立即终止。本文将深入探讨如何优雅地实现这一功能，确保用户体验的流畅性。
问题分析
在许多测验游戏的初始实现中，游戏结束的逻辑往往主要依赖于计时器。例如，当计时器倒计时到零时，游戏才进入结束状态。然而，如果玩家在计时器到期之前回答完了所有问题，游戏却仍然停留在最后一个问题界面，等待计时器走完，这会造成不必要的延迟和用户困惑。
我们来看一个典型的 nextquestion 函数实现：
function nextquestion(event) { if (event.target.className === "btn") { // ... 处理答案逻辑，计算分数或扣除时间 ... currentQuestion++; // 移动到下一个问题 displayQuestion(); // 显示下一个问题 }};
这段代码的问题在于，它在 currentQuestion 递增之后，直接调用 displayQuestion() 来显示下一个问题，而没有检查是否已经没有更多问题了。如果 currentQuestion 超出了 questionKey 数组的范围，displayQuestion() 将尝试访问一个不存在的索引，可能导致错误，更重要的是，游戏不会进入结束状态。
立即学习“Java免费学习笔记（深入）”；
解决方案：检查问题完成状态
要解决这个问题，我们需要在每次处理完一个问题并准备显示下一个问题之前，增加一个逻辑判断：检查 currentQuestion 是否已经达到了问题数组的总长度。如果达到，则意味着所有问题都已回答完毕，此时应该立即调用 gameOver() 函数来结束游戏，并停止计时器。
以下是修改后的 nextquestion 函数的关键部分：
// ... 其他代码 ...let timeInterval; // 将 timeInterval 声明为全局变量，以便在任何地方清除// ... startTimer 函数 ...function startTimer() { timeInterval = setInterval( () => { timeLeft--; document.getElementById("timeSpan").innerHTML = timeLeft; if (timeLeft <= 0) { clearInterval(timeInterval); gameOver(); } }, 1000 );};// ... displayQuestion 函数 ...function nextquestion(event) { if (event.target.className === "btn") { // ... 处理答案逻辑，计算分数或扣除时间 ... currentQuestion++; // 移动到下一个问题 // 关键改动：检查是否所有问题都已回答完毕 if (currentQuestion === questionKey.length) { clearInterval(timeInterval); // 停止计时器 gameOver(); // 结束游戏 } else { displayQuestion(); // 显示下一个问题 } }};// ... gameOver 函数 ...
解释：
currentQuestion++: 在玩家选择一个答案后，currentQuestion 递增，指向下一个问题。if (currentQuestion === questionKey.length): 这是核心判断。questionKey.length 返回问题数组中问题的总数。由于数组索引是从 0 开始的，当 currentQuestion 的值等于 questionKey.length 时，意味着我们已经遍历并回答了所有问题（例如，如果总共有 5 个问题，索引从 0 到 4，那么当 currentQuestion 变为 5 时，所有问题都已回答）。clearInterval(timeInterval): 在所有问题回答完毕后，计时器就不再需要运行了。调用 clearInterval 函数并传入 setInterval 返回的 ID (timeInterval)，可以停止计时器。请确保 timeInterval 是在 startTimer 函数外部声明的，以便 nextquestion 函数可以访问它。gameOver(): 立即调用 gameOver() 函数，将游戏切换到结束页面，并显示最终分数。else { displayQuestion(); }: 如果还有未回答的问题，则继续调用 displayQuestion() 来显示下一个问题。
完整示例代码
为了更清晰地展示，以下是包含上述修改的完整 JavaScript 代码片段：
// calling in id/class from HTML const questionEl = document.getElementById("question");// checkers 元素在原始HTML中没有对应的ID，如果不需要可移除或根据实际情况添加ID// const checkers = document.getElementById("right-wrong"); const timerEl = document.getElementById("timeSpan"); // 更正为getElementById，因为只有一个timeSpanconst answerOne = document.getElementById("answer1");const answerTwo = document.getElementById("answer2");const answerThree = document.getElementById("answer3");const answerFour = document.getElementById("answer4");const finalScoreEl = document.getElementById("pointScore");const nameEl = document.getElementById("initials");const highScoreEl = document.getElementById("highScoreList");var questionKey = [ { question: "which variable has the value of a string.", choiceOne: "x = 6", choiceTwo: "x = "87"", choiceThree: "x = true", choiceFour: "x;", answer: "x = "87"" }, { question: "choose the operator that checks for value and type.", choiceOne: "=", choiceTwo: "+=", choiceThree: "===", choiceFour: " 85", choiceThree: "7 === "7"", choiceFour: "7.6 == "7.6"", answer: "7.6 == "7.6"" }, { question: "which data type is not primitive.", choiceOne: "boolean", choiceTwo: "array", choiceThree: "number", choiceFour: "string", answer: "array" }, { question: "Which one is the Increment operator.", choiceOne: "**", choiceTwo: "/", choiceThree: "++", choiceFour: "+=", answer: "++" }];// starting positionslet timeLeft = 60;let score = 0;let currentQuestion = -1;let finalScore;let timeInterval; // 声明 timeInterval 以便在任何函数中访问// change div to start the testfunction changeDiv(curr, next) { document.getElementById(curr).classList.add('hide'); document.getElementById(next).removeAttribute('class');}// button to start the gamedocument.querySelector('#startButton').addEventListener('click', gameStart);function gameStart() { changeDiv('start', 'questionHolder'); currentQuestion = 0; displayQuestion(); startTimer();}// timer function/Count downfunction startTimer() { timeInterval = setInterval( () => { timeLeft--; document.getElementById("timeSpan").innerHTML = timeLeft; if (timeLeft = 10) { console.log(timeLeft); timeLeft = timeLeft - 10; document.getElementById("timeSpan").innerHTML = timeLeft; console.log("not correct"); } else { timeLeft = 0; gameOver(); // 如果时间不足10秒，直接结束游戏 } } currentQuestion++; // IF THERE ARE NO MORE QUESTIONS, CALL gameOver if (currentQuestion === questionKey.length) { clearInterval(timeInterval); // 停止计时器 gameOver(); // 结束游戏 } else { displayQuestion(); // 显示下一个问题 } }}// the game is over and logs your current scorefunction gameOver() { document.getElementById("timeSpan").textContent = 0; // 直接设置span的文本 changeDiv('questionHolder', 'finishedPage'); finalScore = score; finalScoreEl.textContent = finalScore;}
注意事项与最佳实践
以上就是JavaScript 测验游戏：实现所有问题回答完毕后立即结束游戏的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1588522.html
微信扫一扫 
支付宝扫一扫 
