如何使用 HTML 按钮修改打字游戏的 JavaScript 计时器值

使用按钮进行打字游戏的动态计时器调整

在打字游戏中，控制游戏节奏对于确保引人入胜的用户体验至关重要。一个重要因素是计时器，它决定用户需要多长时间才能完成游戏或打字挑战。通过允许用户通过简单的 HTML 按钮调整游戏计时器，您可以让他们更好地控制自己的游戏玩法。

本文将向您展示如何使用 JavaScript 创建一个解决方案，允许玩家使用按钮在不同的计时器设置之间进行选择。例如，选择“30 秒”按钮会将计时器调整为 30 秒，而单击“60 秒”按钮会将其更改为 60 秒。

JavaScript 函数将从单击的按钮中获取值并动态更新计时器和游戏标题。这种灵活性可以增强用户体验，使游戏对于不同技能水平的人来说更具可定制性和乐趣。

读完本指南后，您将拥有使用 HTML 和 JavaScript 的功能齐全的计时器调整功能。我们还将介绍如何更新页面标题上显示的计时器值以反映所选的计时器持续时间。

命令	使用示例
document.querySelector()	用于选择 HTML
addEventListener()	将特定事件（例如单击）绑定到按钮元素。在此上下文中，它用于在用户单击按钮时触发 changeTimer() 函数，从而允许与计时器设置进行动态交互。
innerText	此属性允许修改 HTML 元素内的可见文本。在此解决方案中，它用于在单击按钮时更新页面标题中的计时器值。
onClick	替代方法中使用的内联事件处理程序属性，用于将 ChangeTimer() 函数直接附加到按钮的单击事件。这允许以更简单、模块化程度较低的方式动态更新计时器。
test()	此方法用于 Jest 的单元测试。它定义了一个测试用例，其中评估正在测试的函数（例如，changeTimer()）以确保计时器正确更新。它确保代码在不同场景下的行为符合预期。
expect()	一个 Jest 命令，用于检查实际值（如更新的计时器）是否与预期值匹配。它在单元测试中用于验证单击按钮后 gameTime 和 document.title 是否正确更新。
toBe()	另一个检查严格相等的 Jest 命令。它确保在调用changeTimer()之后，游戏时间正是预期的（例如，30秒为30,000毫秒）。
getElementById()	用于按 ID 选择特定按钮（例如“三十”、“六十”）。此方法对于将事件侦听器附加到按钮并触发计时器的动态变化以响应用户交互非常重要。

使用 JavaScript 和 HTML 按钮创建动态计时器

上面提供的脚本旨在允许用户通过单击 HTML 按钮来动态调整打字游戏中的游戏计时器。首先，我们声明一个变量 ，以毫秒为单位保存时间（默认为 30 秒，乘以 1000 以转换为毫秒）。关键功能在于 函数，它根据单击的按钮更新计时器值。此方法接收按钮的值（例如 30、60 或 90）并更新 比赛时间 相应地变化。此外，该脚本还会更新页面标题以反映所选的计时器持续时间，让用户清楚他们有多少时间。

对于动态行为，我们利用事件监听器，特别是 命令。这允许脚本在用户单击任何按钮时做出反应。每个按钮都分配有一个 ID，单击时会触发 函数，传递各自的时间值。此方法对于高效处理多个按钮非常有用，无需在 HTML 结构中重复使用内联 JavaScript。该脚本还包括一个后备选项，您可以在其中使用内联事件处理程序，例如 如果简单性优于模块化。

在替代解决方案中，我们直接将 事件到按钮。该方法执行 单击按钮后直接起作用。这是一种简单的方法，但缺乏事件侦听器方法的灵活性。这种方法的简单性对于较小、不太复杂的应用程序很有用。然而，对于更具可扩展性的代码，事件侦听器提供了更大的灵活性，并且允许更轻松地更新脚本，而无需直接修改 HTML 结构。两种方法都旨在解决同一问题，即根据用户的选择调整计时器并动态更新标题。

最后，我们使用 JavaScript 测试框架 Jest 实现单元测试。这 函数对于验证计时器是否正确更新至关重要。通过测试多个场景，例如定时器是否调整为30秒、60秒或90秒，这些单元测试保证了脚本的正确性。命令如 和 用于验证实际计时器值和页面标题是否与预期结果匹配。此测试阶段可确保您的计时器逻辑在不同的用例中正常运行，从而为您的解决方案的稳健性提供信心。

