普通视图
联合利华与谷歌云达成五年合作
对话王兴兴:搜遍全世界武术招式,宇树如何超越宇树
文|邱晓芬
编辑|苏建勋
除夕之夜,2026年马年春晚还没结束,我们在北京大兴星光影视园的机器人训练基地里,见到了刚从总台录制现场匆匆赶回的宇树科技创始人王兴兴。
时间已接近午夜,但王兴兴依旧兴奋,他对宇树当晚的节目《武术BOT》的演出效果很满意——交流中,当王兴兴聊到技术细节时,平时内向的他,不断用肢体动作演示机器人打斗,语气也亢奋了许多。
![]()
宇树科技创始人王兴兴 ;“智能涌现”拍摄
“演出结束后,心里的大石头落了地。”尽管已是第三度登上春晚,王兴兴依然压力不小,“不能说去年我们跳了个舞,今年再跳舞,这没有太多挑战。”他对“智能涌现”说到。
从节目效果来看,宇树的努力没有白费。
在《武BOT》节目中,宇树科技24台机器人G1与数名人类演员“对打”耍拳,并做出种种高难度动作——花式翻桌跑酷、单脚连续空翻、两步蹬墙后空翻、大回旋七周半等等。
王兴兴告诉我们,为了比去年的春晚节目效果更进一步,他们特意选择了能更好呈现机器人动作的武术形式。
为此,宇树与春晚导演组遍寻了全世界所有武术招式,从中提炼出最有代表性的几十个动作。而这套行云流水的武术招式背后,也带来了复合的技术挑战。
如果仔细观察也可以发现,2025年的宇树《秧BOT》里,机器人不同动作之间的连接,靠的是慢腾腾挪动走位。而2026年的《武BOT》里,机器人的间隙动作则是快速跑位。这项全新开发的能力,让机器人最快能跑到4米/秒。
![]()
上/下图分别为2025/2026年的宇树春晚节目对比,可以看出宇树机器人形态更成熟,没有外露线束,腿部线条更拟人,还长出了真正的“手”;图片来源:春晚视频截图
当机器人的数量变多,这也对背后的调度工作提出了更高的要求。据了解,宇树为此也开发了集群控制技术。
也就是说,24台机器人在舞台上不用操作员费力盯走位,依靠一颗机载传感器就能实时感知环境。当机器人因武术动作幅度过大导致位置偏移时,也能自主归位。
在王兴兴看来,《武BOT》绝不仅仅只是一场单纯的武术表演,背后攻克的技术,未来能在实际场景中发挥价值。
比如刚刚谈到的机器人集群控制技术、快速走位能力,都可以迁移到工厂场景中,“这些技术非常实用,有利于未来的机器人大规模集群化干活。”王兴兴说到。
显然,在《武BOT》背后,潜藏着宇树在2026年拓展更多场景的野心。
2025年登上春晚后,宇树为整个机器人行业开辟出“商业演出”的收入模式。2026年,王兴兴谈到,在应用场景方面,除了原先的基本盘之外(消费端、科研教育、商业演出),宇树还计划扩充在工业领域、商业服务的落地应用。
据王兴兴预计,2026年宇树的出货量或将达到一到两万台左右。
“人形机器人最大的市场增长,正是来自于技术成熟,当技术越来越有价值时,整个市场规模就慢慢打开了”,王兴兴表示。
以下是“智能涌现”等媒体与宇树科技创始人王兴兴的对谈实录,略经摘编:
最大的压力是如何超越去年
智能涌现:我很好奇你们这次武术表演的灵感来源是什么?
王兴兴:我们一直希望比过去做得更好,所以不能说去年我们跳了个舞,今年再去跳舞,这没有太多的挑战。
之所以选择武术,是因为我们可以挑战更高难度的动作,让机器人的运动能力进一步提升,无论是快速跑位能力、运动极限能力。
智能涌现:《武BOT》这个节目顺利完成了,你现在有什么感受?
王兴兴:过去的一两个月时间内,我个人压力还是很大的,因为我们希望在春晚舞台上呈现比去年好得多的节目,所以必须要有更出彩的表演内容和节目形式。
我们和导演组做了很多沟通,甚至罗列了全世界所有的功夫动作,让机器人去复刻学习了一遍,最后筛选了其中比较好的几十个动作,呈现到节目里面。
这个节目不只是采集的一些动作教机器人就好,为了让整个动作更加连贯,卡音乐节奏和时间,以及有人机交互的感觉,我们做了很多微调整,花了非常多时间。
这次表演后,我觉得心里的石头放了下来。
智能涌现:马年春晚有这么多家企业同台竞争,对于行业的意义是什么?
王兴兴:行业热起来以后,有更多的创业公司进来,这是非常正常的一件事情。
但对于宇树来说,我们最大的竞争对手永远还是自己,我们要把这次的舞步做好,最大的压力是我们去年的《秧BOT》,我们希望在各种的技术、产品的最终效果上超越去年的节目。
所以我们各种动作设计都是精益求精的,希望达到比世界尖端水平更尖端一点。
![]()
武BOT节目截图
智能涌现:你刚刚提到快速跑位能力、运动极限能力,这两项能力对你们具体的挑战是什么,实际遇到了哪些难题?
王兴兴:遇到的难题非常多。我们为了实现节目效果,完成了很多全球人形机器人历史上的第一次。
举个例子,去年我们的节目《秧BOT》,机器人表演动作的间隙是依靠走位完成的, 就是慢慢腾腾地走过去表演下个动作,但是这种节奏在节目呈现里肯定是不好看的。所以,我们这次机器人是快速跑位。
高速跑位的能力,我们是专门为这次春晚节目开发的,可以在任意轨迹里跑来跑去,最快速度能达到4米/秒。这个技术非常实用,有利于未来的机器人大规模集群化干活。
另外,我们在这个节目里,挑战了很多极限动作。比如,有一个比较有趣的动作“两步登墙”,机器人在墙上踩两步就可以飞很高。
其实一开始我们做出来的时候,机器人大概只能在墙上踩一步,但我们觉得这样太没有挑战,所以就又优化了很长的时间,让它能在墙上踩两步,跳得更高,动作效果更好。
智能涌现:这次表演具体准备了多长的时间?
王兴兴:去年11月份开始准备的,主要是筛选武术动作、编排剧情、动作微调比较费时间。
智能涌现:这次舞台上的机器人,动作难度都很大,在集群协同等方面有哪些核心的突破?
王兴兴:我们今年机器人的数量多了很多,去年是16台,今年光G1就有24台,而且机器人的队形也是比较整齐的。
当机器人耍功夫的时候,动作剧烈时,每台机器会有微略微的漂移,所以我们开发了定位技术,可以把机器人拉回到固定位置,保证动作的整齐划一、美观。
智能涌现:有一个机器人摔倒又站起来的动作,是真的摔了吗,还是故意设计出来的?
王兴兴:是剧情需要,这个节目是有表演性质的节目,必须有些趣味性在里面。醉拳本身要有一种要倒不倒的感觉,如果机器人倒了以后再自己起来,就显得非常帅,也很符合醉拳的意境。
智能涌现:这么多机器人厂商今年上春晚,你认为春晚对于机器人厂商而言,价值是什么?
王兴兴:我觉得春晚是一个很好的展示平台,也是向全国人民做一个产品和技术的汇演,让大家真正看到当前机器人技术发展到什么水平。
技术成熟决定市场成熟
智能涌现:2026年,宇树在模型算法、应用场景上大概有哪些战略重点?
王兴兴:模型上,我们尝试的路线非常多。现在具身智能模型的路线没有那么统一,比如世界模型、 VLA模型、 VLA+强化学习模型等等。
关于具身智能机器人大脑,我们也在探索各种前沿的可能性,也跟第三方公司合作,因为这个事情确实说不好,在AI的开发领域,很多情况下确实存在一些运气成分。
在具身大脑这部分,我们保持开放的态度。具身大脑现在还没有明显有哪一家做得特别好,目前全球都还没有突破大脑的天花板。
商业化应用场景上,除了我们做的消费端、科研、教育,未来,在工业领域、商业服务,宇树都会更积极去拓展。
其实我们2024年就在推动人形机器人在汽车工厂里做生产、装配、搬运,但这个领域确实目前还没有达到大规模的应用,工厂落地是非常现实的,就是跟人比效率,但是机器人和人的效率相比,全世界大家都还比不过。
智能涌现:To C是你们接下来的重点吗?
王兴兴:我们的机器狗、人形机器人一直有 Toc 产品,京东淘宝上就有,其中R1人形机器人售价2.99万起。
智能涌现:除了舞台表演,今年的机器人还会有哪些可以落地到生活场景当中的新用途?
王兴兴:目前机器人的情况是这样的:如果一个场景里专门编一套程序,那机器人是可以运行的,但是对于大众来说,每家每户的家庭场景都不一样,我们不可能给每个家庭单独写一套程序,因为机器人的具身智能大脑还是不够通用,所以大规模应用还是相对早期。
但是我觉得,今年或明年,在导览或者相对固定的工业场景上,已经能达到比较好的落地效果。
当前这一波人形机器人的浪潮只发展了三年左右,在技术早期的时候,如果用力过猛去推动,揠苗助长,我觉得对这个行业来说可能有点太激进了。
智能涌现:机器人表演节目的意义是让大家先对它感兴趣,但是要真正走进生产和生活的话,具体要怎么做?
王兴兴:我们一直非常重视让机器人真正走进生活干活,但这个阶段大家还是属于早期探索,我们目前还是尽可能提高整个机器的运动能力。
我们相信真正能干活的机器人,肯定是运动能力非常强的,运动能力是所有的机器人或者具身智能落地的先决、必要条件。
我认为对于整个智能的进化阶段来说,运动能力是一个先决的必要能力,运动能力提升后,再把智能水平提升,让它可以真的去干活。
智能涌现:有一些分析预测认为,2026年的本体可能会从数千台到数万台,您对这个判断是否认同?
王兴兴:2026年全世界人形机器出货量至少也有几万台,我们应该也会达到一到两万台左右。对于人形机器人来说,最大的市场增长其实来自于技术成熟,当技术越来越有价值时,整个市场规模就慢慢打开了。
如果今年有持续的技术进步,我认为整个市场规模增长应该是比较可预期的,但如果技术和产品没有新进步,整个出货量可能就没那么乐观了。
智能涌现:机器人公司现在遍地开花,这是机器人技术成熟的必然,还是资本短期推动?
王兴兴:目前全球的机器人浪潮非常热,如果真正跟机器人技术成熟以后大规模的应用去对比,现在的热度还是相对可控的。
每一波技术科技浪潮都有浪尖和低谷,目前可能是在浪尖上,但是大家可能也会渐渐觉得平淡。我觉得最大的原因是,所有人都对科技有期待,当然也有投资进来推动的因素,但我觉得目前整个行业还是良性的。
智能涌现:你认为,要如何避免行业出现低水平重复建设?
王兴兴:目前行业有很多资金进到行业里,所以同质化竞争是非常严重的问题。我倡议大家还是要合理克制竞争,不要恶意无效竞争,比如大家都在亏本卖机器人的时候,我觉得就会把这个行业做砸了。
智能涌现:宇树的团队今年除了准备节目之外,是不是也有去做一些其他的准备,比如说产能提升、交付、销售等等方面?
王兴兴:去年因为公司的关注度高了,订单也变多了,所以我们在去年的上半年面临很大的产能压力。这次我们肯定是提前多备了些货。同时,我们也在把销售和售后服务体系做得更好一些。
智能涌现:目前具体的产能状况如何?
王兴兴:目前阶段我们的人形机器人产能至少一年能产小几万台,机器狗也有几万台的产能。
智能涌现:现在很多机器人厂商倒在交付这个环节,你觉得在交付上存在哪些坑?
王兴兴:交付非常重要,因为只有机器人卖到客户手里,才能让商业闭环。
我觉得售后是非常重要的一件事情,客户在使用的过程中肯定会遇到一些问题,可能本身并不是机器人产品本身的问题,而是机器人太新了,客户在使用的过程中没那么熟悉。
所以我们也会尽可能帮客户解决使用上的问题,完善产品的易用性,让产品可以傻瓜式使用。
![]()
end
英国2025年年底的薪资增长速度有所放缓
软银与Ampere Computing联合测试使用CPU运行小型人工智能模型
国铁广州局2026年春运节前到发旅客6029万人次,创历史新高
【节点】[MainLightColor节点]原理解析与实际应用
在Unity URP渲染管线中,光照计算是创建逼真视觉效果的核心环节。Main Light Color节点作为Shader Graph中的重要组件,专门用于获取场景中主定向光源的颜色属性信息。这个节点为着色器艺术家和图形程序员提供了直接访问场景主要光源颜色数据的能力,使得材质能够对场景中最主要的光源做出精确响应。
Main Light Color节点在URP着色器开发中扮演着关键角色,它不仅仅返回简单的RGB颜色值,而是包含了完整的光照强度信息。这意味着开发者可以获取到经过Unity光照系统处理后的最终颜色结果,包括所有相关光照计算和后期处理效果的影响。这种直接访问方式大大简化了自定义光照模型的实现过程,使得即使是没有深厚图形编程背景的艺术家也能创建出专业级的光照响应材质。
在实时渲染中,主光源通常指场景中的主要定向光源,如太阳或月亮。Main Light Color节点正是针对这种关键光源设计的,它能够动态响应光照条件的变化,包括日夜循环、天气系统或游戏剧情驱动的光照变化。这种动态响应能力使得材质能够与游戏环境保持视觉一致性,创造出更加沉浸式的体验。
描述
Main Light Color节点是Shader Graph中专门用于获取场景主光源颜色信息的内置节点。该节点输出的颜色信息不仅包含基本的RGB色彩值,还整合了光源的亮度强度,形成了一个完整的颜色-强度组合数据。这种设计使得开发者可以直接使用该输出值参与光照计算,无需额外的强度调整或颜色处理。
从技术实现角度来看,Main Light Color节点在背后调用了URP渲染管线的内部函数,特别是GetMainLight()方法。这个方法会分析当前场景的光照设置,确定哪一个是主光源,并提取其所有相关属性。对于颜色信息,节点会综合考虑光源的基础颜色、强度值,以及任何可能影响最终输出的后期处理效果或光照修改组件。
在实际应用中,Main Light Color节点的输出值代表了主光源在当前渲染帧中对表面点可能产生的最大影响。这个值会根据光源的类型、设置和场景中的相对位置自动计算。对于定向光源,颜色和强度通常是恒定的(除非有动态修改),而对于其他类型的光源,可能会根据距离和角度有所不同。
该节点的一个关键特性是其输出的颜色值已经包含了亮度信息。这意味着一个强度为2的白色光源不会返回(1,1,1)的纯白色,而是会根据强度进行相应的亮度提升。这种设计决策使得节点输出可以直接用于光照计算,无需开发者手动将颜色与强度相乘,简化了着色器的构建过程。
Main Light Color节点在以下场景中特别有用:
- 创建对动态光照条件响应的材质
- 实现自定义的光照模型
- 开发风格化的渲染效果
- 构建与场景光照紧密交互的特效系统
- 制作适应日夜循环的环境材质
技术实现细节
从底层实现来看,Main Light Color节点对应于HLSL代码中的_MainLightColor变量。在URP渲染管线中,这个变量在每帧开始时由渲染系统更新,确保着色器始终能够访问到最新的主光源信息。当场景中没有明确设置主光源时,系统会使用默认的光照设置,或者在某些情况下返回黑色(即无光照)。
节点的输出类型为Vector 3,分别对应颜色的R、G、B通道。每个通道的值范围通常是[0,∞),因为URP使用高动态范围光照计算。这意味着颜色值可以超过1,表示特别明亮的光源。在实际使用时,开发者可能需要根据具体需求对这些值进行适当的缩放或限制。
值得注意的是,Main Light Color节点获取的颜色已经考虑了光源的过滤器颜色(如果有的话)。例如,如果一个白色光源前面放置了红色的滤色片,那么节点返回的将是红色调的颜色值。这种完整性使得节点在各种复杂的照明场景中都能提供准确的结果。
性能考虑
Main Light Color节点是一个极其高效的操作,因为它只是读取一个已经计算好的全局着色器变量。与复杂的光照计算或纹理采样相比,它的性能开销可以忽略不计。这使得它非常适合用于移动平台或需要高性能的实时应用中。
在Shader Graph中使用该节点时,它不会增加额外的绘制调用或显著影响着色器的复杂度。然而,开发者应该注意,如果在一个着色器中多次使用该节点,最好将其输出存储在一个中间变量中,然后重复使用这个变量,而不是多次调用节点本身。这种优化实践有助于保持着色器的整洁和效率。
端口
![]()
Main Light Color节点的端口设计体现了其功能的专一性和高效性。作为一个输入输出结构简单的节点,它只包含一个输出端口,这种简约的设计反映了其单一职责原则——专注于提供主光源的颜色信息。
输出端口详解
Out - 输出方向 - Vector 3类型
Out端口是Main Light Color节点唯一的输出接口,负责传递主光源的完整颜色信息。这个Vector 3输出包含了以下关键信息:
- R通道:红色分量,表示光源在红色频谱上的强度
- G通道:绿色分量,表示光源在绿色频谱上的强度
- B通道:蓝色分量,表示光源在蓝色频谱上的强度
重要的是,这些颜色分量已经包含了光源的亮度信息。这意味着一个强度为1的白色光源会返回近似(1,1,1)的值,而强度为2的白色光源会返回近似(2,2,2)的值。这种设计使得输出值可以直接用于光照计算,无需额外的强度乘法操作。
数据范围与特性
Main Light Color节点的输出值范围在理论上是无上限的,因为URP支持高动态范围渲染。在实际应用中,值的大小取决于光源的强度设置和颜色选择。以下是一些典型情况下的输出示例:
- 默认白色定向光(强度1):约(1.0, 1.0, 1.0)
- 明亮的白色太阳光(强度2):约(2.0, 2.0, 2.0)
- 红色光源(强度1):约(1.0, 0.0, 0.0)
- 蓝色光源(强度0.5):约(0.0, 0.0, 0.5)
- 无主光源情况:约(0.0, 0.0, 0.0)
与其他节点的连接方式
Out端口的Vector 3输出可以与多种其他Shader Graph节点连接,实现复杂的光照效果:
与颜色操作节点连接
- 与Multiply节点连接:调整光照颜色的强度或应用色调映射
- 与Add节点连接:创建光照叠加效果
- 与Lerp节点连接:在不同光照颜色间平滑过渡
- 与Split节点连接:分离RGB通道进行独立处理
与光照计算节点结合
- 与Dot Product节点结合:计算兰伯特光照
- 与Normalize节点结合:准备光照方向计算
- 与Power节点结合:实现更复杂的光照衰减
与纹理采样结合
- 与Sample Texture 2D节点输出相乘:实现纹理受光照影响的效果
- 与Texture Coordinates节点结合:创建基于光照的UV动画
实际应用示例
以下是一个基本的光照计算示例,展示如何使用Main Light Color节点的Out端口:
Main Light Color [Out] → Multiply [A]
Normal Vector → Dot Product [A]
Light Direction → Dot Product [B]
Dot Product [Out] → Multiply [B]
Multiply [Out] → Base Color [Base Map]
在这个示例中,Main Light Color的输出与兰伯特系数(通过法线与光方向的点积计算)相乘,最终结果用作基础颜色的调制因子。这种连接方式创建了基本的漫反射光照效果。
高级用法
对于更复杂的材质效果,开发者可以将Main Light Color的输出与其他高级节点结合:
镜面反射计算
Main Light Color → Multiply → Specular Output
自发光效果
Main Light Color → Add → Emission Input
阴影处理
Main Light Color → Multiply (with Shadow Attenuation) → Final Color
性能优化建议
虽然Main Light Color节点本身性能开销很小,但在复杂着色器中的使用方式会影响整体性能:
- 尽量避免在着色器的多个位置重复调用Main Light Color节点,而是将其输出存储到变量中重复使用
- 当只需要单通道信息时,考虑使用Split节点分离出所需通道,而不是处理完整的Vector 3
- 在不需要HDR效果的场景中,可以使用Clamp节点将输出值限制在[0,1]范围内,这可能在某些硬件上提供轻微的性能提升
平台兼容性
Main Light Color节点的Out端口在所有支持URP的平台上都有相同的行为,包括:
- Windows、MacOS、Linux
- iOS和Android移动设备
- 主流游戏主机平台
- WebGL和XR设备
这种跨平台的一致性确保了使用Main Light Color节点的着色器可以在不同的目标平台上提供可预测的视觉效果,大大简化了多平台开发的复杂度。
【Unity Shader Graph 使用与特效实现】专栏-直达 (欢迎点赞留言探讨,更多人加入进来能更加完善这个探索的过程,🙏)
飞猪:假期前三天出行的出境游机票、当地玩乐等服务订单量同比增长均超30%
Kimi连续融资超12亿美元,估值翻倍突破100亿美元
2026 春晚魔术大揭秘:作为程序员,分分钟复刻一个(附源码)
大家好,我是 Sunday。
昨晚的 2026 年春晚上的魔术【惊喜定格】大家看了吗?
![]()
说实话,作为一名资深的前端开发者,我对那些歌舞节目的兴趣一般,但每年的魔术环节我必看。不是为了看奇迹,而是为了:找 Bug 😂。
今年的魔术特别有意思:
魔术师拿出一个手机计算器,让全场观众参与,又是随机想数字,又是乱按屏幕,最后算出来的结果,竟然精准地命中了 当前的年、月、日、时、分。
我老婆说:“哇哦,好厉害啊~”
不过我是越看越不对,这玩意怎么感觉像是个 写死的 JS 脚本啊?
其实,这个魔术并不是 2026 春晚的首创。
早在去年(2025年)底,武汉理工大学的迎新晚会 上就有这个魔术的雏形。
![]()
当时也是一样的套路:随机数字 + 观众乱按 = 预言时间。
而这个魔术的实现原理,就在魔术师手中的 计算器 上
魔术师手里那个所谓的“计算器”,压根就不是系统自带的。那是一个专门开发的 Web App 或者 Native App。
所以,咱们今天大年初一不整虚的,直接打开 VS Code,从原理到代码,一比一复刻这个价值过亿流量的春晚魔术!
春晚魔术的实现原理
这个魔术的核心逻辑,可以拆解为两个部分:
- 数学逻辑(后端逻辑):逆向推导
- 交互逻辑(前端表现):输入幻觉
1. 数学逻辑:逆向推导
普通人的思维是:输入 A + 输入 B + 乱按的 C = 结果。
但在代码里,逻辑是反过来的:目标结果(当前时间) - 输入 A - 输入 B = 必须填补的差值(Force Number)。
比如:
-
目标时间:2月16日 22点27分 -> 数字
2162227。 -
观众 A 输入:
1106。 -
观众 B 输入:
88396。 -
当前总和:
89502。 -
系统偷偷算的差值:
2162227 - 89502 = 2072725。
接下来,魔术师要做的,就是让第三个观众,在以为自己是“随机乱按”的情况下,把 2072725 这个数字“按”出来。
2. 交互逻辑:输入幻觉
这是整个魔术最精彩,也是前端最能发挥的地方。
魔术师会说:“来,大家随便按计算器,越乱越好。”
观众以为按 9 屏幕就会显示 9,按 5 就会显示 5。
大错特错!
在这个 App 进入“魔术模式”后,键盘事件已经被 e.preventDefault() 拦截了。无论你按哪个数字键,屏幕上只会依次显示程序预设好的那个 差值字符串。
- 差值是
2072725。 - 你按“9”,代码输出
2。 - 你按“1”,代码输出
0。 - 你按“任意键”,代码输出
7...
现在知道 为什么魔术师要把屏幕翻过来了吧。就是为了不让大家看到用户真实输入的是什么。
实现源码
原理讲通了,咱们直接上代码,
- 第一步:界面布局(Tailwind 真的香)
作为一名前端,UI 的还原度决定了魔术的可信度。我用了 Tailwind CSS 来复刻 iOS/小米计算器的风格。
<div class="grid grid-cols-4 gap-4">
<button @click="appendNum('7')" class="...">7</button>
<button @click="appendNum('8')" class="...">8</button>
<button @click="calculate" class="btn-orange ...">=</button>
</div>
- 第二步:设计“触发机关”
魔术师不能直接说:“我要变魔术了”。他需要一个隐蔽的开关。在这个代码里,我设计了一个 “三连击触发器”:当连续点击 3 次 = 号时,激活魔术模式。(当然,你可以不用这个触发,也并不影响)
// 状态定义
const equalClickCount = ref(0); // 统计等号点击次数
const isMagicMode = ref(false); // 魔术模式开关
const magicSequence = ref(''); // 算好的差值(剧本)
const calculate = () => {
// ... 正常计算逻辑 ...
// 触发检测
equalClickCount.value++;
if (equalClickCount.value === 3) {
// 1. 获取目标:当前时间 (比如 2162227)
const target = getMagicTarget();
// 2. 获取现状:屏幕上的数字
const currentSum = parseFloat(currentVal.value);
// 3. 计算剧本:差值
const diff = target - currentSum;
if (diff > 0) {
// 激活魔术模式!
magicSequence.value = String(diff);
isMagicMode.value = true;
// 控制台偷偷告诉我们一声
console.log(`🔒 锁定!目标:${target}, 差值:${diff}`);
}
}
}
- 第三步:核心“欺骗”逻辑
这是最关键的 appendNum 函数。它根据当前是否处于 魔术模式 来决定是“听你的”还是“听我的”。
const appendNum = (num) => {
// >>> 魔术模式:虽然你按了键,但我只输出剧本里的数字
if (isMagicMode.value) {
// 第一次按键时,清空屏幕,开始表演
if (isFirstMagicInput.value) {
currentVal.value = '';
isFirstMagicInput.value = false;
}
// 依次吐出 magicSequence 里的字符
if (magicIndex.value < magicSequence.value.length) {
currentVal.value += magicSequence.value[magicIndex.value];
magicIndex.value++;
// 加点震动反馈,增加真实感(手机端体验极佳)
if (navigator.vibrate) navigator.vibrate(50);
}
return;
}
// >>> 正常模式:该咋算咋算
// ... 原有逻辑
};
使用方式:
- 随机输入一个四位数
- 随机输入一个五位数
- 然后相加
![]()
- 然后是 重点,连续按下三次等号,激活 魔术模式
![]()
- 然后随便输入,无论你输入的是什么,最终都会显示出咱们计算好的值
![]()
最终得出当前的时间点 2 月 17 日 11 点 32 分!
写在最后
可能有人会觉得:“Sunday,你一个做技术教育的,搞这些花里胡哨的干嘛?”
其实,这和我们做项目是相通的。
我在 前端 + AI 训练营 里经常跟同学们强调一点:前端工程师的价值,不仅仅在于画页面,而在于“交互逻辑的实现”和“用户体验的掌控”。
这个魔术的完整 HTML 代码,我已经打包好了,大家可以直接在公众号【程序员Sunday】中回复【魔术】来获取源码