1. 项目拆解与设计思路1.1 抓娃娃游戏到底是什么很多人一看到抓娃娃三个字第一反应是商场里那台吃币机器。但这次我们说的不是硬件而是一个纯前端项目——用 HTML、CSS、JavaScript 三件套在浏览器里完整实现一台抓娃娃机。你打开网页能看见娃娃机的外壳、玻璃窗里的娃娃、摇杆、抓钩能点按钮控制爪子移动能按抓取让爪子下降、夹住、上升最后把娃娃丢进出货口。整套流程全部在前端跑完不依赖任何后端服务。这类项目的核心价值在于麻雀虽小五脏俱全。它把前端开发里最常踩的几块硬骨头——DOM 操作、坐标计算、定时器管理、状态机设计、动画衔接——全部浓缩在一个游戏里。你写一个抓娃娃等于把前端中型项目的基本功完整练了一遍。我在实际带新人的时候经常用它当练手题目比写一堆 CRUD 页面有用得多。从技术选型上看这个项目不需要框架原生三件套就够了。原因很简单项目规模小状态不复杂引入 Vue 或 React 反而增加学习成本。抓娃娃的核心逻辑是一个爪子 一堆娃娃 一个出货判定用原生 JavaScript 完全能搞定而且能让初学者看清每一行代码在干什么。1.2 从零搭建的整体架构动手之前先把整台机器的构成拆开。一台标准的抓娃娃机从视觉上分四层外壳层机器框架、玻璃窗、装饰灯、顶部招牌游戏区层爪子、娃娃堆、出货口控制层摇杆或方向按钮、抓取按钮、状态提示灯逻辑层爪子移动范围限制、抓取判定、成功/失败判定、分数统计在 HTML 里我用 div 模拟所有部件CSS 负责把它们摆成机器的样子JavaScript 负责让它们活起来。画面不用 3D纯 2D 俯视图正面视角就够关键是交互流畅、逻辑完整。从布局上讲我选择了固定尺寸的游戏舞台容器内部所有元素用绝对定位控制。这样做最大的好处是坐标计算简单直接不用考虑响应式布局对坐标的影响。你先在固定画布里把逻辑跑通再考虑适配也不迟。HTML 结构大致是这样div classmachine div classmachine-header抓娃娃机/div div classmachine-body div classgame-screen div classclaw.../div div classtoy>div classmachine !-- 机器头 -- div classmachine-top div classtitle快乐抓抓/div /div !-- 游戏区域 -- div classplay-area idplayArea !-- 出货口 -- div classprize-outlet idprizeOutlet/div !-- 爪子 -- div classclaw idclaw div classclaw-arm/div div classclaw-grabber div classgrabber-left/div div classgrabber-right/div /div /div !-- 娃娃们 -- div classtoy styleleft: 100px; top: 300px;/div div classtoy styleleft: 200px; top: 320px;/div div classtoy styleleft: 150px; top: 380px;/div /div !-- 控制台 -- div classcontrol-panel button idbtnLeft←/button button idbtnRight→/button button idbtnGrab抓/button /div /div这里用 emoji 代替娃娃是一个很聪明的偷懒做法。emoji 天然是文本渲染稳定不需要额外加载图片资源而且自带色彩视觉上不会太寒碜。你要是想做得更精致可以把 emoji 换成小图片或者 CSS 画的卡通形象。2.2 CSS 视觉细节边框、玻璃质感与按钮手感很多初学者做这类项目功能跑通了但看起来就是山寨感十足。问题出在哪细节。抓娃娃机要让人觉得像那么回事核心是三个地方的质感玻璃窗、机器边框、按钮。玻璃窗我用了一个半透明白色遮罩层配合 background 渐变模拟玻璃反光效果。不搞复杂一个线性渐变就够.play-area::after { content: ; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0) 40%); pointer-events: none; border-radius: 12px; }这里有个关键细节pointer-events: none。如果不加这一行这个遮罩层会挡住下方娃娃和爪子的鼠标事件点击按钮、拖动操作全部失效。这是实战中容易忽略的一行代码。机器边框我用了圆角内阴影和外阴影的组合内阴影能做出凹陷感让游戏区看起来是嵌在机器里的.play-area { background: linear-gradient(to bottom, #f9e7b3, #f3d47c); border: 6px solid #d4a017; border-radius: 16px; box-shadow: inset 0 4px 12px rgba(0,0,0,0.2), 0 4px 12px rgba(0,0,0,0.15); position: relative; height: 480px; overflow: hidden; }按钮的手感也很重要。一个让人愿意按的按钮通常有明确的按压反馈。我用active伪类配合transform: translateY(2px)来模拟物理按键的下降感配合box-shadow的变化.control-panel button { width: 64px; height: 48px; background: linear-gradient(to bottom, #ff6b35, #e64a19); color: white; border: none; border-radius: 12px; font-size: 20px; box-shadow: 0 4px 0 #bf360c; cursor: pointer; transition: box-shadow 0.08s, transform 0.08s; } .control-panel button:active { transform: translateY(4px); box-shadow: 0 0 0 #bf360c; }简而言之按钮的立体感来自底部阴影模拟物理厚度按下时阴影消失、按钮下沉手指头就会真的觉得我按下去了。2.3 娃娃阵列与初始化布局娃娃的位置是散乱摆放的。怎么摆才不会显得死板我用了分区随机的思路把游戏区底部划分成左、中、右三个区每个区随机生成 3~5 个娃娃X 坐标在区间内抖动Y 坐标在底部区间内随机Z 轴方向用 emoji 本身的大小差异来模拟前后层级——前面的娃娃大一点、后面的娃娃小一点。const toys [ { emoji: , x: 80, y: 360, size: 52 }, { emoji: , x: 160, y: 380, size: 48 }, { emoji: , x: 260, y: 370, size: 55 }, { emoji: , x: 340, y: 390, size: 44 }, { emoji: , x: 120, y: 410, size: 50 } ];这里我直接用了硬编码数组便于调试。你要做随机生成也可以但要注意两点娃娃之间不能重叠太多否则抓取判定会互相干扰娃娃不能跑出游戏区边界否则看起来像是穿模了。我在实践中建议初版用硬编码坐标把所有功能跑通之后再回头改成随机生成这样排查问题会更容易。一上来就搞随机可能出现娃娃叠成一坨的情况你还得花时间调试布局心态容易崩。3. 操作交互与游戏逻辑实现3.1 方向控制与边界限制抓娃娃机里玩家最核心的操作就是移动爪子和按下抓取。方向控制我做了四个方向键但左和右是高频操作。上下也可以加但初始版本我建议只保留左右移动上下位置固定在一个悬停高度。这样逻辑更简单玩家也更容易上手。爪子的移动本质是修改它的绝对定位 left 值。移动范围要从游戏区边界往里收缩。假设游戏区宽 480px爪子宽度 56px那么 left 的最小值是 20px最大值是 480 - 56 - 20 404px。const CLAW_MIN_X 20; const CLAW_MAX_X 404; const CLAW_STEP 30; function moveLeft() { if (!canMove()) return; let newX claw.offsetLeft - CLAW_STEP; if (newX CLAW_MIN_X) newX CLAW_MIN_X; claw.style.left newX px; } function moveRight() { if (!canMove()) return; let newX claw.offsetLeft CLAW_STEP; if (newX CLAW_MAX_X) newX CLAW_MAX_X; claw.style.left newX px; }canMove()就是状态机的开关——只有当前状态是 READY 时才允许移动。这样连点也不会导致爪子乱飞。有一个细节容易忽略claw.offsetLeft拿到的整数是 DOM 计算后的值但如果你之前用style.left设置的是带px的字符串每次读取都要用parseInt或offsetLeft。offsetLeft更省事因为它永远是数值。3.2 抓取动画的时序控制抓取是整个游戏的高潮。点击抓之后爪子要做一系列动作下降→夹取→上升→返回→判定结果。这一串动作我用setTimeout链来实现每一步之间有明确的时间间隔。function startGrab() { if (!canMove()) return; setState(GRABBING); let targetY 400; // 爪子底部到达的位置 clawArm.style.transition transform 0.6s ease-in; clawArm.style.transform translateY(${targetY}px); // 爪子本体也要同步下降 clawBody.style.transition top 0.6s ease-in; clawBody.style.top targetY px; setTimeout(() { // 夹取闭合爪子 leftGrabber.style.transform rotate(15deg); rightGrabber.style.transform rotate(-15deg); // 判定是否抓住 grabbedToy checkGrab(); }, 600); setTimeout(() { // 上升 clawArm.style.transform translateY(0); clawBody.style.top 80px; if (grabbedToy) { // 让娃娃跟随爪子移动 grabbedToy.style.left (clawX 10) px; grabbedToy.style.top (80 40) px; } }, 900); setTimeout(() { // 回到初始位置判定出货 if (grabbedToy isOverOutlet()) { // 成功娃娃掉进出货口 grabbedToy.style.top 520px; showSuccess(); } else { // 失败娃娃落回原位 grabbedToy null; } setState(READY); }, 1800); }这个链式 setTimeout 的好处是代码直白每一段做什么一目了然。缺点是回调嵌套层层深入如果动作再多一些代码可读性会下降。更优雅的方案是用 Promise 或者setInterval配合状态机轮询但对这个项目来说setTimeout 链完全够用不必杀鸡用牛刀。这里有一个我在实际中踩过的坑爪子的臂和爪头如果分开控制下降时两者要同步。刚开始我只让爪子主体下降了结果出现臂还在上面、抓手已经下去的分离景象特别滑稽。解决思路是结构上让爪子容器整体位移或者保证两者的 transition 时间一致、目标位置匹配。3.3 碰撞判定与出货判定抓取成功与否的判定是这个游戏最关键的算法。判定可以分层第一层爪子是否碰到了某个娃娃。我采用矩形重叠判断。以爪子底部的中心点为圆心娃娃的中心点为圆心当两者距离小于一定阈值时视为碰撞。function checkGrab() { const clawRect { x: clawX 28, y: 420, width: 30, height: 30 }; for (let toy of toys) { const toyRect { x: toy.x toy.size / 2, y: toy.y toy.size / 2, width: toy.size, height: toy.size }; const overlap !(clawRect.x clawRect.width toyRect.x || toyRect.x toyRect.width clawRect.x || clawRect.y clawRect.height toyRect.y || toyRect.y toyRect.height clawRect.y); if (overlap) return toy; } return null; }第二层出货判定。爪子带着娃娃升到最高点后如果爪子的 X 坐标位于出货口的上方就认为娃娃可以掉进出货口。function isOverOutlet() { const outletLeft 180; const outletRight 300; return clawX 28 outletLeft clawX 28 outletRight; }出货口的位置我放在了游戏区底部中央略偏左。玩家需要先通过左右移动把爪子对准出货口再按抓取才有机会出货。这个设计给了玩家策略空间——不是盲目按而是要动脑对准。有个用户体验层面的细节即使没对准出货口只要爪子抓到了娃娃娃娃也得跟着升上去然后再在出货口外掉落。这样玩家的心理预期是差点就成功了而不是抓了个空气。这个细节直接决定游戏是想玩第二把还是直接关掉。4. 常见问题与排查技巧实录4.1 爪子位置计算混乱现象爪子移动到一半突然跳回初始位置或者直接飞出屏幕。原因多半是style.left和offsetLeft混用时类型没转对。比如你用claw.style.left claw.offsetLeft 30 px逻辑上没毛病但如果你把claw.offsetLeft存到一个变量里再在多个异步回调里复用这个变量而这个变量在计算时已经过期就会出现跳位。解法所有位置计算基于一个唯一数据源。我推荐用一个 state 对象集中管理坐标const state { clawX: 200, clawY: 80, status: READY, grabbedToy: null };每次移动都修改 state.clawX再同步到 DOM。读取只认 state不认 DOM。这个习惯养成之后很多异步陷阱都能避开。4.2 setTimeout 动画与快速点击冲突现象玩家在爪子下落过程中疯狂点击抓取按钮结果多条动画链叠加爪子抽搐。解法状态机挡在入口处非 READY 状态一律不响应。但要注意光有状态还不够还要考虑按钮的视觉反馈——按钮在不可操作时应该有置灰效果否则玩家以为没点到再狂点。function setState(s) { state.status s; const ing s ! READY; document.getElementById(btnLeft).disabled ing; document.getElementById(btnRight).disabled ing; document.getElementById(btnGrab).disabled ing; }4.3 娃娃跟随爪子时位置错位现象娃娃被抓起来后没有跟爪子同步上升而是漂移到了屏幕中间。原因娃娃的定位容器是 .play-area但爪子的容器可能多了一层包装。如果两者的position上下文不一致坐标参考系不同那必然错位。排查思路检查两个元素的 offsetParent 是否是同一个容器。如果爪子在某个相对定位的 div 里而娃娃直接挂在 play-area 下那它们的 left/top 就无法直接换算。解决要么把爪子和娃娃挂在同一个父容器下要么统一换算坐标。为了省事我强烈建议所有游戏内元素都是 .play-area 的直接子元素并且用 absolute 定位。4.4 出货口动画衔接不自然现象娃娃掉进出货口很突兀直接闪烁消失。解决给娃娃加一个掉落过渡让它往下滑一段再淡出grabbedToy.style.transition top 0.3s ease-in, opacity 0.3s ease-in; grabbedToy.style.top 520px; grabbedToy.style.opacity 0; setTimeout(() { grabbedToy.remove(); grabbedToy.style.transition ; grabbedToy.style.opacity 1; }, 300);这里要注意移除娃娃后要把它的 transition 重置掉否则下次创建新娃娃时会继承一个 0.3s 的过渡影响摆放。4.5 快速排查速查表问题可能原因快速处理点击移动但爪子不动状态不在 READY检查 setState 是否被意外调用爪子移出边界水平范围没限制加上 CLAW_MIN_X 与 CLAW_MAX_X 约束抓不到娃娃碰撞判定的中心点偏移打印 clawRect 和 toyRect 对比娃娃跟随错位父容器不一致统一定位上下文按钮按下无反馈disabled 未同步在 setState 里统一控制动画卡顿transition 时间过长或多次触发缩短 duration 并限制触发条件5. 如何扩展成完整作品抓娃娃做成这样已经是一个可以拿出来展示的个人项目了。但如果你想让它更像一个能上简历的作品还可以在几个方向做扩展。方向一计分系统与游戏币机制。给玩家发 10 个币每抓一次消耗一个成功出货给额外奖励。这需要引入简单的状态管理模块但逻辑不复杂非常适合练习数据抽象。方向二娃娃库与稀有度。设定普通娃娃、稀有娃娃、限定娃娃稀有娃娃更小、更难抓。这个改动主要在碰撞判定上把碰撞阈值与娃娃稀有度挂钩就实现了难度分级。方向三音效与动效打磨。按抓取按钮时播放短促音效爪子抓住娃娃时播放咔哒声出货时播放欢呼声。原生 Audio API 就能做不需要额外库。方向四移动端适配。目前固定 480px 宽度在手机上会溢出屏幕。可以改成按视口宽度自适应缩放核心思路是把整个机器容器用 transform: scale() 缩放并动态计算缩放比。方向五多局联动与数据持久化。用 localStorage 保存玩家累计抓取次数、成功次数、当前币数。加上这些之后这个项目就不再只是一个页面而是一个完整的产品了。我个人的建议是先把最核心的抓取逻辑打磨到手感流畅再去加周边功能。很多初学者一上来就想做全套结果核心逻辑一堆 bug周边功能也全乱。前端项目的灵魂永远是交互和反馈先把按左往左、按抓往下这个循环做扎实比什么都强。我自己做这版抓娃娃时光是爪子下降和抓住娃娃的判定调了一晚上因为碰撞阈值大了像作弊小了又空抓。最后定在一个 8px 的容差范围既有难度又不至于让人想砸电脑。每次写这种偏游戏的前端项目我都特别有感触CSS 决定了一个作品像不像JavaScript 决定了它好不好玩而要把两者揉在一起靠的就是对细节的较真。抓娃娃机看起来简单可真要做得让人愿意反复玩背后全是状态管理的章法。你把这个项目啃透再回头写表单校验、多步骤交互的页面都会觉得思路清晰一大截。
用原生前端三件套实现抓娃娃机：坐标驱动与状态机设计
1. 项目拆解与设计思路1.1 抓娃娃游戏到底是什么很多人一看到抓娃娃三个字第一反应是商场里那台吃币机器。但这次我们说的不是硬件而是一个纯前端项目——用 HTML、CSS、JavaScript 三件套在浏览器里完整实现一台抓娃娃机。你打开网页能看见娃娃机的外壳、玻璃窗里的娃娃、摇杆、抓钩能点按钮控制爪子移动能按抓取让爪子下降、夹住、上升最后把娃娃丢进出货口。整套流程全部在前端跑完不依赖任何后端服务。这类项目的核心价值在于麻雀虽小五脏俱全。它把前端开发里最常踩的几块硬骨头——DOM 操作、坐标计算、定时器管理、状态机设计、动画衔接——全部浓缩在一个游戏里。你写一个抓娃娃等于把前端中型项目的基本功完整练了一遍。我在实际带新人的时候经常用它当练手题目比写一堆 CRUD 页面有用得多。从技术选型上看这个项目不需要框架原生三件套就够了。原因很简单项目规模小状态不复杂引入 Vue 或 React 反而增加学习成本。抓娃娃的核心逻辑是一个爪子 一堆娃娃 一个出货判定用原生 JavaScript 完全能搞定而且能让初学者看清每一行代码在干什么。1.2 从零搭建的整体架构动手之前先把整台机器的构成拆开。一台标准的抓娃娃机从视觉上分四层外壳层机器框架、玻璃窗、装饰灯、顶部招牌游戏区层爪子、娃娃堆、出货口控制层摇杆或方向按钮、抓取按钮、状态提示灯逻辑层爪子移动范围限制、抓取判定、成功/失败判定、分数统计在 HTML 里我用 div 模拟所有部件CSS 负责把它们摆成机器的样子JavaScript 负责让它们活起来。画面不用 3D纯 2D 俯视图正面视角就够关键是交互流畅、逻辑完整。从布局上讲我选择了固定尺寸的游戏舞台容器内部所有元素用绝对定位控制。这样做最大的好处是坐标计算简单直接不用考虑响应式布局对坐标的影响。你先在固定画布里把逻辑跑通再考虑适配也不迟。HTML 结构大致是这样div classmachine div classmachine-header抓娃娃机/div div classmachine-body div classgame-screen div classclaw.../div div classtoy>div classmachine !-- 机器头 -- div classmachine-top div classtitle快乐抓抓/div /div !-- 游戏区域 -- div classplay-area idplayArea !-- 出货口 -- div classprize-outlet idprizeOutlet/div !-- 爪子 -- div classclaw idclaw div classclaw-arm/div div classclaw-grabber div classgrabber-left/div div classgrabber-right/div /div /div !-- 娃娃们 -- div classtoy styleleft: 100px; top: 300px;/div div classtoy styleleft: 200px; top: 320px;/div div classtoy styleleft: 150px; top: 380px;/div /div !-- 控制台 -- div classcontrol-panel button idbtnLeft←/button button idbtnRight→/button button idbtnGrab抓/button /div /div这里用 emoji 代替娃娃是一个很聪明的偷懒做法。emoji 天然是文本渲染稳定不需要额外加载图片资源而且自带色彩视觉上不会太寒碜。你要是想做得更精致可以把 emoji 换成小图片或者 CSS 画的卡通形象。2.2 CSS 视觉细节边框、玻璃质感与按钮手感很多初学者做这类项目功能跑通了但看起来就是山寨感十足。问题出在哪细节。抓娃娃机要让人觉得像那么回事核心是三个地方的质感玻璃窗、机器边框、按钮。玻璃窗我用了一个半透明白色遮罩层配合 background 渐变模拟玻璃反光效果。不搞复杂一个线性渐变就够.play-area::after { content: ; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0) 40%); pointer-events: none; border-radius: 12px; }这里有个关键细节pointer-events: none。如果不加这一行这个遮罩层会挡住下方娃娃和爪子的鼠标事件点击按钮、拖动操作全部失效。这是实战中容易忽略的一行代码。机器边框我用了圆角内阴影和外阴影的组合内阴影能做出凹陷感让游戏区看起来是嵌在机器里的.play-area { background: linear-gradient(to bottom, #f9e7b3, #f3d47c); border: 6px solid #d4a017; border-radius: 16px; box-shadow: inset 0 4px 12px rgba(0,0,0,0.2), 0 4px 12px rgba(0,0,0,0.15); position: relative; height: 480px; overflow: hidden; }按钮的手感也很重要。一个让人愿意按的按钮通常有明确的按压反馈。我用active伪类配合transform: translateY(2px)来模拟物理按键的下降感配合box-shadow的变化.control-panel button { width: 64px; height: 48px; background: linear-gradient(to bottom, #ff6b35, #e64a19); color: white; border: none; border-radius: 12px; font-size: 20px; box-shadow: 0 4px 0 #bf360c; cursor: pointer; transition: box-shadow 0.08s, transform 0.08s; } .control-panel button:active { transform: translateY(4px); box-shadow: 0 0 0 #bf360c; }简而言之按钮的立体感来自底部阴影模拟物理厚度按下时阴影消失、按钮下沉手指头就会真的觉得我按下去了。2.3 娃娃阵列与初始化布局娃娃的位置是散乱摆放的。怎么摆才不会显得死板我用了分区随机的思路把游戏区底部划分成左、中、右三个区每个区随机生成 3~5 个娃娃X 坐标在区间内抖动Y 坐标在底部区间内随机Z 轴方向用 emoji 本身的大小差异来模拟前后层级——前面的娃娃大一点、后面的娃娃小一点。const toys [ { emoji: , x: 80, y: 360, size: 52 }, { emoji: , x: 160, y: 380, size: 48 }, { emoji: , x: 260, y: 370, size: 55 }, { emoji: , x: 340, y: 390, size: 44 }, { emoji: , x: 120, y: 410, size: 50 } ];这里我直接用了硬编码数组便于调试。你要做随机生成也可以但要注意两点娃娃之间不能重叠太多否则抓取判定会互相干扰娃娃不能跑出游戏区边界否则看起来像是穿模了。我在实践中建议初版用硬编码坐标把所有功能跑通之后再回头改成随机生成这样排查问题会更容易。一上来就搞随机可能出现娃娃叠成一坨的情况你还得花时间调试布局心态容易崩。3. 操作交互与游戏逻辑实现3.1 方向控制与边界限制抓娃娃机里玩家最核心的操作就是移动爪子和按下抓取。方向控制我做了四个方向键但左和右是高频操作。上下也可以加但初始版本我建议只保留左右移动上下位置固定在一个悬停高度。这样逻辑更简单玩家也更容易上手。爪子的移动本质是修改它的绝对定位 left 值。移动范围要从游戏区边界往里收缩。假设游戏区宽 480px爪子宽度 56px那么 left 的最小值是 20px最大值是 480 - 56 - 20 404px。const CLAW_MIN_X 20; const CLAW_MAX_X 404; const CLAW_STEP 30; function moveLeft() { if (!canMove()) return; let newX claw.offsetLeft - CLAW_STEP; if (newX CLAW_MIN_X) newX CLAW_MIN_X; claw.style.left newX px; } function moveRight() { if (!canMove()) return; let newX claw.offsetLeft CLAW_STEP; if (newX CLAW_MAX_X) newX CLAW_MAX_X; claw.style.left newX px; }canMove()就是状态机的开关——只有当前状态是 READY 时才允许移动。这样连点也不会导致爪子乱飞。有一个细节容易忽略claw.offsetLeft拿到的整数是 DOM 计算后的值但如果你之前用style.left设置的是带px的字符串每次读取都要用parseInt或offsetLeft。offsetLeft更省事因为它永远是数值。3.2 抓取动画的时序控制抓取是整个游戏的高潮。点击抓之后爪子要做一系列动作下降→夹取→上升→返回→判定结果。这一串动作我用setTimeout链来实现每一步之间有明确的时间间隔。function startGrab() { if (!canMove()) return; setState(GRABBING); let targetY 400; // 爪子底部到达的位置 clawArm.style.transition transform 0.6s ease-in; clawArm.style.transform translateY(${targetY}px); // 爪子本体也要同步下降 clawBody.style.transition top 0.6s ease-in; clawBody.style.top targetY px; setTimeout(() { // 夹取闭合爪子 leftGrabber.style.transform rotate(15deg); rightGrabber.style.transform rotate(-15deg); // 判定是否抓住 grabbedToy checkGrab(); }, 600); setTimeout(() { // 上升 clawArm.style.transform translateY(0); clawBody.style.top 80px; if (grabbedToy) { // 让娃娃跟随爪子移动 grabbedToy.style.left (clawX 10) px; grabbedToy.style.top (80 40) px; } }, 900); setTimeout(() { // 回到初始位置判定出货 if (grabbedToy isOverOutlet()) { // 成功娃娃掉进出货口 grabbedToy.style.top 520px; showSuccess(); } else { // 失败娃娃落回原位 grabbedToy null; } setState(READY); }, 1800); }这个链式 setTimeout 的好处是代码直白每一段做什么一目了然。缺点是回调嵌套层层深入如果动作再多一些代码可读性会下降。更优雅的方案是用 Promise 或者setInterval配合状态机轮询但对这个项目来说setTimeout 链完全够用不必杀鸡用牛刀。这里有一个我在实际中踩过的坑爪子的臂和爪头如果分开控制下降时两者要同步。刚开始我只让爪子主体下降了结果出现臂还在上面、抓手已经下去的分离景象特别滑稽。解决思路是结构上让爪子容器整体位移或者保证两者的 transition 时间一致、目标位置匹配。3.3 碰撞判定与出货判定抓取成功与否的判定是这个游戏最关键的算法。判定可以分层第一层爪子是否碰到了某个娃娃。我采用矩形重叠判断。以爪子底部的中心点为圆心娃娃的中心点为圆心当两者距离小于一定阈值时视为碰撞。function checkGrab() { const clawRect { x: clawX 28, y: 420, width: 30, height: 30 }; for (let toy of toys) { const toyRect { x: toy.x toy.size / 2, y: toy.y toy.size / 2, width: toy.size, height: toy.size }; const overlap !(clawRect.x clawRect.width toyRect.x || toyRect.x toyRect.width clawRect.x || clawRect.y clawRect.height toyRect.y || toyRect.y toyRect.height clawRect.y); if (overlap) return toy; } return null; }第二层出货判定。爪子带着娃娃升到最高点后如果爪子的 X 坐标位于出货口的上方就认为娃娃可以掉进出货口。function isOverOutlet() { const outletLeft 180; const outletRight 300; return clawX 28 outletLeft clawX 28 outletRight; }出货口的位置我放在了游戏区底部中央略偏左。玩家需要先通过左右移动把爪子对准出货口再按抓取才有机会出货。这个设计给了玩家策略空间——不是盲目按而是要动脑对准。有个用户体验层面的细节即使没对准出货口只要爪子抓到了娃娃娃娃也得跟着升上去然后再在出货口外掉落。这样玩家的心理预期是差点就成功了而不是抓了个空气。这个细节直接决定游戏是想玩第二把还是直接关掉。4. 常见问题与排查技巧实录4.1 爪子位置计算混乱现象爪子移动到一半突然跳回初始位置或者直接飞出屏幕。原因多半是style.left和offsetLeft混用时类型没转对。比如你用claw.style.left claw.offsetLeft 30 px逻辑上没毛病但如果你把claw.offsetLeft存到一个变量里再在多个异步回调里复用这个变量而这个变量在计算时已经过期就会出现跳位。解法所有位置计算基于一个唯一数据源。我推荐用一个 state 对象集中管理坐标const state { clawX: 200, clawY: 80, status: READY, grabbedToy: null };每次移动都修改 state.clawX再同步到 DOM。读取只认 state不认 DOM。这个习惯养成之后很多异步陷阱都能避开。4.2 setTimeout 动画与快速点击冲突现象玩家在爪子下落过程中疯狂点击抓取按钮结果多条动画链叠加爪子抽搐。解法状态机挡在入口处非 READY 状态一律不响应。但要注意光有状态还不够还要考虑按钮的视觉反馈——按钮在不可操作时应该有置灰效果否则玩家以为没点到再狂点。function setState(s) { state.status s; const ing s ! READY; document.getElementById(btnLeft).disabled ing; document.getElementById(btnRight).disabled ing; document.getElementById(btnGrab).disabled ing; }4.3 娃娃跟随爪子时位置错位现象娃娃被抓起来后没有跟爪子同步上升而是漂移到了屏幕中间。原因娃娃的定位容器是 .play-area但爪子的容器可能多了一层包装。如果两者的position上下文不一致坐标参考系不同那必然错位。排查思路检查两个元素的 offsetParent 是否是同一个容器。如果爪子在某个相对定位的 div 里而娃娃直接挂在 play-area 下那它们的 left/top 就无法直接换算。解决要么把爪子和娃娃挂在同一个父容器下要么统一换算坐标。为了省事我强烈建议所有游戏内元素都是 .play-area 的直接子元素并且用 absolute 定位。4.4 出货口动画衔接不自然现象娃娃掉进出货口很突兀直接闪烁消失。解决给娃娃加一个掉落过渡让它往下滑一段再淡出grabbedToy.style.transition top 0.3s ease-in, opacity 0.3s ease-in; grabbedToy.style.top 520px; grabbedToy.style.opacity 0; setTimeout(() { grabbedToy.remove(); grabbedToy.style.transition ; grabbedToy.style.opacity 1; }, 300);这里要注意移除娃娃后要把它的 transition 重置掉否则下次创建新娃娃时会继承一个 0.3s 的过渡影响摆放。4.5 快速排查速查表问题可能原因快速处理点击移动但爪子不动状态不在 READY检查 setState 是否被意外调用爪子移出边界水平范围没限制加上 CLAW_MIN_X 与 CLAW_MAX_X 约束抓不到娃娃碰撞判定的中心点偏移打印 clawRect 和 toyRect 对比娃娃跟随错位父容器不一致统一定位上下文按钮按下无反馈disabled 未同步在 setState 里统一控制动画卡顿transition 时间过长或多次触发缩短 duration 并限制触发条件5. 如何扩展成完整作品抓娃娃做成这样已经是一个可以拿出来展示的个人项目了。但如果你想让它更像一个能上简历的作品还可以在几个方向做扩展。方向一计分系统与游戏币机制。给玩家发 10 个币每抓一次消耗一个成功出货给额外奖励。这需要引入简单的状态管理模块但逻辑不复杂非常适合练习数据抽象。方向二娃娃库与稀有度。设定普通娃娃、稀有娃娃、限定娃娃稀有娃娃更小、更难抓。这个改动主要在碰撞判定上把碰撞阈值与娃娃稀有度挂钩就实现了难度分级。方向三音效与动效打磨。按抓取按钮时播放短促音效爪子抓住娃娃时播放咔哒声出货时播放欢呼声。原生 Audio API 就能做不需要额外库。方向四移动端适配。目前固定 480px 宽度在手机上会溢出屏幕。可以改成按视口宽度自适应缩放核心思路是把整个机器容器用 transform: scale() 缩放并动态计算缩放比。方向五多局联动与数据持久化。用 localStorage 保存玩家累计抓取次数、成功次数、当前币数。加上这些之后这个项目就不再只是一个页面而是一个完整的产品了。我个人的建议是先把最核心的抓取逻辑打磨到手感流畅再去加周边功能。很多初学者一上来就想做全套结果核心逻辑一堆 bug周边功能也全乱。前端项目的灵魂永远是交互和反馈先把按左往左、按抓往下这个循环做扎实比什么都强。我自己做这版抓娃娃时光是爪子下降和抓住娃娃的判定调了一晚上因为碰撞阈值大了像作弊小了又空抓。最后定在一个 8px 的容差范围既有难度又不至于让人想砸电脑。每次写这种偏游戏的前端项目我都特别有感触CSS 决定了一个作品像不像JavaScript 决定了它好不好玩而要把两者揉在一起靠的就是对细节的较真。抓娃娃机看起来简单可真要做得让人愿意反复玩背后全是状态管理的章法。你把这个项目啃透再回头写表单校验、多步骤交互的页面都会觉得思路清晰一大截。
