竹知了为什么突然火了？我把它做成了能在手机上玩的网页游戏

竹知了为什么火？我把它做成了能在手机上玩的网页游戏

竹知了为什么火？最近我在社交平台上反复看到它。有人拿它解压，有人把它当成童年玩具复刻，也有人用“1000 万以内最好玩的玩具”来形容这种夸张但很直观的快乐。

它的结构并不复杂：竹筒、薄膜、绳子和木柄。真正让人停不下来的，是手上给一点力，声音和运动状态马上发生变化。它几乎没有学习成本，却会不断让人产生“再快一点、再响一点”的冲动。

我没有去买同款，而是把它做成了一个可以直接在浏览器里玩的小游戏。

手机和电脑都能打开。第一次点击就会旋转，连续点击可以叠加转速，长按能够持续加速，拖动会改变绳子和竹筒的轨迹。使用手机时，还可以主动开启陀螺仪和加速度计体感。

先别看开发过程，直接玩一下

打开竹知了网页版：点一下就开始转

不用注册，不用登录，也不用安装 App。第一次进入后，点击画面中央的竹知了即可获得一次加速；连续点得越快，转速叠加得越明显。

为什么这种简单玩具又能吸引成年人

竹知了重新被关注，并不是一个完全孤立的现象。

QuestMobile 2026 年“童心经济”报告显示，2026 年4月，近30%的18岁以上用户关注“童心”相关品类内容，重度兴趣用户超过2600万。报告还指出，用户需求正从单纯购买和收藏，向动手参与、即时解压和情绪体验延展。查看 QuestMobile 原始报告。

竹知了刚好踩中了这几个点。它有明确的童年记忆，又能立即获得反馈；不用研究规则，也不要求连续投入几十分钟。拿起来就能开始，放下也没有负担。

它形成的反馈链非常短：

给一点力
→ 竹知了立即转动
→ 声音和速度发生变化
→ 用户继续尝试

网页版要还原的，也正是这条反馈链。

我没有播放一段循环动画

最省事的做法，是画一个竹知了，再播放一段不断循环的旋转动画。看起来会动，但用户做什么都不会真正改变它。

我没有采用这种方式。

网页里的竹知了使用 Canvas 2D 实时绘制。绳长、锚点、角速度、阻尼、重力和切向冲量共同决定每一帧的位置。点击、长按和拖动都会修改当前物理状态，下一帧的轨迹由新的状态重新计算。

因此，同一个人连续玩两局，竹知了形成的轨迹、旋转圈数和得分不会完全相同。

声音使用 Web Audio API 根据当前能量实时生成。转速较低时只有轻微声音，能量上升后，音量和音色会一起变化。关闭声音只会静音，不会停止物理模拟。

当前版本会记录本局分数、能量、旋转圈数、有效活跃时间、速度等级和当前设备最高分。最高分只保存在浏览器本地，不要求用户注册账号，也不会把游戏数据上传到服务器。

第一次点击，必须马上转起来

首个版本上线后，我发现了一个很直接的问题。

“按住加速”按钮在画布下面，手机首屏无法完整看到。用户打开页面后，只能先看到标题、分数和竹知了，不继续往下滑，就不知道还有持续加速按钮。

第一次点击也只负责开始游戏，没有立即产生足够明显的速度变化。

放在普通工具里，这可能只是一个小交互问题；放在玩具里，它会浪费最重要的第一秒。

于是我重新压缩首屏，把“按住加速”固定到画布底部，并重新设计点击逻辑：

第一次点击：立即产生加速冲量
连续点击：根据点击间隔叠加转速
长按按钮：持续施加切向驱动力
松开按钮：速度受阻尼影响逐渐下降

连续点击识别窗口设置为420毫秒。在这个时间内继续点击，系统会判断为连续操作，点击频率越快，附加冲量越明显。

用户不必先读完说明，手指本身就能理解玩法。

手机上怎么玩

网页版目前有四种主要输入方式。

点击加速。 点击竹知了或画布，系统立即增加一次旋转冲量。第一次点击不再只是启动游戏，而是会真正让竹知了转起来。

长按持续加速。 按住画布底部的红色按钮，系统会在动画帧中持续施加切向驱动力，适合快速提高能量或维持高速。

拖动改变轨迹。 拖动的不是一张图片，而是绳子的锚点。锚点改变后，竹筒会受到当前速度、绳长和重力共同影响，形成新的摆动轨迹。

手机体感控制。 在支持设备传感器的手机上，可以开启体感模式。倾斜手机会改变锚点偏移，明显的旋转和甩动会转换成一次有边界的加速冲量。

