简介面向H5游戏开发与运营者的四合一源码包涵盖口红机、打星星、叠乌龟、投篮四款互动游戏基于HTML5、CSS3与JavaScript实现适合作为直播互动、商城引流或移动端小游戏运营的参考项目。资源共13074个文件压缩包大小87.02MB核心文件类型包括php后端服务、js游戏逻辑与交互、png/jpg/gif界面素材、html/css页面结构样式以及json配置数据等整体以功能型代码和静态资源为主目录结构完整。已有108人学习下载。压缩包内附带start_all.bat及各子游戏启动脚本便于本地快速启动多个服务端。四款游戏分别覆盖随机抽取、消除、堆叠、抛物线投掷等经典玩法逻辑代码中涉及Canvas绘图、碰撞检测、计分系统和响应式布局等技术点方便开发者分析运营级H5游戏的工程组织方式与二次开发思路。1. 四款H5小游戏只是前端戏商城真正拼的是服务编排和存活设计拿到“戏商城口红机打星星叠乌龟投篮完美运营源码”这个压缩包先别急着打开HTML看Canvas特效。真正的信息量在根目录那7个bat文件和一个 random_compat.phar.pubkey.asc 里。这套东西不是传统意义的静态H5页面而是一套按顺序拉起的PHP服务集群账号服务单独占进程口红机、打星星、叠乌龟、投篮各自占一个常驻服务。任何一个玩法服务挂掉前端都会白屏或校验token失败。适合读这份源码的人不只是学Canvas动画的前端更是要做二次开发、线上部署和排障的后端工程师——这里完整展示了一套可运营的活动游戏架构。2. 服务拓扑拆解7个server脚本必须按序启动少一个入口都会异常2.1 从文件名反推角色划分账号、玩法和守护进程对照项目正文里的批处理文件清单可以还原出这套源码的部署结构。我按“文件名拼音/英文 常见PHP项目习惯”还原一下每个脚本的职能脚本角色推测监听端口依赖关系1.server_account.bat登录/token/用户资料9501无依赖必须最先启动2.server_tortoise.bat叠乌龟玩法服务9502依赖 account3.server_star.bat打星星玩法服务9503依赖 account4.server_dkh.bat口红机玩法服务9504依赖 account5.server_toulan.bat投篮玩法服务9505依赖 account6.server_running.bat看门狗/健康检查无独立运行7.server_cow.bat附加玩法服务9507依赖 account注意端口不一定就是这些值部署时以每个bat里实际的启动参数为准。不过从这个结构能看出它跟单体应用的本质区别account被拆出来之后四个玩法共享一套登录态用户在一个玩法里拿到的积分和兑换记录到另一个玩法里依然有效。这是“戏商城”这类多玩法H5活动页最常见也最稳的演进方向。这个结构跟我处理过的一批所谓“H5游戏源码”项目不一样。市面上很多源码包就一个HTML加几个JS连后端都没有只能本地点开看个样子谈不上运营。而这套东西既然带了服务编排就说明它是按“能上量、能隔离故障”的标准写的。对照muduo源码里“one loop per thread”的事件循环思路这套服务端的设计内核是一致的每个玩法进程维护自己独立的事件循环崩溃半径被限制在单个进程内不会像大胖子单体那样一崩全崩。2.2 启动编排start_all.bat 里“先账号后玩法再看门狗”的顺序逻辑先贴一段与这套源码结构一致的启动脚本对应根目录 0.start_all.batecho off title Opera Server Starter REM 1. 账号服务必须先起来其余玩法要拿它签发的 token start account /min cmd /c 1.server_account.bat timeout /t 2 /nobreak nul REM 2. 四个玩法服务可以并行拉起但要在 account 之后 for %%S in (2.server_tortoise.bat 3.server_star.bat 4.server_dkh.bat 5.server_toulan.bat) do ( start game_%%S /min cmd /c call %%S ) REM 3. 等玩法服务把端口 listen 起来再上守护 timeout /t 5 /nobreak nul start running /min cmd /c 6.server_running.bat代码逻辑不复杂但有几个点是实际部署才会踩到的。start 标签 /min cmd /c call xxx.bat中/min让服务在最小化窗口运行避免玩家或运维误关控制台timeout /t 2是给 account 留出写用户表和初始化 session 缓存的时间。我一般会在timeout之前加一句ping 127.0.0.1 -n 2 nul来兼容部分精简版 Windows因为某些系统的timeout指令会因为标准输入被重定向而直接退出。固定 sleep 2 秒在线上并不可靠。account 如果因为数据库慢而没就绪后五个服务起来后会在请求 token 时疯狂报错。更稳的做法是轮询端口而不是盲等:wait_account netstat -ano | findstr :9501 nul 21 if errorlevel 1 ( timeout /t 1 /nobreak nul goto wait_account )这段的核心思路是“探活”不是“猜时间”。netstat查的是本机监听套接字account 把 9501 端口 bind 成功就认为服务可用findstr :9501里加冒号是为了避免匹配到 19501、29501 这类无关端口。2.3 random_compat.phar.pubkey.asc 不是摆设PHP版本兼容的底线根目录那个 random_compat.phar.pubkey.asc 是 Composer 包 random_compat 的 OpenSSL 签名文件。random_compat 解决的是 PHP 5.x/7.0 没有random_int和random_bytes的问题——token 生成、抽奖、会话 ID 都必须用密码学安全随机数不能靠mt_rand()硬撑。这套源码大概率通过它来保证低版本 PHP 也能拿到安全随机源。?php // 在旧版 PHP 中无法直接调 random_int 时需要该 phar 提供 polyfill require_once __DIR__ . /vendor/random_compat.phar; function generateToken($accountId) { try { return bin2hex(random_bytes(16)); } catch (Exception $e) { // 极端情况下回退到 openssl 扩展 return bin2hex(openssl_random_pseudo_bytes(16)); } }这个文件的存在也是在提醒部署人员先确认 PHP 版本。PHP 7.1 以上自带random_int此时 phar 可以安全加载但不会覆盖内置函数PHP 5.6 环境则必须依赖它。很多人在 Windows 上双击 bat 起服务报错却去查数据库配置查了半天才发现是 PHP 版本太低random_int这个函数压根不存在。3. 口红机的“完美运营”藏在抽奖状态机里Canvas绘制、碰撞容差和保底算法先解释为什么把口红机单独拿出来讲。叠乌龟和打星星属于技巧型玩法玩家输赢主要看操作口红机是典型的概率型玩法直接跟运营收入挂钩。一套号称“完美运营”的源码最值钱的地方就在概率控制——既不能让玩家一眼看穿必中或必不中又要保证运营侧可以动态调保底。3.1 机械臂场景的 Canvas 分层绘制口红机画面通常分三层底层是口红陈列区中层是机械臂顶层是玻璃罩半透明遮罩。对应的 Canvas 绘制代码大致如下function renderScene(ctx, goodsList, claw) { // 层1口红包包陈列区每个格子按固定行列计算中心坐标 goodsList.forEach((g, i) { const col i % 5; const row Math.floor(i / 5); g.cx 140 col * 110; g.cy 140 row * 110; ctx.drawImage(g.image, g.cx - g.radius, g.cy - g.radius, g.radius * 2, g.radius * 2); }); // 层2机械臂由水平滑轨和垂直吊臂组成 ctx.fillStyle #334; ctx.fillRect(claw.railX, 40, 260, 12); // 水平滑轨 ctx.fillRect(claw.railX claw.offsetX - 6, 52, 12, claw.depth); // 垂直吊臂 // 层3玻璃罩半透明遮罩 ctx.fillStyle rgba(200, 220, 240, 0.12); ctx.fillRect(0, 0, canvas.width, canvas.height); }这里的关键是把“逻辑坐标”和“渲染坐标”分开每个口红的cx/cy先在数据层算好机械臂再用offsetX和depth表示当前横向和纵向位置。这样做的好处是后面做碰撞检测时不需要去解析像素直接拿坐标做数学判断就行。如果直接在drawImage里写死坐标后续调布局会非常痛苦。3.2 碰撞容差与吸附手感抓取半径为什么要给 8px 宽容度玩家点击“抓取”后客户端并不会马上把结果发给服务器而是先做一次本地碰撞检测命中后才把请求发给服务端判概率。前端检测代码function hitTest(clawX, clawY, target) { const dx clawX - target.cx; const dy clawY - target.cy; const dist Math.sqrt(dx * dx dy * dy); return dist target.radius 8; }target.radius 8里的 8px 不是乱加的。机械臂视觉上是塑料抓手口红是椭圆体玩家不会盯着 1px 的边缝去瞄。8px 的宽容度能显著缓解“明明对准了却没抓起来”的投诉。但注意宽容度只影响“请求是否发到服务端”真正决定玩家是否拿到口红的是服务端概率逻辑。这种设计叫“前端手感、后端公平”前端宽容些玩家觉得好抓后端严格按概率算防止有人通过连点或者断线重连刷奖励。3.3 服务端概率控制保底机制与随机数安全这是整个口红机模块最值得读的一段。有经验的运营会根据活动预算调整中奖率所以配置一般做成可调参数?php // 口红机抽奖逻辑服务端 class LipstickMachine { private $playCount 0; private $winRate; private $pityCount 80; public function __construct($winRate 600) { // winRate 单位为万分比600 表示 6% $this-winRate $winRate; } public function draw() { $this-playCount; if (function_exists(random_int)) { $rnd random_int(1, 10000); } else { // 旧版 PHP 依赖 random_compat phar 提供的 polyfill $rnd (int) floor(mt_rand() / mt_getrandmax() * 10000) 1; } // 先判保底再判随机命中后清零计数 if ($this-playCount $this-pityCount || $rnd $this-winRate) { $this-playCount 0; return true; } return false; } }这段逻辑有两个容易写错的地方。第一“先判断保底再判断随机”这个顺序不能反。如果先判随机玩家可能在保底前就中了但计数没清零导致下一次继续被保底触发预算失控。第二winRate用万分比而不是百分比是为了把概率细化到 0.01% 的粒度运营调整时不用动代码改配置即可。为什么不能用mt_rand()因为mt_rand()的种子是时间相关的攻击者连续抽几十次后能反推出当前 Mersenne Twister 的状态进而预测后续结果。random_int()基于系统熵源不可预测所以项目里才会出现 random_compat.phar.pubkey.asc 这个签名文件。提示上线前用压测工具打 20 万次抽奖接口统计实际中奖率和配置里的概率对比。如果偏差超过 0.5%优先检查是否有多实例部署导致计数不共享。3.4 断线重连的幂等处理防止扣了次数没出结果H5 活动在弱网下最容易被投诉的问题就是“我抽了 10 次但只看到 8 次结果”。原因往往是客户端请求发出后服务端已经扣了次数和返回奖品但响应在回传路上丢了。客户端重试后服务端又扣了一次。服务端解法是让客户端每次抽奖带上一个 UUID 作为幂等键?php public function drawWithIdempotency($userId, $requestId) { $cached $this-redis-get(draw:{$userId}:{$requestId}); if ($cached ! null) { return json_decode($cached, true); } $result $this-lipstickMachine-draw(); $this-redis-setex(draw:{$userId}:{$requestId}, 300, json_encode($result)); return $result; }这里的setex过期时间不能太长300 秒刚好覆盖弱网重试窗口又不会让 Redis 里堆满废弃 key。这个模式对口红机、打星星里的道具购买、积分兑换都适用。4. 打星星、叠乌龟、投篮的实现差异粒子池、CSS3物理与抛物线碰撞三个游戏虽然都是 H5但技术选型完全不同。打星星吃渲染性能叠乌龟吃物理手感投篮吃数学计算。分开看。玩法渲染层核心计算性能敏感点打星星Canvas 2D无物理纯粒子GC 抖动、对象池叠乌龟DOM CSS3偏移判定layout 重排、transform 合成投篮Canvas 2D重力 碰撞盒帧率钳制、dt 单位4.1 打星星用粒子池代替反复创建对象打星星玩法的核心是“星星出现→点击→炸裂→计分”。最直观的实现是点击时new一堆小圆点但一个星星炸出 20 颗粒子屏幕上同时有 10 个星星在飞就有 200 个对象存在老手机渲染时会频繁触发 GC 掉帧。class StarPool { constructor(canvas, capacity 256) { this.canvas canvas; this.particles []; this.capacity capacity; } spawn(x, y, baseColor) { if (this.particles.length this.capacity) { this.particles.shift(); // 池满就淘汰最旧粒子内存不会继续涨 } this.particles.push({ x, y, vx: (Math.random() - 0.5) * 120, vy: (Math.random() - 0.5) * 120, life: 1, color: baseColor, }); } }池子容量定在 256超出就shift掉最老的粒子。视觉上最老的粒子本身也快消失了玩家感知不到差异但内存曲线会变得非常平缓。这个思路跟 UGUI 源码解析里经常讲的“动静分离”一样动画元素不要反复销毁重建而是复用对象只改状态。4.2 叠乌龟CSS3 transform 比 Canvas 更省电叠乌龟跟打星星不同它没有大量碎片只有几块带贴图的乌龟壳在滑动用 DOM CSS 变换就够了不需要 Canvas。关键是利用transform走 GPU 合成避免触发布局重排.turtle-piece { width: 90px; height: 64px; position: absolute; left: 50%; transition: transform 0.12s ease-in; will-change: transform; } .turtle-piece.drop { transform: translateY(140px) rotate(var(--rot)); }function dropTurtle(piece, stackTop) { // 计算落点偏移偏移量大于阈值则判定堆叠失败 const offset Math.random() * 24 - 12; piece.style.setProperty(--rot, offset deg); piece.classList.add(drop); if (Math.abs(offset) 9) { endGame(); } else { stackTop.appendChild(piece); } }物理模拟被简化成“只看当前这一层相对上一层的偏移量”不考虑叠放后重心偏移的累积。真实运营场景这样做够用——玩家在手机上玩的是手感不是物理引擎精度。反而是will-change: transform这个属性容易被忽略它提前告诉浏览器这块区域要频繁变换浏览器会把它提升到合成层代价是额外显存占用。一张两张没问题如果页面上同时几十张还都加will-change低端机显存直接爆掉。4.3 投篮抛物线运动与篮筐碰撞箱投篮是四个游戏里最典型的“抛物线数学题”。更新篮球位置时x 方向匀速y 方向匀加速function stepBall(ball, dt) { const G 320; // 像素/秒^2重力加速度按量纲缩放 ball.vy G * dt; ball.x ball.vx * dt; ball.y ball.vy * dt; // 篮筐判定篮球下落到篮筐高度且 x 在筐内 if (ball.vy 0 ball.x hoop.x - hoop.r ball.x hoop.x hoop.r ball.y hoop.y - 6 ball.y hoop.y 12) { scoreIncrement(); } }判定时机放在vy 0是为了只在球下落时计分防止球从下方穿过篮筐时误判。这段代码看起来简单坑在“把物理更新跟渲染帧率绑定”。如果直接用requestAnimationFrame的时间戳做 dt60 帧没问题掉到 30 帧时球会变慢玩家会觉得“球飘了”。所以 dt 必须用“实际帧间隔”而不是固定值且帧间隔要有一个上限。提示dt 的单位是秒。用毫秒做单位会让重力加速度看起来大 1000 倍排错时第一件事先检查单位。5. 从“能玩”到敢开服响应式适配、预加载与 server_running 看门狗最后这三件套是运营源码和演示源码的分水岭。源码再好看玩家打开白屏 10 秒就会关掉页面更别说服务半夜挂了没人发现。5.1 帧间隔钳制防止低端机发烫let lastTime 0; function loop(ts) { let dt (ts - lastTime) / 1000; if (dt 0.05) dt 0.05; // 锁最大步长避免切后台回来物理跳变 lastTime ts; update(dt); render(); requestAnimationFrame(loop); } requestAnimationFrame(loop);0.05 秒对应 20 FPS 下限。玩家切后台再切回来时浏览器可能给出几百毫秒的帧间隔如果不加钳制篮球会瞬移一大段乌龟会从堆叠中飞出去。这个技巧成本最低、收益最明显。5.2 资源预加载按玩法拆开不要一锅炖口红机、打星星、叠乌龟、投篮四套贴图加起来不小。进入大厅就全部预加载首屏时间会非常难看。按玩法拆成独立 Manifest进入子游戏再加载const manifest { lipstick: [img/red.png, img/gold.png, img/claw.png], star: [img/star1.png, img/star2.png], turtle: [img/turtle.png], basket: [img/ball.png, img/hoop.png], }; function preloadByKey(key) { const list manifest[key]; return Promise.all(list.map(src { const im new Image(); im.src src; return im.decode ? im.decode() : Promise.resolve(); })); }img.decode()在旧浏览器上可能不存在所以补了兼容分支。这里的加载粒度是“玩法级”如果某个玩法内部还有不同关卡还可以再拆细。5.3 看门狗真正让服务“掉线自愈”的就这几行根目录里6.server_running.bat的作用是定时巡检服务端口发现异常就重新拉起。我建议按下面的模板做巡检项探活命令失败动作打星星端口netstat -anofindstr :9503口红机端口netstat -anofindstr :9504对应的批处理脚本echo off :loop REM 分别检测各玩法端口不存在则重新启动 netstat -ano | findstr :9503 nul 21 if errorlevel 1 ( echo [%date% %time%] star server down, restart... start /min cmd /c 3.server_star.bat ) netstat -ano | findstr :9504 nul 21 if errorlevel 1 ( echo [%date% %time%] dkh server down, restart... start /min cmd /c 4.server_dkh.bat ) timeout /t 30 /nobreak nul goto loop这里特意用netstat查端口而不是tasklist查进程名原因很实际如果服务因为端口被占而没启动成功进程名可能还存在但服务本身已经假活。用端口判断能避开“进程在、服务死”的坑。巡检间隔 30 秒够用太频繁会给自己服务器加无谓负载。建议最后再把0.start_all.bat加到 Windows 计划任务里开机自启这套源码在运营环境里才算真正闭环了。本文还有配套的精品资源点击获取
戏商城H5小游戏源码拆解：服务编排、抽奖概率与高可用部署要点
简介面向H5游戏开发与运营者的四合一源码包涵盖口红机、打星星、叠乌龟、投篮四款互动游戏基于HTML5、CSS3与JavaScript实现适合作为直播互动、商城引流或移动端小游戏运营的参考项目。资源共13074个文件压缩包大小87.02MB核心文件类型包括php后端服务、js游戏逻辑与交互、png/jpg/gif界面素材、html/css页面结构样式以及json配置数据等整体以功能型代码和静态资源为主目录结构完整。已有108人学习下载。压缩包内附带start_all.bat及各子游戏启动脚本便于本地快速启动多个服务端。四款游戏分别覆盖随机抽取、消除、堆叠、抛物线投掷等经典玩法逻辑代码中涉及Canvas绘图、碰撞检测、计分系统和响应式布局等技术点方便开发者分析运营级H5游戏的工程组织方式与二次开发思路。1. 四款H5小游戏只是前端戏商城真正拼的是服务编排和存活设计拿到“戏商城口红机打星星叠乌龟投篮完美运营源码”这个压缩包先别急着打开HTML看Canvas特效。真正的信息量在根目录那7个bat文件和一个 random_compat.phar.pubkey.asc 里。这套东西不是传统意义的静态H5页面而是一套按顺序拉起的PHP服务集群账号服务单独占进程口红机、打星星、叠乌龟、投篮各自占一个常驻服务。任何一个玩法服务挂掉前端都会白屏或校验token失败。适合读这份源码的人不只是学Canvas动画的前端更是要做二次开发、线上部署和排障的后端工程师——这里完整展示了一套可运营的活动游戏架构。2. 服务拓扑拆解7个server脚本必须按序启动少一个入口都会异常2.1 从文件名反推角色划分账号、玩法和守护进程对照项目正文里的批处理文件清单可以还原出这套源码的部署结构。我按“文件名拼音/英文 常见PHP项目习惯”还原一下每个脚本的职能脚本角色推测监听端口依赖关系1.server_account.bat登录/token/用户资料9501无依赖必须最先启动2.server_tortoise.bat叠乌龟玩法服务9502依赖 account3.server_star.bat打星星玩法服务9503依赖 account4.server_dkh.bat口红机玩法服务9504依赖 account5.server_toulan.bat投篮玩法服务9505依赖 account6.server_running.bat看门狗/健康检查无独立运行7.server_cow.bat附加玩法服务9507依赖 account注意端口不一定就是这些值部署时以每个bat里实际的启动参数为准。不过从这个结构能看出它跟单体应用的本质区别account被拆出来之后四个玩法共享一套登录态用户在一个玩法里拿到的积分和兑换记录到另一个玩法里依然有效。这是“戏商城”这类多玩法H5活动页最常见也最稳的演进方向。这个结构跟我处理过的一批所谓“H5游戏源码”项目不一样。市面上很多源码包就一个HTML加几个JS连后端都没有只能本地点开看个样子谈不上运营。而这套东西既然带了服务编排就说明它是按“能上量、能隔离故障”的标准写的。对照muduo源码里“one loop per thread”的事件循环思路这套服务端的设计内核是一致的每个玩法进程维护自己独立的事件循环崩溃半径被限制在单个进程内不会像大胖子单体那样一崩全崩。2.2 启动编排start_all.bat 里“先账号后玩法再看门狗”的顺序逻辑先贴一段与这套源码结构一致的启动脚本对应根目录 0.start_all.batecho off title Opera Server Starter REM 1. 账号服务必须先起来其余玩法要拿它签发的 token start account /min cmd /c 1.server_account.bat timeout /t 2 /nobreak nul REM 2. 四个玩法服务可以并行拉起但要在 account 之后 for %%S in (2.server_tortoise.bat 3.server_star.bat 4.server_dkh.bat 5.server_toulan.bat) do ( start game_%%S /min cmd /c call %%S ) REM 3. 等玩法服务把端口 listen 起来再上守护 timeout /t 5 /nobreak nul start running /min cmd /c 6.server_running.bat代码逻辑不复杂但有几个点是实际部署才会踩到的。start 标签 /min cmd /c call xxx.bat中/min让服务在最小化窗口运行避免玩家或运维误关控制台timeout /t 2是给 account 留出写用户表和初始化 session 缓存的时间。我一般会在timeout之前加一句ping 127.0.0.1 -n 2 nul来兼容部分精简版 Windows因为某些系统的timeout指令会因为标准输入被重定向而直接退出。固定 sleep 2 秒在线上并不可靠。account 如果因为数据库慢而没就绪后五个服务起来后会在请求 token 时疯狂报错。更稳的做法是轮询端口而不是盲等:wait_account netstat -ano | findstr :9501 nul 21 if errorlevel 1 ( timeout /t 1 /nobreak nul goto wait_account )这段的核心思路是“探活”不是“猜时间”。netstat查的是本机监听套接字account 把 9501 端口 bind 成功就认为服务可用findstr :9501里加冒号是为了避免匹配到 19501、29501 这类无关端口。2.3 random_compat.phar.pubkey.asc 不是摆设PHP版本兼容的底线根目录那个 random_compat.phar.pubkey.asc 是 Composer 包 random_compat 的 OpenSSL 签名文件。random_compat 解决的是 PHP 5.x/7.0 没有random_int和random_bytes的问题——token 生成、抽奖、会话 ID 都必须用密码学安全随机数不能靠mt_rand()硬撑。这套源码大概率通过它来保证低版本 PHP 也能拿到安全随机源。?php // 在旧版 PHP 中无法直接调 random_int 时需要该 phar 提供 polyfill require_once __DIR__ . /vendor/random_compat.phar; function generateToken($accountId) { try { return bin2hex(random_bytes(16)); } catch (Exception $e) { // 极端情况下回退到 openssl 扩展 return bin2hex(openssl_random_pseudo_bytes(16)); } }这个文件的存在也是在提醒部署人员先确认 PHP 版本。PHP 7.1 以上自带random_int此时 phar 可以安全加载但不会覆盖内置函数PHP 5.6 环境则必须依赖它。很多人在 Windows 上双击 bat 起服务报错却去查数据库配置查了半天才发现是 PHP 版本太低random_int这个函数压根不存在。3. 口红机的“完美运营”藏在抽奖状态机里Canvas绘制、碰撞容差和保底算法先解释为什么把口红机单独拿出来讲。叠乌龟和打星星属于技巧型玩法玩家输赢主要看操作口红机是典型的概率型玩法直接跟运营收入挂钩。一套号称“完美运营”的源码最值钱的地方就在概率控制——既不能让玩家一眼看穿必中或必不中又要保证运营侧可以动态调保底。3.1 机械臂场景的 Canvas 分层绘制口红机画面通常分三层底层是口红陈列区中层是机械臂顶层是玻璃罩半透明遮罩。对应的 Canvas 绘制代码大致如下function renderScene(ctx, goodsList, claw) { // 层1口红包包陈列区每个格子按固定行列计算中心坐标 goodsList.forEach((g, i) { const col i % 5; const row Math.floor(i / 5); g.cx 140 col * 110; g.cy 140 row * 110; ctx.drawImage(g.image, g.cx - g.radius, g.cy - g.radius, g.radius * 2, g.radius * 2); }); // 层2机械臂由水平滑轨和垂直吊臂组成 ctx.fillStyle #334; ctx.fillRect(claw.railX, 40, 260, 12); // 水平滑轨 ctx.fillRect(claw.railX claw.offsetX - 6, 52, 12, claw.depth); // 垂直吊臂 // 层3玻璃罩半透明遮罩 ctx.fillStyle rgba(200, 220, 240, 0.12); ctx.fillRect(0, 0, canvas.width, canvas.height); }这里的关键是把“逻辑坐标”和“渲染坐标”分开每个口红的cx/cy先在数据层算好机械臂再用offsetX和depth表示当前横向和纵向位置。这样做的好处是后面做碰撞检测时不需要去解析像素直接拿坐标做数学判断就行。如果直接在drawImage里写死坐标后续调布局会非常痛苦。3.2 碰撞容差与吸附手感抓取半径为什么要给 8px 宽容度玩家点击“抓取”后客户端并不会马上把结果发给服务器而是先做一次本地碰撞检测命中后才把请求发给服务端判概率。前端检测代码function hitTest(clawX, clawY, target) { const dx clawX - target.cx; const dy clawY - target.cy; const dist Math.sqrt(dx * dx dy * dy); return dist target.radius 8; }target.radius 8里的 8px 不是乱加的。机械臂视觉上是塑料抓手口红是椭圆体玩家不会盯着 1px 的边缝去瞄。8px 的宽容度能显著缓解“明明对准了却没抓起来”的投诉。但注意宽容度只影响“请求是否发到服务端”真正决定玩家是否拿到口红的是服务端概率逻辑。这种设计叫“前端手感、后端公平”前端宽容些玩家觉得好抓后端严格按概率算防止有人通过连点或者断线重连刷奖励。3.3 服务端概率控制保底机制与随机数安全这是整个口红机模块最值得读的一段。有经验的运营会根据活动预算调整中奖率所以配置一般做成可调参数?php // 口红机抽奖逻辑服务端 class LipstickMachine { private $playCount 0; private $winRate; private $pityCount 80; public function __construct($winRate 600) { // winRate 单位为万分比600 表示 6% $this-winRate $winRate; } public function draw() { $this-playCount; if (function_exists(random_int)) { $rnd random_int(1, 10000); } else { // 旧版 PHP 依赖 random_compat phar 提供的 polyfill $rnd (int) floor(mt_rand() / mt_getrandmax() * 10000) 1; } // 先判保底再判随机命中后清零计数 if ($this-playCount $this-pityCount || $rnd $this-winRate) { $this-playCount 0; return true; } return false; } }这段逻辑有两个容易写错的地方。第一“先判断保底再判断随机”这个顺序不能反。如果先判随机玩家可能在保底前就中了但计数没清零导致下一次继续被保底触发预算失控。第二winRate用万分比而不是百分比是为了把概率细化到 0.01% 的粒度运营调整时不用动代码改配置即可。为什么不能用mt_rand()因为mt_rand()的种子是时间相关的攻击者连续抽几十次后能反推出当前 Mersenne Twister 的状态进而预测后续结果。random_int()基于系统熵源不可预测所以项目里才会出现 random_compat.phar.pubkey.asc 这个签名文件。提示上线前用压测工具打 20 万次抽奖接口统计实际中奖率和配置里的概率对比。如果偏差超过 0.5%优先检查是否有多实例部署导致计数不共享。3.4 断线重连的幂等处理防止扣了次数没出结果H5 活动在弱网下最容易被投诉的问题就是“我抽了 10 次但只看到 8 次结果”。原因往往是客户端请求发出后服务端已经扣了次数和返回奖品但响应在回传路上丢了。客户端重试后服务端又扣了一次。服务端解法是让客户端每次抽奖带上一个 UUID 作为幂等键?php public function drawWithIdempotency($userId, $requestId) { $cached $this-redis-get(draw:{$userId}:{$requestId}); if ($cached ! null) { return json_decode($cached, true); } $result $this-lipstickMachine-draw(); $this-redis-setex(draw:{$userId}:{$requestId}, 300, json_encode($result)); return $result; }这里的setex过期时间不能太长300 秒刚好覆盖弱网重试窗口又不会让 Redis 里堆满废弃 key。这个模式对口红机、打星星里的道具购买、积分兑换都适用。4. 打星星、叠乌龟、投篮的实现差异粒子池、CSS3物理与抛物线碰撞三个游戏虽然都是 H5但技术选型完全不同。打星星吃渲染性能叠乌龟吃物理手感投篮吃数学计算。分开看。玩法渲染层核心计算性能敏感点打星星Canvas 2D无物理纯粒子GC 抖动、对象池叠乌龟DOM CSS3偏移判定layout 重排、transform 合成投篮Canvas 2D重力 碰撞盒帧率钳制、dt 单位4.1 打星星用粒子池代替反复创建对象打星星玩法的核心是“星星出现→点击→炸裂→计分”。最直观的实现是点击时new一堆小圆点但一个星星炸出 20 颗粒子屏幕上同时有 10 个星星在飞就有 200 个对象存在老手机渲染时会频繁触发 GC 掉帧。class StarPool { constructor(canvas, capacity 256) { this.canvas canvas; this.particles []; this.capacity capacity; } spawn(x, y, baseColor) { if (this.particles.length this.capacity) { this.particles.shift(); // 池满就淘汰最旧粒子内存不会继续涨 } this.particles.push({ x, y, vx: (Math.random() - 0.5) * 120, vy: (Math.random() - 0.5) * 120, life: 1, color: baseColor, }); } }池子容量定在 256超出就shift掉最老的粒子。视觉上最老的粒子本身也快消失了玩家感知不到差异但内存曲线会变得非常平缓。这个思路跟 UGUI 源码解析里经常讲的“动静分离”一样动画元素不要反复销毁重建而是复用对象只改状态。4.2 叠乌龟CSS3 transform 比 Canvas 更省电叠乌龟跟打星星不同它没有大量碎片只有几块带贴图的乌龟壳在滑动用 DOM CSS 变换就够了不需要 Canvas。关键是利用transform走 GPU 合成避免触发布局重排.turtle-piece { width: 90px; height: 64px; position: absolute; left: 50%; transition: transform 0.12s ease-in; will-change: transform; } .turtle-piece.drop { transform: translateY(140px) rotate(var(--rot)); }function dropTurtle(piece, stackTop) { // 计算落点偏移偏移量大于阈值则判定堆叠失败 const offset Math.random() * 24 - 12; piece.style.setProperty(--rot, offset deg); piece.classList.add(drop); if (Math.abs(offset) 9) { endGame(); } else { stackTop.appendChild(piece); } }物理模拟被简化成“只看当前这一层相对上一层的偏移量”不考虑叠放后重心偏移的累积。真实运营场景这样做够用——玩家在手机上玩的是手感不是物理引擎精度。反而是will-change: transform这个属性容易被忽略它提前告诉浏览器这块区域要频繁变换浏览器会把它提升到合成层代价是额外显存占用。一张两张没问题如果页面上同时几十张还都加will-change低端机显存直接爆掉。4.3 投篮抛物线运动与篮筐碰撞箱投篮是四个游戏里最典型的“抛物线数学题”。更新篮球位置时x 方向匀速y 方向匀加速function stepBall(ball, dt) { const G 320; // 像素/秒^2重力加速度按量纲缩放 ball.vy G * dt; ball.x ball.vx * dt; ball.y ball.vy * dt; // 篮筐判定篮球下落到篮筐高度且 x 在筐内 if (ball.vy 0 ball.x hoop.x - hoop.r ball.x hoop.x hoop.r ball.y hoop.y - 6 ball.y hoop.y 12) { scoreIncrement(); } }判定时机放在vy 0是为了只在球下落时计分防止球从下方穿过篮筐时误判。这段代码看起来简单坑在“把物理更新跟渲染帧率绑定”。如果直接用requestAnimationFrame的时间戳做 dt60 帧没问题掉到 30 帧时球会变慢玩家会觉得“球飘了”。所以 dt 必须用“实际帧间隔”而不是固定值且帧间隔要有一个上限。提示dt 的单位是秒。用毫秒做单位会让重力加速度看起来大 1000 倍排错时第一件事先检查单位。5. 从“能玩”到敢开服响应式适配、预加载与 server_running 看门狗最后这三件套是运营源码和演示源码的分水岭。源码再好看玩家打开白屏 10 秒就会关掉页面更别说服务半夜挂了没人发现。5.1 帧间隔钳制防止低端机发烫let lastTime 0; function loop(ts) { let dt (ts - lastTime) / 1000; if (dt 0.05) dt 0.05; // 锁最大步长避免切后台回来物理跳变 lastTime ts; update(dt); render(); requestAnimationFrame(loop); } requestAnimationFrame(loop);0.05 秒对应 20 FPS 下限。玩家切后台再切回来时浏览器可能给出几百毫秒的帧间隔如果不加钳制篮球会瞬移一大段乌龟会从堆叠中飞出去。这个技巧成本最低、收益最明显。5.2 资源预加载按玩法拆开不要一锅炖口红机、打星星、叠乌龟、投篮四套贴图加起来不小。进入大厅就全部预加载首屏时间会非常难看。按玩法拆成独立 Manifest进入子游戏再加载const manifest { lipstick: [img/red.png, img/gold.png, img/claw.png], star: [img/star1.png, img/star2.png], turtle: [img/turtle.png], basket: [img/ball.png, img/hoop.png], }; function preloadByKey(key) { const list manifest[key]; return Promise.all(list.map(src { const im new Image(); im.src src; return im.decode ? im.decode() : Promise.resolve(); })); }img.decode()在旧浏览器上可能不存在所以补了兼容分支。这里的加载粒度是“玩法级”如果某个玩法内部还有不同关卡还可以再拆细。5.3 看门狗真正让服务“掉线自愈”的就这几行根目录里6.server_running.bat的作用是定时巡检服务端口发现异常就重新拉起。我建议按下面的模板做巡检项探活命令失败动作打星星端口netstat -anofindstr :9503口红机端口netstat -anofindstr :9504对应的批处理脚本echo off :loop REM 分别检测各玩法端口不存在则重新启动 netstat -ano | findstr :9503 nul 21 if errorlevel 1 ( echo [%date% %time%] star server down, restart... start /min cmd /c 3.server_star.bat ) netstat -ano | findstr :9504 nul 21 if errorlevel 1 ( echo [%date% %time%] dkh server down, restart... start /min cmd /c 4.server_dkh.bat ) timeout /t 30 /nobreak nul goto loop这里特意用netstat查端口而不是tasklist查进程名原因很实际如果服务因为端口被占而没启动成功进程名可能还存在但服务本身已经假活。用端口判断能避开“进程在、服务死”的坑。巡检间隔 30 秒够用太频繁会给自己服务器加无谓负载。建议最后再把0.start_all.bat加到 Windows 计划任务里开机自启这套源码在运营环境里才算真正闭环了。本文还有配套的精品资源点击获取
