简介游戏开发是前端技术综合应用的最佳场景之一而基于HTML5 Canvas的小游戏开发更是入门者理解核心概念的理想路径。从基础的游戏循环到关键的相互作用逻辑开发者需要掌握渲染、状态管理、碰撞检测等底层技术。碰撞检测决定游戏交互的真实感而状态机则让复杂流程清晰可控。借助这些技术我们可以用原生JavaScript实现经典玩法打造具备完整手感的交互体验。这类项目既适合前端初学者巩固语法与逻辑也为独立小游戏开发提供了轻量级范本。本文以黄金矿工为例从零拆解其核心机制覆盖抓钩摆动、物品回收、关卡数据驱动等完整实现细节帮助你在实战中建立系统化游戏开发思维轻松构建属于自己的HTML5互动作品。1. 为什么我建议用“黄金矿工”作为HTML5练手项目说起HTML5小游戏很多人第一个想到的就是“黄金矿工”。市面上各种版本满天飞从Flash时代一路活到现在的经典玩法放到HTML5技术栈里重做一遍其实是一个性价比极高的练手项目。我自己的感受是一个完整的黄金矿工H5版本几乎把游戏开发里最核心的几块拼图都过了一遍——Canvas渲染、游戏循环、碰撞检测、状态机管理、关卡配置、UI交互。这些东西在大型引擎里被层层封装你在黄金矿工里却能看到最原始的形态理解起来反而更深刻。这个项目适合谁两类人。一类是刚学完JavaScript基础、想找一个“能拿得出手”的项目来巩固DOM操作和逻辑能力的前端初学者另一类是想做独立小游戏、但不想一上来就上手重型引擎的开发者。说实话用纯HTML5、CSS和原生JavaScript实现一个能玩、有手感、有完整流程的黄金矿工代码量大概在800到1500行之间。这个体量非常合适——不会小到没有挑战也不会大到让人中途弃坑。这个游戏的核心玩法大家都很熟悉屏幕下方有一个矿工一根带钩爪的绳索可以向下、向左右延伸抓到地下的金块、钻石、石块等物品后回收回收的物品按价值计分玩家要在限定的时间内达到关卡目标分数否则闯关失败。听起来简单但真正把“钩爪摆动的物理感”“抓取回收的速度感”“物品价值的平衡感”做好需要不少细节打磨。这篇文章就从零到一把我自己实现这个项目时的完整思路、代码结构和踩坑记录都整理出来给想动手复刻的朋友一个参考。提示文中的代码片段是完整项目中的核心逻辑摘录直接Copy可以跑通主流程但完整版涉及较多资源文件图片、音效我建议你重写或替换成绘图API生成的图形这样就不依赖外部素材了。2. 核心机制拆解从游戏逻辑到数学建模很多人一开始就把游戏实现想得过于玄乎实际上剥离掉画面和音效之后任何游戏本质上都是一堆状态和数字在循环变化。黄金矿工也不例外。整个游戏的核心可以拆成四个模块抓钩的摆动与延伸、抓取判定与回收、物品的价值和速度模型、关卡流程和UI状态。把这四个模块吃透游戏就已经完成了一大半。2.1 抓钩那根线其实是三角函数先来聊最出戏也最关键的抓钩系统。抓钩的初始状态是垂直向下然后会像钟摆一样左右摆动。玩家的操作只有一次在合适的时间按下按钮钩爪就沿着当前摆动方向射出去。这个“摆动”效果很多人第一反应是用动画帧不断修改角度但这里最干净的做法是直接用三角函数建模。抓钩在等待发射的状态下本质上就是一条从矿工位置出发、长度固定比如80像素、角度随时间变化的线段。这个角度怎么变我用的公式是// hookAngle 是当前角度hookAngleMin/Max 是摆动范围swingSpeed 是摆动速度 hookAngle hookAngleMin (hookAngleMax - hookAngleMin) / 2 Math.sin(time * swingSpeed) * (hookAngleMax - hookAngleMin) / 2;这里的time是累积的游戏时间用performance.now()或者帧计数累积swingSpeed控制摆动快慢hookAngleMin和hookAngleMax限制了摆动的左右边界。用Math.sin的好处是摆动天然是平滑的简谐运动从最左到最右再回来速度在两端慢、中间快看起来非常自然。不需要单独维护“当前速度”和“加速度”变量一个正弦函数全搞定。发射后的钩爪就简单了。记录发射时的角度shootAngle维护一个hookLength变量每帧增加固定的延伸速度直到达到最大长度或者碰到障碍物。延伸方向就是// hookTipX/Y 是钩爪尖端坐标 hookTipX minerX Math.cos(shootAngle) * hookLength; hookTipY minerY Math.sin(shootAngle) * hookLength;这里有一个新手经常犯的错误发射后没有把摆动角度固定下来导致钩爪在延伸过程中还在左右晃。正确做法是发射瞬间把当前角度存为shootAngle后续所有计算都基于这个固定角度直到钩爪回收完成、重新进入待发射状态。2.2 抓取判定不光是“碰到了”这么简单抓取判定的实现方式取决于你的场景是“像素碰撞”还是“圆形/矩形碰撞”。黄金矿工里的物品金块、钻石、石块在屏幕上是静态的可以用一个简单的几何模型把每个物品抽象成一个圆形或矩形区域把钩爪尖端抽象成一个点然后用“点是否在区域内”来做判定。我实际采用的是圆形模型因为测试下来对玩家的视觉反馈最友好。每个物品包含x、y、radius属性钩爪尖端是一个点那么碰撞条件就是距离判断const dx hookTipX - item.x; const dy hookTipY - item.y; const dist Math.sqrt(dx * dx dy * dy); if (dist item.radius HOOK_RADIUS) { // 抓到物品进入回收状态 }这个判断每帧做一次就行。但要提醒的是如果钩爪延伸速度太快一帧移动超过物品半径的两倍就会出现“穿模”——上一帧还在物品上方下一帧已经越过物品中心距离判断还没来得及触发。解决方式有两种一是限制每帧的延伸步长不超过一个合理的像素值比如6像素二是做线段与圆形的相交检测。我建议初学者先用前一种限制速度简单而且视觉上也看不出僵硬感如果钩爪速度是你的玩法核心再考虑精细的线段相交检测。抓到物品之后的回收状态也有不少细节。正常逻辑是钩爪带着物品一起以一定的速度回收。但不同物品的重量不同重量大的物品回收速度会明显变慢。这里需要设计一个“负载速度衰减”模型我的实现是// 基础回收速度 800像素/秒物品重量 100 表示正常情况下不减速 const weightFactor Math.max(0.3, 1 - (item.weight - 100) / 1200); hookSpeed baseRetractSpeed * weightFactor;这样金块越小越轻回收越快大金块和石块回收速度会显著下降。这个减速不只是为了拟真它其实是游戏策略性的来源——玩家必须权衡“时间成本”和“物品价值”这是黄金矿工玩法的灵魂所在。2.3 物品的价值和速度模型物品系统是关卡设计的地基。我先定义了几类基础物品每类有固定的大小和分值然后用一个价格公式来动态生成变体。物品模型大概是这样物品类型基础分值基础半径重量颜色/表现小金块1008像素30土黄色中金块30014像素60亮黄色大金块60022像素120金黄色偏亮钻石80012像素20青蓝色闪烁石块1020~35像素300灰色幸运袋20012像素40绿色圆点闪烁重量决定了回收速度。大石块重量300回收速度被削减到大概三分之一非常难受。所以玩家抓石块往往不是想拿那10分而是因为石块挡在金块上面必须先清掉或者目标值就差一点来不及抓大金块了。这里有一个设计技巧把物品的“价值密度”做成差异化。金矿越深越大分值越高但回收时间也越长。钻石虽然单颗价值高但往往分布在深处且有石块阻挡。玩家要在有限的60秒内不断做“投资回报率”的判断这就是游戏好玩的核心动力。我强烈建议把物品的定义数据化不要写在绘制逻辑里。每个关卡只定义一个物品数组每个物品是一个对象包含类型、坐标、半径、分值、重量等属性。这样后面想做关卡编辑器、随机生成地图、甚至关卡难度动态调整都只需要操作数据不需要动游戏逻辑。2.4 道具让游戏不无聊的关键纯抓金块很容易腻道具系统是黄金矿工的调味剂。经典版本里有三个道具炸药TNT、力量饮料、幸运袋。炸药的作用是瞬间炸掉当前抓到的物品无论多重但放弃该物品的分值。这个道具的设计意图很明确当玩家抓到一个超重的石块、后悔了想止损的时候炸药是好选择。实现上很简单回收状态下检测到玩家按下炸药按键销毁当前持有物品并重置钩爪状态即可。注意点是要防止玩家在抓到物品之前误按炸药——正常情况下应该在“已抓取且正在回收”状态才允许使用炸药。力量饮料的效果是让回收速度变成原来的两倍持续10秒左右。这个实现更简单用一个计时器变量在回收速度计算时检测一下力量效果是否激活即可。比较有技巧的是UI反馈如果玩家用了力量饮料最好在钩爪上添加一个简单的发光效果或者变色描边让玩家有“我变强了”的感知。幸运袋的效果是随机获得200到500分的额外分数通常在地图里随机刷新。它的实现就是一个带随机值的物品类被抓取后直接加分不需要单独的回收动画。这个小设计能让每一局的体验都有细微差异成本极低但玩家反馈很好。3. 实操过程一步步把游戏跑起来聊完抽象机制下面进入能复制粘贴的部分。我会按实现顺序把关键代码和配置逻辑过一遍你可以边看边在本地同步操作。我不推荐用任何框架就用纯JavaScript Canvas这样最透明也最容易排查问题。3.1 项目结构和初始化我的目录结构非常简单miner/ ├── index.html ├── css/ │ └── style.css └── js/ ├── main.js // 入口与游戏初始化 ├── items.js // 物品定义与关卡数据 ├── hook.js // 抓钩逻辑 ├── render.js // 绘制函数集合 └── game.js // 游戏主循环和状态管理index.html只需要一个canvas标签和一个承载UI信息的div容器。注意设置viewport以适配移动端!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0, user-scalableno title黄金矿工 HTML5/title link relstylesheet hrefcss/style.css /head body div idgame-wrap canvas idgameCanvas width800 height600/canvas div idui-panel span idscore0/span span idtarget目标: 1000/span span idtimer60s/span /div /div script srcjs/items.js/script script srcjs/hook.js/script script srcjs/render.js/script script srcjs/game.js/script script srcjs/main.js/script /body /html我用的画布是800x600这是考虑到复古街机比例、也方便后续扩展手机竖屏模式竖屏时改为600x800或其他比例只需要调整布局核心逻辑代码不需要改。3.2 绘制场景背景、矿工、抓钩绘制部分的顺序很关键先画背景再画物品再画矿工和抓钩。这样抓钩能一直显示在最上层不会出现钩子被金币挡住的视觉错误。背景我直接用渐变模拟地层// render.js function drawBackground(ctx) { // 地面以上用天空色 const skyGrad ctx.createLinearGradient(0, 0, 0, MINER_Y); skyGrad.addColorStop(0, #87CEEB); skyGrad.addColorStop(1, #C9E8F5); ctx.fillStyle skyGrad; ctx.fillRect(0, 0, canvas.width, MINER_Y); // 地下部分用深褐色渐变模拟泥土 const groundGrad ctx.createLinearGradient(0, MINER_Y, 0, canvas.height); groundGrad.addColorStop(0, #8B5A2B); groundGrad.addColorStop(1, #4A2E12); ctx.fillStyle groundGrad; ctx.fillRect(0, MINER_Y, canvas.width, canvas.height - MINER_Y); // 再加一些随机小石头点缀用固定随机种子否则每帧都不一样 drawDirtDetails(ctx); }矿工可以简单画成一个坐在凳子上的小人轮廓。如果你懒得调像素绘制用两个圆形一个矩形也能示意。我自己是画了一个头戴安全帽的角色身体微微前倾钩爪从胸前延伸出去。矿工的位置固定在画布底部偏上区域MINER_X在画布水平中心MINER_Y大概在canvas.height * 0.75的位置。抓钩的绘制其实只有三部分线、钩子、钩尖。线就是一条从矿工发射点到钩尖的直线钩子可以用路径画一个简单的弯弧钩尖加粗。绘制时把线条宽度跟钩爪回收状态挂钩回收时稍微细一点点视觉上更有动态感。3.3 游戏主循环和状态管理游戏主循环我推荐直接用requestAnimationFrame不要用setInterval。原因很简单requestAnimationFrame会在浏览器重绘之前调用帧率跟屏幕刷新率同步动画平滑也不会在标签页切到后台时继续空转消耗CPU。// game.js let gameState ACTIONS.READY; // READY / SHOOTING / RETRACTING / GAME_OVER / LEVEL_CLEAR function gameLoop(timestamp) { const deltaTime getDeltaTime(timestamp); // 毫秒差转成秒 update(deltaTime); render(ctx); requestAnimationFrame(gameLoop); }update是核心逻辑所在我把它分成几步function update(dt) { updateTimer(dt); switch (gameState) { case ACTIONS.READY: // 钩爪左右摆动 updateSwing(dt); break; case ACTIONS.SHOOTING: // 钩爪延伸并做碰撞检测 updateShooting(dt); break; case ACTIONS.RETRACTING: // 钩爪携带物品回收 updateRetracting(dt); break; } checkWinLose(); }状态机看着简单但一定要严格明确“状态迁移条件”。比如SHOOTING转到RETRACTING只有两种情况抓到物品或者钩爪达到了最大长度。抓不到物品时钩爪到头之后要原路返回这个返回过程也走RETRACTING状态只不过currentItem为空。很多复制来的源码在这里喜欢直接把状态改成READY并且让钩爪瞬移回去那视觉效果就很生硬玩家会觉得手感很怪。倒计时的实现也在这里。我在game.js里维护一个timeLeft变量每帧timeLeft - dt。当timeLeft 0时进入结算判定如果当前分数大于等于目标分进入下一关否则游戏结束。倒计时建议在画布的UI区域用大字显示做成红白渐变数字快结束时闪烁。3.4 关卡设计用数据驱动代替硬编码关卡设计是整个项目里最容易被低估、却对可玩性影响最大的部分。我的做法是用静态数组配置每一关的物品分布、目标分数和时间限制然后提供一个简单的加载函数。// items.js const LEVELS [ { targetScore: 1000, timeLimit: 60, items: [ { type: gold, size: small, x: 200, y: 150 }, { type: gold, size: small, x: 350, y: 120 }, { type: gold, size: medium, x: 540, y: 200 }, { type: rock, size: small, x: 460, y: 160 }, { type: diamond, x: 660, y: 320 }, // ...更多 ] }, { targetScore: 2000, timeLimit: 60, items: [ // ... ] } // 可以配置到十几关 ];物品坐标建议遵循“近处少量、远处密布、越深收益越高但障碍也越多”的分布原则。第一关的物品都集中在浅层几乎没什么石头让玩家上手第二关开始加入石块并让金块往深处分布。到了第五关之后地图上甚至会出现需要连抓两次的大型石块把它拆成上下两块放在一起第二次抓取才能拿掉。每次进入新关卡时调用loadLevel(levelIndex)根据LEVELS[levelIndex]生成物品数组并重置所有状态。物品数组里的x/y是相对画布中心或者左上角的坐标。我用的是相对坐标 偏移量的方式这样以后做小屏适配时按画布缩放比例整体移动即可不用逐个坐标调整。3.5 UI与交互分数、倒计时、操作提示UI 分为画布内绘制和画布外DOM两种方式。我推荐把核心信息分数、倒计时、目标绘制在画布顶部这样截图、录屏的时候信息是完整的把按钮类交互开始游戏、下一关、重玩放在DOM里这样和原生按钮的点击体验一致也方便做键盘事件适配。实现上我做了三块画布顶部UI绘制三个文本块左对齐显示分数居中显示目标分右对齐显示剩余时间。用ctx.font bold 20px Arial再给文字添加一个半透明黑底矩形确保在浅色背景下也清晰可见。操作提示在第一次进入某关卡时画布中央弹出一句话比如“等待钩爪摆动按空格发射”。这个提示只显示3秒避免干扰玩家。按键绑定空格键负责发射和后续的道具操作如果抓了东西再用空格就视为使用炸药再来一次空格表示确认使用力量饮料——这个可能需要区分但如果你的操作不想搞太复杂直接把道具按钮做成画布内的圆形按钮也可以。我建议最少支持鼠标和触屏操作。鼠标点击画布任意位置就等于按下空格触屏点击同理。这样移动端打开就能玩不需要额外适配键盘。4. 折磨过我的那些Bug以及排查思路每个游戏项目都有那么几个让人抓狂的时刻。这里记录几个我在开发过程中真实遇到过、也花了不少时间解决的问题希望能帮你跳过这些坑。4.1 钩爪穿过石头直接钩到钻石这个就是我前面提到的“高速穿透”问题是我遇到的第一个大Bug。当时我把钩爪延伸速度设成了每帧24像素差不多1440像素/秒的极速想测试手感结果抓钩直接穿过了半径12像素的金块。排查思路是这样的先在碰撞判定处加上断点日志发现确实判定没有触发然后用数学方式验证发现单帧步长确实大于物品直径最后用限制步长的方式解决。最终我采用了更稳妥的方式把延伸速度按帧率归一化处理。function updateShooting(dt) { // 速度单位像素/秒 const step SHOOT_SPEED * dt; // 步长如果超过某个阈值拆成多步计算碰撞 const maxStep 6; // 最大单步像素 const steps Math.ceil(step / maxStep); const realStep step / steps; for (let i 0; i steps; i) { hookLength realStep; hookTipX minerX Math.cos(shootAngle) * hookLength; hookTipY minerY Math.sin(shootAngle) * hookLength; if (checkHookCollision()) break; } }这样即使帧率降到20以下也只是多算几次碰撞不会出现“看到钩子穿过了金币”的情况。实测下来就算帧率波动很大手感也没什么差异。4.2 回收速度突然变快或者卡住这是一个跟requestAnimationFrame的时间参数有关的坑。如果游戏运行过程中切到后台再切回来有些浏览器会把dt算得非常大比如5秒甚至10秒这会导致游戏时间瞬间跳变、钩爪速度异常关卡倒计时直接清零。解决方案是限制单帧时间差上限function getDeltaTime(timestamp) { let dt (timestamp - lastTimestamp) / 1000; dt Math.min(dt, 0.1); // 限制最大帧间隔为100ms防止切后台后跳变 lastTimestamp timestamp; return dt; }Math.min(dt, 0.1)的意思是就算真正的时间差是2秒游戏也只按0.1秒去推进逻辑宁可让游戏慢半拍也不要出现状态错乱。这个限制对于一个固定速度的动作游戏来说非常必要。4.3 倒计时和抓取状态不同步早期版本里如果倒计时归零的时候钩爪正处于回收状态而且已经带回来一个价值很大的金块游戏会直接判定“超时失败”但这个金块其实已经触发了得分。玩家会看到分数明明涨了界面上却显示失败观感很差。我的解法是超时判定不在timeLeft 0的瞬间执行而是先让当前回收动作完整结束再判断最终分数。具体做法是加一个levelFinished标志function updateTimer(dt) { if (timeLeft 0) { timeLeft - dt; if (timeLeft 0) { timeLeft 0; levelFinished true; } } }然后在update里只有当levelFinished且 钩爪状态为READY不在回收中 时才进入结算界面。这样玩家最后抓的那个金块能正常记账而且结算前的过渡动画更自然。4.4 帧率不稳定导致手感飘不同设备性能差异很大。我的老笔记本能跑60帧但一个最低配手机可能只有30帧。如果游戏逻辑每帧执行固定步长那么低帧率设备上钩爪和摆动都会明显变慢。解决方法是把所有跟时间相关的逻辑都改成dt驱动绝对不要用“每帧加1”这种固定步数逻辑。检查清单摆动角度更新用time dt不要用time 1钩爪延伸/回收用hookLength speed * dt倒计时用timeLeft - dt道具持续时间用itemDuration - dt。全部改成时间驱动之后不管在什么设备上游戏体验都是一致的。这也算是我在金矿项目里养成的一个好习惯。5. 想进阶这几个方向值得试试做完基础版之后游戏已经能玩、有手感了。但如果你想把这个项目做成毕业设计、面试作品或者上架小游戏平台下面几个方向会很加分。5.1 物理引擎的引入边界你可能已经发现抓钩的摆动和回收速度都是“伪物理”——我们用公式模拟了看似真实的运动但没有真实的加速度和惯性。如果你想让钩爪在回收重物时有“拉不动”的细腻感觉可以尝试给回收速度加入一个简单的滞后模型比如在hookSpeed上叠加一个缓动过程。但我不建议直接把整个游戏迁移到matter.js这类物理引擎。对于这种轻量级游戏引入引擎反而会让逻辑复杂化排查问题也更困难。5.2 关卡编辑器从写死数据到可视化配置你可以做一个简单的关卡编辑器页面在地图上点击放置金块、钻石、石块拖拽调整位置然后一键导出成LEVELS数组的JSON。这样可以大大方便你后续调试关卡、测试平衡性。我自己的编辑器的做法是用同一个Canvas绘制地图额外增加鼠标事件点击时根据当前选中的物品类型插入对象按下CtrlZ可以撤销。整个编辑器代码量不大但带来的测试效率提升非常明显。5.3 移动端适配与触控手势移动端不仅仅是要响应点击事件还要考虑画布尺寸和UI缩放。最简单的适配方案是把画布按屏幕宽度等比例缩放同时让画布内的逻辑坐标保持不变#gameCanvas { width: 100%; max-width: 800px; aspect-ratio: 4 / 3; }触控手势方面除了点击发射外还可以加上“双指点击使用炸药”等快捷操作。但是要注意误触——如果你的目标玩家是桌面端用户移动端手势只是补充不要把核心操作设计成只支持触屏。5.4 音效与视觉反馈的细节打磨游戏开发中“音效”往往被忽视但它对“手感”的贡献巨大。我就拿一个具体例子说明抓钩回收金块时如果没有音效玩家很难判断“是否已经抓牢”加上一个短暂的“叮”声之后操作确认感立刻提升。音效可以用浏览器的Web Audio API动态生成不需要任何外部音频文件。比如用振荡器模拟一个短的金属撞击声function playDing() { const audioCtx new (window.AudioContext || window.webkitAudioContext)(); const oscillator audioCtx.createOscillator(); const gainNode audioCtx.createGain(); oscillator.type sine; oscillator.frequency.setValueAtTime(880, audioCtx.currentTime); oscillator.frequency.exponentialRampToValueAtTime(520, audioCtx.currentTime 0.15); gainNode.gain.setValueAtTime(0.4, audioCtx.currentTime); gainNode.gain.exponentialRampToValueAtTime(0.01, audioCtx.currentTime 0.2); oscillator.connect(gainNode); gainNode.connect(audioCtx.destination); oscillator.start(); oscillator.stop(audioCtx.currentTime 0.2); }同理抓空、爆炸、倒计时急响等都能用几行代码合成。无需找素材效果正合适。视觉效果方面也别只在分数上做文章。抓到大金块时可以给金块加一个“发光”效果canvas 里用增加外发光阴影实现抓空时钩爪变灰都能显著提升游戏的反馈质量。5.5 存档与成就系统如果你想让游戏更有“完整作品”的感觉可以加上本地存档——使用localStorage保存最高分、已解锁关卡、总抓取数量等统计信息。甚至再加几个基础成就“一次性抓取钻石”、“三秒内连续抓取两种物品”、“完成第10关”逻辑都不复杂却能让玩家黏性提升不少。这部分我建议放最后做因为它是锦上添花不影响核心玩法。6. 我的个人心得体会说句实在话黄金矿工这个项目我前前后后重写过三遍。第一遍是按教程一步步敲的代码能跑但完全看不懂为什么这么写第二遍是工作以后想搞清楚“物理感”到底是什么开始把摆动、回收、碰撞都抽象成函数和状态机第三遍才真正融入自己的关卡设计和道具扩展。每一次重写都有新收获。如果你现在的水平还停留在“面向奇偶校验编程”的阶段做这个小游戏时最需要留意的就是在写update逻辑的时候千万不要把状态机搞成一团乱麻。学会用“当前状态决定当前能做的事”这套思维以后做任何复杂游戏都会事半功倍。最后再分享一个实用的小技巧在开发过程中尽量给游戏加一个调试模式——按F12打开控制台时在Canvas左上角绘制所有物品的碰撞区域半透明圆形和当前钩爪状态。这个调试开关在排查“怎么老是穿模”“状态是不是没切过去”这类问题的时候比打印一百条日志都好用。调试开关也简单就是一个全局debug变量在渲染函数里判断一下即可。希望这份源码解析和实操记录能帮你在实现“黄金矿工H5游戏”的路上少走一点弯路。如果最后运行起来发现哪里手感不对先别急着怀疑是自己的代码有问题先玩玩别人做得好的版本对比一下差距在哪里。游戏开发里“手感”这东西很多情况下是改出来的不是写出来的。本文还有配套的精品资源点击获取 HTML5黄金矿工游戏开发实战：Canvas碰撞检测与状态机解析
简介游戏开发是前端技术综合应用的最佳场景之一而基于HTML5 Canvas的小游戏开发更是入门者理解核心概念的理想路径。从基础的游戏循环到关键的相互作用逻辑开发者需要掌握渲染、状态管理、碰撞检测等底层技术。碰撞检测决定游戏交互的真实感而状态机则让复杂流程清晰可控。借助这些技术我们可以用原生JavaScript实现经典玩法打造具备完整手感的交互体验。这类项目既适合前端初学者巩固语法与逻辑也为独立小游戏开发提供了轻量级范本。本文以黄金矿工为例从零拆解其核心机制覆盖抓钩摆动、物品回收、关卡数据驱动等完整实现细节帮助你在实战中建立系统化游戏开发思维轻松构建属于自己的HTML5互动作品。1. 为什么我建议用“黄金矿工”作为HTML5练手项目说起HTML5小游戏很多人第一个想到的就是“黄金矿工”。市面上各种版本满天飞从Flash时代一路活到现在的经典玩法放到HTML5技术栈里重做一遍其实是一个性价比极高的练手项目。我自己的感受是一个完整的黄金矿工H5版本几乎把游戏开发里最核心的几块拼图都过了一遍——Canvas渲染、游戏循环、碰撞检测、状态机管理、关卡配置、UI交互。这些东西在大型引擎里被层层封装你在黄金矿工里却能看到最原始的形态理解起来反而更深刻。这个项目适合谁两类人。一类是刚学完JavaScript基础、想找一个“能拿得出手”的项目来巩固DOM操作和逻辑能力的前端初学者另一类是想做独立小游戏、但不想一上来就上手重型引擎的开发者。说实话用纯HTML5、CSS和原生JavaScript实现一个能玩、有手感、有完整流程的黄金矿工代码量大概在800到1500行之间。这个体量非常合适——不会小到没有挑战也不会大到让人中途弃坑。这个游戏的核心玩法大家都很熟悉屏幕下方有一个矿工一根带钩爪的绳索可以向下、向左右延伸抓到地下的金块、钻石、石块等物品后回收回收的物品按价值计分玩家要在限定的时间内达到关卡目标分数否则闯关失败。听起来简单但真正把“钩爪摆动的物理感”“抓取回收的速度感”“物品价值的平衡感”做好需要不少细节打磨。这篇文章就从零到一把我自己实现这个项目时的完整思路、代码结构和踩坑记录都整理出来给想动手复刻的朋友一个参考。提示文中的代码片段是完整项目中的核心逻辑摘录直接Copy可以跑通主流程但完整版涉及较多资源文件图片、音效我建议你重写或替换成绘图API生成的图形这样就不依赖外部素材了。2. 核心机制拆解从游戏逻辑到数学建模很多人一开始就把游戏实现想得过于玄乎实际上剥离掉画面和音效之后任何游戏本质上都是一堆状态和数字在循环变化。黄金矿工也不例外。整个游戏的核心可以拆成四个模块抓钩的摆动与延伸、抓取判定与回收、物品的价值和速度模型、关卡流程和UI状态。把这四个模块吃透游戏就已经完成了一大半。2.1 抓钩那根线其实是三角函数先来聊最出戏也最关键的抓钩系统。抓钩的初始状态是垂直向下然后会像钟摆一样左右摆动。玩家的操作只有一次在合适的时间按下按钮钩爪就沿着当前摆动方向射出去。这个“摆动”效果很多人第一反应是用动画帧不断修改角度但这里最干净的做法是直接用三角函数建模。抓钩在等待发射的状态下本质上就是一条从矿工位置出发、长度固定比如80像素、角度随时间变化的线段。这个角度怎么变我用的公式是// hookAngle 是当前角度hookAngleMin/Max 是摆动范围swingSpeed 是摆动速度 hookAngle hookAngleMin (hookAngleMax - hookAngleMin) / 2 Math.sin(time * swingSpeed) * (hookAngleMax - hookAngleMin) / 2;这里的time是累积的游戏时间用performance.now()或者帧计数累积swingSpeed控制摆动快慢hookAngleMin和hookAngleMax限制了摆动的左右边界。用Math.sin的好处是摆动天然是平滑的简谐运动从最左到最右再回来速度在两端慢、中间快看起来非常自然。不需要单独维护“当前速度”和“加速度”变量一个正弦函数全搞定。发射后的钩爪就简单了。记录发射时的角度shootAngle维护一个hookLength变量每帧增加固定的延伸速度直到达到最大长度或者碰到障碍物。延伸方向就是// hookTipX/Y 是钩爪尖端坐标 hookTipX minerX Math.cos(shootAngle) * hookLength; hookTipY minerY Math.sin(shootAngle) * hookLength;这里有一个新手经常犯的错误发射后没有把摆动角度固定下来导致钩爪在延伸过程中还在左右晃。正确做法是发射瞬间把当前角度存为shootAngle后续所有计算都基于这个固定角度直到钩爪回收完成、重新进入待发射状态。2.2 抓取判定不光是“碰到了”这么简单抓取判定的实现方式取决于你的场景是“像素碰撞”还是“圆形/矩形碰撞”。黄金矿工里的物品金块、钻石、石块在屏幕上是静态的可以用一个简单的几何模型把每个物品抽象成一个圆形或矩形区域把钩爪尖端抽象成一个点然后用“点是否在区域内”来做判定。我实际采用的是圆形模型因为测试下来对玩家的视觉反馈最友好。每个物品包含x、y、radius属性钩爪尖端是一个点那么碰撞条件就是距离判断const dx hookTipX - item.x; const dy hookTipY - item.y; const dist Math.sqrt(dx * dx dy * dy); if (dist item.radius HOOK_RADIUS) { // 抓到物品进入回收状态 }这个判断每帧做一次就行。但要提醒的是如果钩爪延伸速度太快一帧移动超过物品半径的两倍就会出现“穿模”——上一帧还在物品上方下一帧已经越过物品中心距离判断还没来得及触发。解决方式有两种一是限制每帧的延伸步长不超过一个合理的像素值比如6像素二是做线段与圆形的相交检测。我建议初学者先用前一种限制速度简单而且视觉上也看不出僵硬感如果钩爪速度是你的玩法核心再考虑精细的线段相交检测。抓到物品之后的回收状态也有不少细节。正常逻辑是钩爪带着物品一起以一定的速度回收。但不同物品的重量不同重量大的物品回收速度会明显变慢。这里需要设计一个“负载速度衰减”模型我的实现是// 基础回收速度 800像素/秒物品重量 100 表示正常情况下不减速 const weightFactor Math.max(0.3, 1 - (item.weight - 100) / 1200); hookSpeed baseRetractSpeed * weightFactor;这样金块越小越轻回收越快大金块和石块回收速度会显著下降。这个减速不只是为了拟真它其实是游戏策略性的来源——玩家必须权衡“时间成本”和“物品价值”这是黄金矿工玩法的灵魂所在。2.3 物品的价值和速度模型物品系统是关卡设计的地基。我先定义了几类基础物品每类有固定的大小和分值然后用一个价格公式来动态生成变体。物品模型大概是这样物品类型基础分值基础半径重量颜色/表现小金块1008像素30土黄色中金块30014像素60亮黄色大金块60022像素120金黄色偏亮钻石80012像素20青蓝色闪烁石块1020~35像素300灰色幸运袋20012像素40绿色圆点闪烁重量决定了回收速度。大石块重量300回收速度被削减到大概三分之一非常难受。所以玩家抓石块往往不是想拿那10分而是因为石块挡在金块上面必须先清掉或者目标值就差一点来不及抓大金块了。这里有一个设计技巧把物品的“价值密度”做成差异化。金矿越深越大分值越高但回收时间也越长。钻石虽然单颗价值高但往往分布在深处且有石块阻挡。玩家要在有限的60秒内不断做“投资回报率”的判断这就是游戏好玩的核心动力。我强烈建议把物品的定义数据化不要写在绘制逻辑里。每个关卡只定义一个物品数组每个物品是一个对象包含类型、坐标、半径、分值、重量等属性。这样后面想做关卡编辑器、随机生成地图、甚至关卡难度动态调整都只需要操作数据不需要动游戏逻辑。2.4 道具让游戏不无聊的关键纯抓金块很容易腻道具系统是黄金矿工的调味剂。经典版本里有三个道具炸药TNT、力量饮料、幸运袋。炸药的作用是瞬间炸掉当前抓到的物品无论多重但放弃该物品的分值。这个道具的设计意图很明确当玩家抓到一个超重的石块、后悔了想止损的时候炸药是好选择。实现上很简单回收状态下检测到玩家按下炸药按键销毁当前持有物品并重置钩爪状态即可。注意点是要防止玩家在抓到物品之前误按炸药——正常情况下应该在“已抓取且正在回收”状态才允许使用炸药。力量饮料的效果是让回收速度变成原来的两倍持续10秒左右。这个实现更简单用一个计时器变量在回收速度计算时检测一下力量效果是否激活即可。比较有技巧的是UI反馈如果玩家用了力量饮料最好在钩爪上添加一个简单的发光效果或者变色描边让玩家有“我变强了”的感知。幸运袋的效果是随机获得200到500分的额外分数通常在地图里随机刷新。它的实现就是一个带随机值的物品类被抓取后直接加分不需要单独的回收动画。这个小设计能让每一局的体验都有细微差异成本极低但玩家反馈很好。3. 实操过程一步步把游戏跑起来聊完抽象机制下面进入能复制粘贴的部分。我会按实现顺序把关键代码和配置逻辑过一遍你可以边看边在本地同步操作。我不推荐用任何框架就用纯JavaScript Canvas这样最透明也最容易排查问题。3.1 项目结构和初始化我的目录结构非常简单miner/ ├── index.html ├── css/ │ └── style.css └── js/ ├── main.js // 入口与游戏初始化 ├── items.js // 物品定义与关卡数据 ├── hook.js // 抓钩逻辑 ├── render.js // 绘制函数集合 └── game.js // 游戏主循环和状态管理index.html只需要一个canvas标签和一个承载UI信息的div容器。注意设置viewport以适配移动端!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0, user-scalableno title黄金矿工 HTML5/title link relstylesheet hrefcss/style.css /head body div idgame-wrap canvas idgameCanvas width800 height600/canvas div idui-panel span idscore0/span span idtarget目标: 1000/span span idtimer60s/span /div /div script srcjs/items.js/script script srcjs/hook.js/script script srcjs/render.js/script script srcjs/game.js/script script srcjs/main.js/script /body /html我用的画布是800x600这是考虑到复古街机比例、也方便后续扩展手机竖屏模式竖屏时改为600x800或其他比例只需要调整布局核心逻辑代码不需要改。3.2 绘制场景背景、矿工、抓钩绘制部分的顺序很关键先画背景再画物品再画矿工和抓钩。这样抓钩能一直显示在最上层不会出现钩子被金币挡住的视觉错误。背景我直接用渐变模拟地层// render.js function drawBackground(ctx) { // 地面以上用天空色 const skyGrad ctx.createLinearGradient(0, 0, 0, MINER_Y); skyGrad.addColorStop(0, #87CEEB); skyGrad.addColorStop(1, #C9E8F5); ctx.fillStyle skyGrad; ctx.fillRect(0, 0, canvas.width, MINER_Y); // 地下部分用深褐色渐变模拟泥土 const groundGrad ctx.createLinearGradient(0, MINER_Y, 0, canvas.height); groundGrad.addColorStop(0, #8B5A2B); groundGrad.addColorStop(1, #4A2E12); ctx.fillStyle groundGrad; ctx.fillRect(0, MINER_Y, canvas.width, canvas.height - MINER_Y); // 再加一些随机小石头点缀用固定随机种子否则每帧都不一样 drawDirtDetails(ctx); }矿工可以简单画成一个坐在凳子上的小人轮廓。如果你懒得调像素绘制用两个圆形一个矩形也能示意。我自己是画了一个头戴安全帽的角色身体微微前倾钩爪从胸前延伸出去。矿工的位置固定在画布底部偏上区域MINER_X在画布水平中心MINER_Y大概在canvas.height * 0.75的位置。抓钩的绘制其实只有三部分线、钩子、钩尖。线就是一条从矿工发射点到钩尖的直线钩子可以用路径画一个简单的弯弧钩尖加粗。绘制时把线条宽度跟钩爪回收状态挂钩回收时稍微细一点点视觉上更有动态感。3.3 游戏主循环和状态管理游戏主循环我推荐直接用requestAnimationFrame不要用setInterval。原因很简单requestAnimationFrame会在浏览器重绘之前调用帧率跟屏幕刷新率同步动画平滑也不会在标签页切到后台时继续空转消耗CPU。// game.js let gameState ACTIONS.READY; // READY / SHOOTING / RETRACTING / GAME_OVER / LEVEL_CLEAR function gameLoop(timestamp) { const deltaTime getDeltaTime(timestamp); // 毫秒差转成秒 update(deltaTime); render(ctx); requestAnimationFrame(gameLoop); }update是核心逻辑所在我把它分成几步function update(dt) { updateTimer(dt); switch (gameState) { case ACTIONS.READY: // 钩爪左右摆动 updateSwing(dt); break; case ACTIONS.SHOOTING: // 钩爪延伸并做碰撞检测 updateShooting(dt); break; case ACTIONS.RETRACTING: // 钩爪携带物品回收 updateRetracting(dt); break; } checkWinLose(); }状态机看着简单但一定要严格明确“状态迁移条件”。比如SHOOTING转到RETRACTING只有两种情况抓到物品或者钩爪达到了最大长度。抓不到物品时钩爪到头之后要原路返回这个返回过程也走RETRACTING状态只不过currentItem为空。很多复制来的源码在这里喜欢直接把状态改成READY并且让钩爪瞬移回去那视觉效果就很生硬玩家会觉得手感很怪。倒计时的实现也在这里。我在game.js里维护一个timeLeft变量每帧timeLeft - dt。当timeLeft 0时进入结算判定如果当前分数大于等于目标分进入下一关否则游戏结束。倒计时建议在画布的UI区域用大字显示做成红白渐变数字快结束时闪烁。3.4 关卡设计用数据驱动代替硬编码关卡设计是整个项目里最容易被低估、却对可玩性影响最大的部分。我的做法是用静态数组配置每一关的物品分布、目标分数和时间限制然后提供一个简单的加载函数。// items.js const LEVELS [ { targetScore: 1000, timeLimit: 60, items: [ { type: gold, size: small, x: 200, y: 150 }, { type: gold, size: small, x: 350, y: 120 }, { type: gold, size: medium, x: 540, y: 200 }, { type: rock, size: small, x: 460, y: 160 }, { type: diamond, x: 660, y: 320 }, // ...更多 ] }, { targetScore: 2000, timeLimit: 60, items: [ // ... ] } // 可以配置到十几关 ];物品坐标建议遵循“近处少量、远处密布、越深收益越高但障碍也越多”的分布原则。第一关的物品都集中在浅层几乎没什么石头让玩家上手第二关开始加入石块并让金块往深处分布。到了第五关之后地图上甚至会出现需要连抓两次的大型石块把它拆成上下两块放在一起第二次抓取才能拿掉。每次进入新关卡时调用loadLevel(levelIndex)根据LEVELS[levelIndex]生成物品数组并重置所有状态。物品数组里的x/y是相对画布中心或者左上角的坐标。我用的是相对坐标 偏移量的方式这样以后做小屏适配时按画布缩放比例整体移动即可不用逐个坐标调整。3.5 UI与交互分数、倒计时、操作提示UI 分为画布内绘制和画布外DOM两种方式。我推荐把核心信息分数、倒计时、目标绘制在画布顶部这样截图、录屏的时候信息是完整的把按钮类交互开始游戏、下一关、重玩放在DOM里这样和原生按钮的点击体验一致也方便做键盘事件适配。实现上我做了三块画布顶部UI绘制三个文本块左对齐显示分数居中显示目标分右对齐显示剩余时间。用ctx.font bold 20px Arial再给文字添加一个半透明黑底矩形确保在浅色背景下也清晰可见。操作提示在第一次进入某关卡时画布中央弹出一句话比如“等待钩爪摆动按空格发射”。这个提示只显示3秒避免干扰玩家。按键绑定空格键负责发射和后续的道具操作如果抓了东西再用空格就视为使用炸药再来一次空格表示确认使用力量饮料——这个可能需要区分但如果你的操作不想搞太复杂直接把道具按钮做成画布内的圆形按钮也可以。我建议最少支持鼠标和触屏操作。鼠标点击画布任意位置就等于按下空格触屏点击同理。这样移动端打开就能玩不需要额外适配键盘。4. 折磨过我的那些Bug以及排查思路每个游戏项目都有那么几个让人抓狂的时刻。这里记录几个我在开发过程中真实遇到过、也花了不少时间解决的问题希望能帮你跳过这些坑。4.1 钩爪穿过石头直接钩到钻石这个就是我前面提到的“高速穿透”问题是我遇到的第一个大Bug。当时我把钩爪延伸速度设成了每帧24像素差不多1440像素/秒的极速想测试手感结果抓钩直接穿过了半径12像素的金块。排查思路是这样的先在碰撞判定处加上断点日志发现确实判定没有触发然后用数学方式验证发现单帧步长确实大于物品直径最后用限制步长的方式解决。最终我采用了更稳妥的方式把延伸速度按帧率归一化处理。function updateShooting(dt) { // 速度单位像素/秒 const step SHOOT_SPEED * dt; // 步长如果超过某个阈值拆成多步计算碰撞 const maxStep 6; // 最大单步像素 const steps Math.ceil(step / maxStep); const realStep step / steps; for (let i 0; i steps; i) { hookLength realStep; hookTipX minerX Math.cos(shootAngle) * hookLength; hookTipY minerY Math.sin(shootAngle) * hookLength; if (checkHookCollision()) break; } }这样即使帧率降到20以下也只是多算几次碰撞不会出现“看到钩子穿过了金币”的情况。实测下来就算帧率波动很大手感也没什么差异。4.2 回收速度突然变快或者卡住这是一个跟requestAnimationFrame的时间参数有关的坑。如果游戏运行过程中切到后台再切回来有些浏览器会把dt算得非常大比如5秒甚至10秒这会导致游戏时间瞬间跳变、钩爪速度异常关卡倒计时直接清零。解决方案是限制单帧时间差上限function getDeltaTime(timestamp) { let dt (timestamp - lastTimestamp) / 1000; dt Math.min(dt, 0.1); // 限制最大帧间隔为100ms防止切后台后跳变 lastTimestamp timestamp; return dt; }Math.min(dt, 0.1)的意思是就算真正的时间差是2秒游戏也只按0.1秒去推进逻辑宁可让游戏慢半拍也不要出现状态错乱。这个限制对于一个固定速度的动作游戏来说非常必要。4.3 倒计时和抓取状态不同步早期版本里如果倒计时归零的时候钩爪正处于回收状态而且已经带回来一个价值很大的金块游戏会直接判定“超时失败”但这个金块其实已经触发了得分。玩家会看到分数明明涨了界面上却显示失败观感很差。我的解法是超时判定不在timeLeft 0的瞬间执行而是先让当前回收动作完整结束再判断最终分数。具体做法是加一个levelFinished标志function updateTimer(dt) { if (timeLeft 0) { timeLeft - dt; if (timeLeft 0) { timeLeft 0; levelFinished true; } } }然后在update里只有当levelFinished且 钩爪状态为READY不在回收中 时才进入结算界面。这样玩家最后抓的那个金块能正常记账而且结算前的过渡动画更自然。4.4 帧率不稳定导致手感飘不同设备性能差异很大。我的老笔记本能跑60帧但一个最低配手机可能只有30帧。如果游戏逻辑每帧执行固定步长那么低帧率设备上钩爪和摆动都会明显变慢。解决方法是把所有跟时间相关的逻辑都改成dt驱动绝对不要用“每帧加1”这种固定步数逻辑。检查清单摆动角度更新用time dt不要用time 1钩爪延伸/回收用hookLength speed * dt倒计时用timeLeft - dt道具持续时间用itemDuration - dt。全部改成时间驱动之后不管在什么设备上游戏体验都是一致的。这也算是我在金矿项目里养成的一个好习惯。5. 想进阶这几个方向值得试试做完基础版之后游戏已经能玩、有手感了。但如果你想把这个项目做成毕业设计、面试作品或者上架小游戏平台下面几个方向会很加分。5.1 物理引擎的引入边界你可能已经发现抓钩的摆动和回收速度都是“伪物理”——我们用公式模拟了看似真实的运动但没有真实的加速度和惯性。如果你想让钩爪在回收重物时有“拉不动”的细腻感觉可以尝试给回收速度加入一个简单的滞后模型比如在hookSpeed上叠加一个缓动过程。但我不建议直接把整个游戏迁移到matter.js这类物理引擎。对于这种轻量级游戏引入引擎反而会让逻辑复杂化排查问题也更困难。5.2 关卡编辑器从写死数据到可视化配置你可以做一个简单的关卡编辑器页面在地图上点击放置金块、钻石、石块拖拽调整位置然后一键导出成LEVELS数组的JSON。这样可以大大方便你后续调试关卡、测试平衡性。我自己的编辑器的做法是用同一个Canvas绘制地图额外增加鼠标事件点击时根据当前选中的物品类型插入对象按下CtrlZ可以撤销。整个编辑器代码量不大但带来的测试效率提升非常明显。5.3 移动端适配与触控手势移动端不仅仅是要响应点击事件还要考虑画布尺寸和UI缩放。最简单的适配方案是把画布按屏幕宽度等比例缩放同时让画布内的逻辑坐标保持不变#gameCanvas { width: 100%; max-width: 800px; aspect-ratio: 4 / 3; }触控手势方面除了点击发射外还可以加上“双指点击使用炸药”等快捷操作。但是要注意误触——如果你的目标玩家是桌面端用户移动端手势只是补充不要把核心操作设计成只支持触屏。5.4 音效与视觉反馈的细节打磨游戏开发中“音效”往往被忽视但它对“手感”的贡献巨大。我就拿一个具体例子说明抓钩回收金块时如果没有音效玩家很难判断“是否已经抓牢”加上一个短暂的“叮”声之后操作确认感立刻提升。音效可以用浏览器的Web Audio API动态生成不需要任何外部音频文件。比如用振荡器模拟一个短的金属撞击声function playDing() { const audioCtx new (window.AudioContext || window.webkitAudioContext)(); const oscillator audioCtx.createOscillator(); const gainNode audioCtx.createGain(); oscillator.type sine; oscillator.frequency.setValueAtTime(880, audioCtx.currentTime); oscillator.frequency.exponentialRampToValueAtTime(520, audioCtx.currentTime 0.15); gainNode.gain.setValueAtTime(0.4, audioCtx.currentTime); gainNode.gain.exponentialRampToValueAtTime(0.01, audioCtx.currentTime 0.2); oscillator.connect(gainNode); gainNode.connect(audioCtx.destination); oscillator.start(); oscillator.stop(audioCtx.currentTime 0.2); }同理抓空、爆炸、倒计时急响等都能用几行代码合成。无需找素材效果正合适。视觉效果方面也别只在分数上做文章。抓到大金块时可以给金块加一个“发光”效果canvas 里用增加外发光阴影实现抓空时钩爪变灰都能显著提升游戏的反馈质量。5.5 存档与成就系统如果你想让游戏更有“完整作品”的感觉可以加上本地存档——使用localStorage保存最高分、已解锁关卡、总抓取数量等统计信息。甚至再加几个基础成就“一次性抓取钻石”、“三秒内连续抓取两种物品”、“完成第10关”逻辑都不复杂却能让玩家黏性提升不少。这部分我建议放最后做因为它是锦上添花不影响核心玩法。6. 我的个人心得体会说句实在话黄金矿工这个项目我前前后后重写过三遍。第一遍是按教程一步步敲的代码能跑但完全看不懂为什么这么写第二遍是工作以后想搞清楚“物理感”到底是什么开始把摆动、回收、碰撞都抽象成函数和状态机第三遍才真正融入自己的关卡设计和道具扩展。每一次重写都有新收获。如果你现在的水平还停留在“面向奇偶校验编程”的阶段做这个小游戏时最需要留意的就是在写update逻辑的时候千万不要把状态机搞成一团乱麻。学会用“当前状态决定当前能做的事”这套思维以后做任何复杂游戏都会事半功倍。最后再分享一个实用的小技巧在开发过程中尽量给游戏加一个调试模式——按F12打开控制台时在Canvas左上角绘制所有物品的碰撞区域半透明圆形和当前钩爪状态。这个调试开关在排查“怎么老是穿模”“状态是不是没切过去”这类问题的时候比打印一百条日志都好用。调试开关也简单就是一个全局debug变量在渲染函数里判断一下即可。希望这份源码解析和实操记录能帮你在实现“黄金矿工H5游戏”的路上少走一点弯路。如果最后运行起来发现哪里手感不对先别急着怀疑是自己的代码有问题先玩玩别人做得好的版本对比一下差距在哪里。游戏开发里“手感”这东西很多情况下是改出来的不是写出来的。本文还有配套的精品资源点击获取