来源:AI开发日志公众号专辑「Build Your Own X With AI」
原文链接:https://mp.weixin.qq.com/s?__biz=MzUxMjg3MjE2OA==&mid=2247486265&idx=1&sn=a9770dbf0e7de37ebc2931382823cc01&chksm=f95c90bece2b19a88529dcbf3cd00652ea4ffbe23e9af12d631dee496f26db74ca14500e5c9b#rd

AIDevLog 打字练习 (金山打字通 Clone)

一个受“AIDevLog 打字通”启发的现代 Web 打字练习应用。使用原生 HTML、CSS 和 JavaScript 构建。

功能特点

🎯 练习模式

实时反馈

:即时显示正确/错误的按键视觉提示。

数据统计

:实时追踪 WPM(每分钟字数)、准确率、时间和进度。

虚拟键盘

:带有按键高亮和指法引导(颜色编码的手指区域)的虚拟键盘。

粒子特效

:正确击键时会有令人满足的火花特效。

自定义文本

:支持上传 .txt 文件进行自定义内容练习。

🎮 游戏中心

包含 5 个有趣的打字游戏,让练习不再枯燥:

太空大战 (Space War)

:通过输入单词摧毁来袭的飞船。包含激光和爆炸特效。

打地鼠 (Mole Hunt)

:通过输入地鼠手中的字符来击打它们。

生死时速 (Police vs Thief)

:快速打字帮助警车抓住小偷。

吃苹果 (Apple Catching)

:在苹果腐烂前输入字母接住它们。

青蛙过河 (Frog Crossing)

:通过输入荷叶上的单词帮助青蛙过河。

✨ 视觉优化

动画效果

:流畅的页面切换、粒子特效和游戏动画。

主题设计

:干净、专业的“AIDevLog”风格蓝/白主题。

响应式设计

:适配不同屏幕尺寸。

如何运行

克隆或下载此仓库。

在任意现代浏览器中打开 index.html。

开始打字练习!

截图预览

太空大战 (Space War)

打地鼠 (Mole Hunt)

生死时速 (Police vs Thief)

吃苹果 (Apple Catching)

青蛙过河 (Frog Crossing)

技术栈

HTML5

CSS3 (变量, 动画, Flexbox/Grid)

JavaScript (ES6+)

Created for AIDevLog

https://build-your-own-x-with-ai.github.io/AITyping/

image-1

image-2

image-3

image-4

image-5

image-6