把最近全网都在玩的竹知了，做成一个可以直接在浏览器里甩响的开源版本。
立即在线体验竹知了 · 访问 XBSTACK · 微信公众号：贵州户外
A browser-based, open-source simulation of the traditional Chinese bamboo whirring toy, built with React, TypeScript, Canvas 2D and Web Audio.
唯一官方体验地址：
https://www.xbstack.com/tools/toy-lab/zhuzhiliao/
本仓库不单独运营 GitHub Pages 体验站。所有试玩、分享和推广流量统一回到 XBSTACK，避免产生多个版本和分散搜索权重。
打开页面后可以直接：
- 快速连续点击，提高转速；
- 长按持续加速；
- 拖动鼠标或手指改变甩动轨迹；
- 在支持的手机上开启体感模式；
- 听到由运动能量驱动的“哇—哇—哇”合成音；
- 查看得分、转数、转速和连续响动时间；
- 生成 1080 × 1920 成绩海报并分享。
线上版本还包含竹知了的玩法说明、物理结构、发声原理、常见问题以及童玩实验室的后续项目。
XBSTACK 是一个面向开发者与独立产品实践的个人网站，持续记录和发布：
- AI Agent、LangGraph、MCP、n8n 等开发实战；
- 可直接使用的在线工具与独立产品；
- 传统玩具数字化、互动网页与实验项目；
- 户外、摄影、阅读和长期个人资产建设。
竹知了是 XBSTACK 童玩实验室（Toy Folk Laboratory） 的第 001 号作品。网站负责提供完整在线体验、玩法说明和后续系列；本仓库负责公开可复用的游戏实现。
竹知了的新版本、下一件传统玩具，以及贵州户外、徒步、旅行和山野生活内容，会同步发布在微信公众号 「贵州户外」。
|
JOIN THE JOURNEY 户外探索 · 独立开发 · 投资思考 贵州徒步与路线实测 |
微信扫码关注「贵州户外」
竹知了重新进入大众视野后，互联网上大量内容集中在实物展示、制作教程和商品视频。这个项目尝试补上另一种形式：
- 不需要购买或安装，打开网页就能玩；
- 不只是播放动画，而是用物理状态驱动画面、声音和计分；
- 核心实现可以被学习、修改和迁移；
- 为传统玩具数字化、儿童互动网页和微信小游戏提供一个可复用起点。
- 固定时间步绳摆物理与绳长约束；
- 快速连点叠加切向冲量；
- 长按持续施加驱动力；
- 鼠标、触摸与键盘控制；
- iOS / Android DeviceMotion 体感模式；
- Web Audio 原创“哇—哇—哇”合成音；
- Canvas 2D 原创绘制与运动轨迹；
- 本地最高分、转数、转速和连续响动统计；
- 1080 × 1920 本地分享海报；
- Web Share API 与剪贴板回退；
- 无后端、无账号、无默认第三方统计服务。
src/game/
├── core/ # 无 DOM 的物理、计分、共享类型与自动化测试
├── audio/ # Web Audio 合成器
├── input/ # DeviceMotion 适配
├── render/ # Canvas 2D 绘制
├── share/ # 本地成绩海报
└── components/ # React 交互外壳
core/ 不依赖 React、DOM、Canvas 或 Web Audio，可进一步迁移到微信小游戏、其他前端框架或原生运行时。
npm install
npm run dev生产检查：
npm run test
npm run check
npm run build当前核心测试覆盖：
- 绳长约束；
- 大帧间隔数值稳定性；
- 重置状态；
- 点击冲量与持续加速；
- 计分、连续响动与最高分；
- 分享文案与转数格式化。
这是一个标准 Vite 静态项目，执行 npm run build 后可将 dist/ 部署到：
- GitHub Pages；
- Cloudflare Pages；
- Vercel；
- Netlify；
- 任意静态服务器。
正式产品体验仍建议使用 XBSTACK 线上版本：
https://www.xbstack.com/tools/toy-lab/zhuzhiliao/
开源版本不内置 GA4、百度统计或其他第三方分析。需要埋点时可以监听自定义事件：
window.addEventListener("zhuzhiliao:event", (event) => {
console.log((event as CustomEvent).detail);
});可监听的事件包括开始游戏、重置、声音开关、体感模式、生成海报、保存、分享和达到高分等。
鼠标、触摸、键盘、传感器、成绩和海报均在浏览器本地处理。本仓库不包含用户系统、排行榜或服务端数据上传。
XBSTACK 线上版本只记录匿名产品事件，不上传原始动作轨迹或设备姿态。
欢迎提交 Issue 和 Pull Request。适合继续推进的方向包括：
- 更接近实物的自采样声音；
- 不同地区的竹知了结构与皮肤；
- PWA 与离线模式；
- 微信小游戏适配器；
- 物理参数可视化；
- 可访问性和多语言；
- 更多中国传统玩具互动实现。
提交前请运行：
npm run test
npm run check
npm run buildMIT License。
Original implementation by XBSTACK.