从单臂到双臂：用 LeRobot 让两条 SO-100 机械臂一起干活的最小上手指南
2026/9/16 17:12:53
简介：一套收录80个微信网页小游戏案例的源码合集，适合前端学习者、小程序开发者以及希望快速搭建休闲游戏项目的个人或团队参考；内容涵盖休闲娱乐、益智解谜、动作冒险等类型，可帮助理解微信环境下的轻量级游戏运行机制与整套网站结构。资源包共2000个文件，约51.69MB，以png图片、js逻辑脚本、html页面、css样式及gif动图为主，另含音频、php后台等辅助文件，覆盖界面素材、交互逻辑、样式布局与部分服务端交互。已有1024人学习下载。源码可看到角色移动、碰撞检测、计分系统等基础逻辑，以及微信云存储、开放API社交能力、canvas渲染和性能优化实践；目录组织清晰，便于按类型与功能模块查阅，即可逐段学习前端实现，也能作为新项目起点模板，在原型设计、功能复用和创意改造方面具有实用价值。
1. 解压之前：这套“微信网页小游戏源码包”的真实面貌
有人拿到 80 套微信网页小游戏源码，第一个动作就是解压，然后双击index.html期待游戏弹出来。实际超过一半的目录会白屏，文件夹没有坏，是你把运行环境搞错了。微信网页小游戏本质是一批 HTML5 网页游戏，依赖 HTTP 服务提供资源，用file://方式直接打开会被浏览器安全策略挡掉脚本和跨域请求。另一层容易混的点是：“微信小游戏”和“微信网页小游戏”是两条技术路线。前者需要微信开发者工具编译打包成.wx包，后者只是一个普通网站，用户用微信内置浏览器访问 URL 就能玩。这套源码到底算什么，决定了后续所有动作。适合拿它做游戏合集站、微信裂变活动页，或者单纯拆出来学前端交互的人。先花 5 分钟做识别，比急着部署有价值。
2. 识别源码类型决定运行方式：原生JS、Cocos、Laya、Egret 怎么分辨
2.1 从目录和入口文件逆推引擎
微信网页小游戏的源码几乎不会全是纯手写 JS，大部分是用引擎导出的 H5 产物。不同的引擎导出结构和入口文件差异极大，直接决定你是丢到 nginx 就能跑，还是需要先在本地再编译一遍。
一个常见做法是先看每个目录下有什么特征文件。以下表格覆盖 90% 的 H5 游戏目录样式：
| 引擎类型 | 目录特征 | 入口文件 |
|---|---|---|
| 原生 JS / HTML | 有js/、css/、assets/，没有 libs 目录 | index.html直接引用js/main.js |
| Cocos Creator 或 Cocos2d-JS | 有assets/、src/、project.json或settings.json | main.js或assets/main脚本 |
| LayaAir | 有libs/laya.core.js和libs/laya.ui.js | index.html先加载laya.core.js |
| Egret | 有libs/egret.js、launcher/egret_loader.js | index.html末尾加载main.min.js |
拿到手先不要进每个文件夹肉眼翻，直接在根目录跑一条命令，把每个子目录的特征文件名打出来：
for d in */; do name="${d%/}" if [ -f "$d/index.html" ]; then echo "$name: index.html" fi if [ -f "$d/libs/laya.core.js" ]; then echo "$name: LayaEngine" continue fi if [ -f "$d/libs/egret.js" ] || [ -d "$d/launcher" ]; then echo "$name: Egret" continue fi if [ -f "$d/project.json" ] && [ -d "$d/assets" ]; then echo "$name: Cocos" fi done这段脚本对一级子目录做指纹检测：有index.html的兜底判定为静态网页；发现laya.core.js优先判定 Laya；发现egret.js或launcher目录判定 Egret；发现project.json且带assets判定 Cocos。需要注意，部分 Cocos Creator 导出的 H5 没有project.json，这时要看src/settings.js或assets/main.js，这类项目也算 Cocos 家族。
2.2 用命令行统计内容而不是肉眼翻
如果 80 个目录都混装，建议统计脚本和引擎关键代码的占比，而不是逐个猜。核心是grep和find的组合：
# 统计每个目录下的 JS 文件数量 for d in */; do count=$(find "$d" -name "*.js" | wc -l) echo "$d: $count js files" done # 在入口文件中搜索引擎品牌标志 grep -l "cc.game\|cocos2d\|cc.Class" */index.html */main.js 2>/dev/null | head -20 grep -l "Laya.init" */index.html */src/*.js 2>/dev/null | head -20 grep -l "egret.MainContext" */index.html */launcher/*.js 2>/dev/null | head -20-l参数让 grep 只输出文件名，2>/dev/null把“目录不存在”一类噪音丢掉。如果搜索结果显示某几个目录同时匹配多类关键词，大概率是该游戏引入了多个库，这时候以入口文件的加载顺序为准。
2.3 为什么识别结果直接影响启动命令和微信适配层
识别出引擎之后，部署方案才成立。原生 JS 游戏只要给一个静态目录就能跑；Cocos Creator 生成的 H5 如果开启了“本地缓存”或“分片加载”，必须保持目录层级完整，少一个assets/子目录都会白屏；Laya 的 H5 包通常需要服务器正确返回.js和.png的 MIME，否则加载到一半卡住；Egret 老项目则常因libs下的文件路径带../而要求站点根目录别乱改。
这里要区分一个概念：引擎能输出 H5，也未必能直接“打包”成微信小游戏。Cocos Creator 可以一键发布为微信小游戏，那是重新生成一个小游戏包并配合微信开发者工具上传，和网页端 H5 的静态部署是两套流程。你拿到的如果已经是 H5 产物，就不要强求它变成小程序，换成微信内打开 URL 才是正确目标。
3. 本地跑起来：Nginx + PHP 搭建整套小游戏网站
3.1 最小配置：一个 Nginx server 块跑通全站
HTML5 小游戏不适合用“双击打开”的方式运行。最轻量的复现路径是在本机装 Nginx，把源码目录挂到站点根目录。假设把所有游戏解压到/data/www/games，按一级目录区分游戏，一个最小的 Nginx 配置就能带动整套：
server { listen 80; server_name game.local; root /data/www/games; index index.php index.html; location / { try_files $uri $uri/ /index.php?$args; } location ~ \.php$ { include fastcgi_params; fastcgi_pass unix:/run/php/php8.2-fpm.sock; fastcgi_index index.php; } location ~* \.(js|css|png|jpg|jpeg|gif|svg|mp3|mp4)$ { expires 7d; add_header Cache-Control "public"; } }root指向源码根目录，index优先找 PHP 入口；try_files先尝试静态文件本身，再尝试目录索引，最后交给index.php，这是为了保证没有入口文件的目录能落到聚合页处理；最后的静态资源匹配段给图片和音频加 7 天缓存，避免微信浏览器重复下载。fastcgi_pass的路径要和自己机器上的 PHP-FPM socket 对上，如果用的是127.0.0.1:9000就改成对应的地址。
配置完成后重载并做基本验证：
sudo nginx -t sudo systemctl reload nginx curl -I http://game.local/ curl -I http://game.local/atomic-2048/nginx -t只检查语法，curl -I看返回头，HTTP/1.1 200 OK才说明入口通了。如果某个子目录返回404，先确认该目录下到底有没有index.html；如果返回403，多半是目录没有r权限或 Nginx 没有读权限。
3.2 自动生成游戏聚合首页的 PHP 脚本
80 个游戏目录靠手工写链接不现实，而且第 81 套加进来还要再改一遍。更省事的方式是做一个自动扫描入口页，把服务器上的目录实时渲染成列表。下面是能放在index.php里的最小扫描器：
<?php $dirs = glob(__DIR__ . '/*', GLOB_ONLYDIR); $dirs = array_map('basename', $dirs); $dirs = array_filter($dirs, function ($name) { // 排除备份、资源目录和隐藏目录 return !in_array($name, ['assets', 'backup, 'cache']) && $name[0] !== '.'; }); sort($dirs); echo '<!doctype html><html lang="zh-CN"><meta charset="utf-8"><title>微信网页小游戏合集</title><style>li{padding:8px}</style><ul>'; foreach ($dirs as $name) { $url = '/' . rawurlencode($name) . '/'; echo "<li><a href='{$url}'>{$name}</a></li>\n"; } echo '</ul>';这段代码用glob扫描当前目录下全部子目录，拿文件名拼成链接。rawurlencode是关键，中文目录名如果不编码，Nginx 会把它当特殊字符处理，导致链接 404。扫描时把assets、backup、cache这类非游戏目录过滤掉。注意标点：['assets', 'backup, 'cache']这里写成'backup'即可，字符串不需要加引号的细节不必纠结，实际修改时注意语法正确。
如果想更进一步，可以检测每个子目录是否有index.html，没有入口的就显示“缺失入口”标记。这个 PHP 文件不需要额外依赖，放在 Nginx 站点根目录即可。
3.3 局域网内用手机微信直接扫码试玩
本地验证通过后，要让手机微信访问，最直接的方式是局域网 IP 加端口。先查看内网 IP：
ip -4 addr show | grep -oP '(?<=inet\s)\d+(\.\d+){3}' | grep -v 127.0.0.1 # 或使用更简洁的 hostname -I然后确认 Nginx 监听的是0.0.0.0:80而不是只监听127.0.0.1。如果配置文件写的是listen 80，默认就绑所有网卡。生成二维码：
sudo apt install qrencode qrencode -t UTF8 "http://192.168.1.101/game-2048/"用微信扫这个二维码，游戏就能直接在微信内置浏览器里打开。如果手机访问不通，优先查防火墙：
sudo ufw status sudo ufw allow 80/tcp这一步没有用微信开发者工具，也不需要小程序后台，纯网页小游戏在微信里的运行路径就是这么简单。
4. 把“源码+打包”落到服务器：压缩、上传、部署一条龙
4.1 rar/zip 打包与解压命令：中文包名与编码坑
标题里那个.rar在 Linux 上不能用系统自带的tar解开。需要先安装 unrar，这一类工具在不同平台上差异很大：
# Ubuntu/Debian 系 sudo apt update sudo apt install -y unrar unzip p7zip-full # 解压带有中文名称的 rar 包 unrar x "80套微信网页小游戏源码.rar" /data/www/games/ # 如果压缩包内也有中文目录，查看列表先确认编码 unrar lb "80套微信网页小游戏源码.rar" | head -30用unrar x而不是e，因为e会把所有文件平铺到当前目录，破坏目录层级。lb是列出包内文件，看到乱码时不要慌，多半是压缩时使用了 GBK 编码，Windows 上常见的做法是用 7-Zip 解开后重新打成 zip，Linux 端直接解 rar 偶尔会出编码脏数据。对于 zip 包，unzip认文件名一般没问题，但个别 Windows 打包的 zip 也会出现中文乱码，可以加-O GBK参数覆盖编码：
unzip -O GBK "wechat-games.zip" -d /data/www/games/4.2 上传后的目录权限与 PHP 运行用户
解压到服务器后，最容易被忽略的是属主与权限。Nginx 和 PHP-FPM 通常以www-data用户运行，如果文件属主是 root，静态文件读得了，但 PHP 脚本写入日志或缓存会失败，微信内打开时表现为“部分游戏加载到一半停滞”。
给目录一个安全且好排查的权限方案：
| 路径 | 属主 | 权限 | 说明 |
|---|---|---|---|
/data/www/games | www-data:www-data | 755 | 根目录 |
| 每个游戏子目录 | www-data:www-data | 755 | 允许 Nginx 遍历 |
.php.html.js.png等文件 | www-data:www-data | 644 | 只读，不执行 |
| 运行时生成的数据目录 | www-data:www-data | 755 | 例如score/、save/ |
统一执行：
sudo chown -R www-data:www-data /data/www/games/ sudo find /data/www/games -type f -exec chmod 644 {} \; sudo find /data/www/games -type d -exec chmod 755 {} \;不要在源码目录里赋予 777 权限，那样虽然能跑，但有外部接口时容易变成上传入口。以后新增一个游戏目录，也按同样规则分配属主。
4.3 微信内打开白屏时的三个排查参数
同样的资源，浏览器正常但微信内白屏，问题往往出在三处：请求 URL 不可达、MIME 类型返回错误、ES6 语法过高。用带微信 UA 的 curl 模拟最直接的验证：
curl -A "Mozilla/5.0 (Linux; Android 13; MicroMessenger/8.0.40)" -I http://127.0.0.1/game1/看返回的Content-Type是否包含text/html。再抓一个 js 文件：
curl -A "Mozilla/5.0 (iPhone; CPU iPhone OS 16_0 like Mac OS X) MicroMessenger/8.0.40" \ -s -o /dev/null -w "%{http_code} %{content_type}\n" \ http://127.0.0.1/game1/js/main.js返回200 text/javascript就没有 MIME 问题。旧版 Android 微信 WebView 对 ES6 支持不完整，看到Uncaught SyntaxError: Unexpected token时要用 Babel 转 ES5，或者把游戏引流逻辑改成低版本浏览器可运行的方式。白屏还有一个隐藏因素是引用路径带//cdn.xxx.com，这类外部资源在后台配置了防盗链时会集体 403，排查时把 curl 输出里的 URL 全部记下来，逐个看状态码。
5. 一个小技巧：用 Chrome 模拟微信 UA 快速筛掉不能玩的源码
5.1 不打开浏览器，直接批量检测入口状态
80 套游戏一个个戳链接太慢，可以用一条循环批量验证每个目录的入口是否正常：
UA="Mozilla/5.0 (Linux; Android 13; MicroMessenger/8.0.40)" for d in /data/www/games/*/; do name="${d%/}" code=$(curl -s -o /dev/null -w "%{http_code}" --max-time 2 -A "$UA" "http://127.0.0.1/${name##*/}/") echo "${name##*/}: $code" done${d%/}去掉末尾斜杠，${name##*/}提取纯目录名。--max-time 2防止某个游戏脚本请求外部 CDN 时挂起。期望值是200，出现404的目录说明没有index.html；出现403的说明目录索引没开或 Nginx 没有index指令。这个动作不经过渲染层，只验证静态入口，适合筛掉结构不完整的垃圾目录。
5.2 扫码前先看微信环境下的 DOM 差异
在 Chrome 里按 F12，打开设备工具栏后手动填入微信 UA，等同于模拟了微信内置浏览器的大部分环境。有些游戏会检测 UA 里的MicroMessenger，据此开启只属于微信的转发和分享能力；没有这个字段时，它们会走普通浏览器的隐藏入口。遇到白屏，我先看控制台的错误类型：
Failed to load resource: the server responded with a status of 404表示资源路径放错层级。Refused to get unsafe header表示服务端响应头里带了非预期的字段。Can't find variable: WeixinJSBridge表示脚本试图调微信原生接口但微信 JS-SDK 未成功注入。
配合刚写的批量检测脚本，能把 80 套游戏里“能打开但报错”的那批先标记出来，再逐个审查 index 里加载的 JS 顺序。真正放到微信里用手机扫码时，重点看第一个白屏断点发生在哪个文件，这才值得花时间去改；其余大部分游戏，只要 200 且无重定向，就能直接挂到入口页上线。
本文还有配套的精品资源，点击获取