用原生 JavaScript 开发网页小游戏：计时、状态管理与成绩记录实践

开发一个浏览器里的反应测试，最初看起来只需要几行代码：等待屏幕变色、记录点击时间，再把毫秒数显示出来。换成瞄准训练，无非是生成目标、处理命中；换成舒尔特方格，也像是打乱一组数字后逐个判断。

但这三种玩法真正需要处理的问题不完全一样。反应测试对状态切换和计时起点敏感；瞄准训练需要区分命中、失误以及不同模式的成绩；舒尔特方格则要保证数字排列正确，并且不能把不同配置的记录混在一起。

最近在整理自己开发的网页测试时，我觉得这些细节比“如何用 JavaScript 做一个小游戏”本身更值得分享。下面用三个实际玩法举例，说明几种可以复用的前端实现思路。

一、反应测试：先处理状态，再考虑毫秒数

 为例，流程很短：开始后进入等待状态，屏幕在随机时间后变绿，用户点击后得到结果。这里最容易犯的错误，是把这些阶段都交给点击事件中的条件判断处理。

下面这段代码展示了核心状态切换。假设页面上已经有 

这段示例主要解决两类问题：提前响应不能成为正常成绩，以及一轮测试只能结束一次。随机等待也能减少用户按照固定节奏预判信号的情况。

 的时间分辨率，不等于网页反应时间的实际测量准确度。

示例是在 JavaScript 修改背景色后记录时间戳，而屏幕何时真正显示绿色，还受到浏览器渲染、显示器刷新时序等因素影响；输入设备也会引入额外延迟。

因此，这类网页测试更适合在相近设备条件下比较多次结果，不适合作为经过硬件校准的生理反应测量。

实际页面还需要处理页面切到后台、计时器被延后执行、重启时取消旧任务等问题。这些并不显眼，却是计时类交互能否稳定运行的关键。

二、瞄准训练：先定成绩规则，再写事件处理

 看似就是“点击一个目标，再出现下一个”。但如果有不同模式，成绩定义就不能混为一谈。

以实际的三种玩法为例：完成 30 个目标时，主要成绩是每次命中的平均用时；固定 30 秒和移动 30 秒两种模式，则主要统计成功命中数。

前者越低越好，后两者越高越好。不同模式下，点空和目标超时的处理规则也并不相同。

例如，鼠标和触屏可以统一用 Pointer Events 处理，而不是分别监听 

，避免维护两套容易产生差异的逻辑：

这里有意没有把“点空就扣一条命”写死在通用输入逻辑中，因为并不是每种玩法都采用相同的失误规则。

一个更稳妥的结构，是让输入层只产生 

，由模式逻辑决定成绩和状态如何变化。

移动端还需要注意点击区域大小、页面滚动和浏览器默认手势。

 设置减少不必要的手势干扰，但不应对整个页面无差别禁用滚动。键盘用户的操作则应另外提供可访问的控件或输入路径。

三、舒尔特方格：随机排列不难，难的是保持规则和记录可比

 的经典玩法，是把一组数字打乱后放入网格，再要求玩家按顺序依次找出。

这里有两个独立问题：如何保证每个数字恰好出现一次，以及如何区分不同配置下的结果。

1. 使用 Fisher–Yates 算法打乱数字

生成数字时，可以先得到从 1 到 N 的完整序列，再使用 Fisher–Yates 洗牌，而不是随机取数、遇到重复再反复抽取。

 可以用于这种非安全敏感的排列；但它不适合要求密码学安全性的抽奖等场景。

洗牌之后，整轮游戏应保持同一组排列，不要因为每次计时更新或界面重新渲染就再次打乱数字。

2. 不同配置下的成绩，需要分别记录

4×4 和 5×5 的完成时间显然不能直接比较；正序、倒序以及不同布局，也需要和各自的配置对应起来。

放在同一个存储键下，每组最多保存 20 条记录。

示例也处理了存储内容异常或浏览器禁止存储时的情况。正式实现还应检查数据字段是否合法，并明确未完成测试是否保存。

 的优点是无需登录、关闭网页后通常仍能保留记录；局限是不同设备之间不会自动同步，用户清除站点数据后记录可能消失。

如果项目未来需要跨设备排名、共享成绩或防止数据篡改，单纯依赖本地存储就不够了。

四、三个小项目里可以复用的设计方法

这三个测试的规则不一样，但可以抽出一组很实用的思路：

开发这类小工具时，最初的功能通常不难完成。真正会反复出现的，是状态是否收得住、成绩是否算得清、移动端能不能顺手操作，以及用户是否能理解结果的适用范围。

以上三个例子来自我自己维护的浏览器测试项目。各章节已经附上对应的实际页面，方便对照交互过程。文中的代码用于解释思路，并不表示线上项目逐行采用了这些写法。

如果把具体测试名称去掉，状态控制、事件分层和按配置保存记录，同样适用于计时器、小型交互工具和其他浏览器应用。

对我而言，这也是做这些小游戏时比较值得留下来的经验。

人工智能

用原生JavaScript开发反应测试、瞄准训练和舒尔特方格三种网页小游戏时，需重点处理状态管理、事件分层和成绩记录。本文通过实际代码示例，解析如何用状态机控制计时逻辑、用PointerEvents统一鼠标触屏事件，以及通过带版本的本地存储结构保存不同配置的成绩，避免数据混淆，提升交互稳定性和可复用性。

JavaScript

JSON

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

用原生 JavaScript 开发网页小游戏：计时、状态管理与成绩记录实践

用原生 JavaScript 开发网页小游戏：计时、状态管理与成绩记录实践

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