// Solution 1: Using event listeners to change timer value dynamically
let gameTime = 30 * 1000; // Default timer set to 30 seconds
const titleElement = document.querySelector('title');
function changeTimer(value) {
    gameTime = value * 1000; // Update timer to selected value
    titleElement.innerText = value + 's'; // Update the title
}
// Attach event listeners to buttons
document.getElementById('thirty').addEventListener('click', () => changeTimer(30));
document.getElementById('sixty').addEventListener('click', () => changeTimer(60));
document.getElementById('ninety').addEventListener('click', () => changeTimer(90));
// HTML Buttons:
// <button id="thirty" type="button">30s</button>
// <button id="sixty" type="button">60s</button>
// <button id="ninety" type="button">90s</button>

<script>
let gameTime = 30 * 1000;
function changeTimer(value) {
    gameTime = value * 1000;
    document.title = value + 's';
}
</script>
<button onClick="changeTimer(30)">30s</button>
<button onClick="changeTimer(60)">60s</button>
<button onClick="changeTimer(90)">90s</button>

// Jest Test Cases
test('Timer should update to 30 seconds', () => {
    changeTimer(30);
    expect(gameTime).toBe(30000);
    expect(document.title).toBe('30s');
});
test('Timer should update to 60 seconds', () => {
    changeTimer(60);
    expect(gameTime).toBe(60000);
    expect(document.title).toBe('60s');
});
test('Timer should update to 90 seconds', () => {
    changeTimer(90);
    expect(gameTime).toBe(90000);
    expect(document.title).toBe('90s');
});

通过计时器自定义增强游戏交互

更改打字游戏中的计时器时要考虑的另一个方面是整体用户体验和界面。除了通过按钮调整游戏计时器之外，为玩家提供有关所选计时器的视觉反馈也很重要。这可以通过更新页面上的其他元素（例如倒计时显示）来实现。单击按钮设置计时器后，倒计时器应立即启动，为用户提供实时反馈。这确保了交互的流畅和直观，使游戏更具吸引力。

要实现这一点，您可以使用 JavaScript 功能。定时器设定好后， 设置时间间隔 可用于创建倒计时，每秒减少计时器值。当计时器达到零时，该函数可以停止游戏或提醒用户时间已到。此功能与使用按钮动态更改计时器的功能相结合，显着增强了游戏体验。响应式界面是保持玩家参与度的关键，而实时反馈是实现这一目标的一种方法。

此外，还应考虑错误处理。例如，如果用户尝试在未设置计时器的情况下开始游戏，您可以通过消息提示他们选择有效时间。通过整合验证机制，您可以确保游戏顺利运行并减少潜在问题。这种类型的验证不仅可以改善用户体验，还有助于提高游戏的可靠性，确保玩家不会遇到不必要的困惑。

1. 我该如何使用 创建倒计时？
2. 您可以使用 通过将其设置为每 1000 毫秒（1 秒）执行一次并每次减少计时器值。当值达到零时，您可以使用以下命令停止倒计时 。
3. 目的是什么 ？
4. 用于停止倒计时或由以下命令启动的任何其他重复操作 。确保倒计时在达到零时停止至关重要。
5. 如何动态更新 HTML 标题？
6. 使用 设置页面标题的文本。这可以在您的 基于所选时间值的函数。
7. 选择计时器时我可以处理用户错误吗？
8. 是的，您可以通过在开始倒计时之前检查是否选择了有效的计时器选项来添加验证。如果未选择有效时间，您可以显示警报或提示。
9. 单击按钮时如何触发函数？
10. 您可以使用以下方法将功能附加到按钮 或者直接使用 在按钮的 HTML 元素中。

在打字游戏中加入动态计时器调整可显着改善玩家体验。通过允许用户使用简单的 HTML 按钮更改计时器并实时更新游戏界面，开发人员可以使他们的游戏更具互动性和灵活性。这种类型的控制有助于适应不同的技能水平。

使用事件侦听器、错误处理和单元测试等最佳实践可确保游戏顺利运行并提供可靠的用户体验。实现这些功能不仅可以增强游戏的功能，还可以让玩家更多地参与响应灵敏、用户友好的机制。