传感器授权失败或浏览器不支持时，点击、长按和拖动仍然可以完整使用。体感是增强输入，不是唯一入口。

转得越快，反馈不应该越乱

我最初考虑过加入点赞、鲜花、掌声、印章和大量粒子动画。但如果每晃一下手机，画面就满屏乱飞，竹知了本身很快会被特效遮住。

最终采用的是根据真实能量分级触发，并为同一级反馈设置冷却时间。

低速时，页面只给出“再给一点力”的轻提示。进入中速后，出现少量竹叶、花瓣、点赞和短振动。能量稳定在较高水平以后，才会触发更明显的轨迹、印章和里程碑反馈。

这些动画不是根据手机晃动次数直接产生，而是由物理模拟后的能量决定。这可以过滤部分传感器噪声，也避免轻轻碰一下手机就出现最高等级奖励。

鼓励应该帮助用户理解当前状态，而不是抢走注意力。竹知了必须始终是画面中心，分数和动画只负责告诉用户：刚才那一下有效。

为什么网页游戏还要支持陀螺仪

很多移动网页只是把电脑页面缩小，交互方式仍然只有按钮。

但竹知了本来就是一个需要手部动作的玩具。如果手机只能点击，虽然可以玩，却没有真正利用移动设备的特性。

体感模式同时读取设备方向、加速度和陀螺仪数据：设备倾斜改变木柄锚点，明显甩动转换成加速冲量，旋转方向改变则影响竹知了的运动方向。

为了避免传感器抖动，输入值会经过边界限制和冷却处理。体感只负责提供输入，真正决定竹知了状态的仍然是物理模拟结果。

手机不再只是播放动画的屏幕，而变成了游戏手柄。

当前通过了哪些验证

竹知了 Web 核心目前有11项自动化测试，覆盖绳长约束、大帧间隔稳定性、点击冲量、长按驱动、低能量停止计分、高能量累计、最高分保留、分享文案、旋转圈数、重置状态和分级反馈。

网站发布前还通过了 Astro 类型检查和生产构建。页面不依赖登录系统，也不依赖后端接口，核心游戏在浏览器本地运行。

这意味着即使后端服务暂时不可用，静态游戏页面仍可以继续打开和游玩。

我为什么把它开源

热点可以带来一次访问，但代码仓库能让项目继续被发现。

竹知了已经拆成独立的 React、TypeScript、Canvas 2D、Web Audio 和 Vite 项目，并以 MIT License 发布：

查看 xbstack/zhuzhiliao-web 开源仓库

仓库没有包含 XBSTACK 主站源码、私有运营逻辑和内部配置，只保留完整游戏实现、技术架构、运行方法、测试和项目说明。

我也没有另外启用 GitHub Pages。唯一官方试玩入口仍然是 XBSTACK 竹知了网页版。这样文章、工具页和开源代码可以形成一条完整路径：

搜索和社交平台
→ 网站文章
→ 竹知了试玩页
→ GitHub 开源代码

从短期热点变成长期网站资产

只写一篇“竹知了为什么火”的热点文章，热度过去以后，页面价值会快速下降。只做一个小游戏，如果没有解释页面和搜索入口，大多数人也不会知道它存在。

这次我把三件事连在一起。

文章承接“竹知了是什么”“竹知了为什么火”“竹知了怎么玩”等信息型搜索；竹知了试玩页 承接“竹知了网页版”“竹知了小游戏”等体验需求；GitHub 仓库承接开发者对 Canvas、物理模拟、Web Audio 和设备传感器实现的兴趣。

短期热点负责把人带进来，真实产品负责让用户留下来，开源代码负责让项目继续获得引用和外部链接。

这才是这个项目对 XBSTACK 真正的价值。

现在直接开始玩

不用下载，也不用登录。手机和电脑浏览器都可以直接打开，声音可以关闭，体感可以自行决定是否开启，最高分只保存在当前设备。

打开竹知了网页版：第一次点击就会立即加速

竹知了是 XBSTACK 童玩实验室 的第001件玩具。下一步不是无止境增加功能，而是继续判断：还有哪些旧玩具，值得被重新翻译成今天依然好玩的交互。

更新记录

2026年8月5日： 竹知了网页版首版上线，支持鼠标、触摸、键盘和手机体感。

2026年8月6日： 增加第一次点击立即加速和连续点击叠加转速；压缩手机首屏，把长按加速放进画布；完成独立 GitHub 开源仓库和网站回链。