Roblox 案例 · Ball Game

原项目来源：Ball game open source ，以 ball game.rbxl 提供。本例保留 5 秒开场、推粉色球绕过三道错位砖墙、接触 WinPiece 后变金色并显示 Winner 的规则。

运行原版，记录人物与场景

操作位置： Roblox Studio。

操作： File → Open from File 打开原 .rbxl，Play / F5 试玩，再停止测试。Explorer 中读取两个 ServerScriptService 脚本 CreateBall 和 GetWinner，并查看 Workspace 中的 Map1、WinPiece、SpawnLocation、Baseplate。

成功现象： 原规则、人物原型与场景参数能对应到实际画面；原 .rbxl 保持不变。

图 10｜Roblox 原版人物、草地、砖墙、灰色底板与终点。

图 10｜Roblox 原版人物、草地、砖墙、灰色底板与终点。

图 11｜原 GetWinner 源码监听球与 WinPiece 的接触。

图 11｜原 GetWinner 源码监听球与 WinPiece 的接触。

两个脚本负责开局造球和获胜。渲染、人物、输入、镜头、动画、物理和服务端执行环境由 Roblox 提供。原球尺寸为 5×5×5 studs；草地为 18×1×74；三道障碍中心为 (22,17.5,34)、(32,17.5,15)、(21.5,17.5,-4)。这些数值仅属于 Ball Game。


Ball.Touched:Connect(function(partTouching)
    if partTouching.Name == "WinPiece" then
        Ball.BrickColor = BrickColor.new("Gold")
        warn("Winner!")
        game.Workspace.Map1.PlayerWon.Value = true
    end
end)

需要检查自己的简单 Part 场景时，可停止 Play，在 Studio Command Bar 执行下面的只读命令，查看 Output。复杂 Mesh、贴图或骨骼另行处理；这段命令只打印属性，不会导出一个可运行的 H5 游戏。


for _, part in ipairs(workspace:GetDescendants()) do
    if part:IsA("BasePart") then
        print(part:GetFullName(), part.Position, part.Size,
            part.Material, part.Transparency)
    end
end

对照新的源码和还原效果

Roblox 中的来源	H5 源码	本例如何处理
CreateBall：wait(5)、Part、Neon	src/main.js	保留 5 秒等待；球的可见网格与动态物理刚体一起创建
GetWinner：Touched、PlayerWon	src/main.js	接触终点后一次获胜、球变金色、显示 Winner
Map1、WinPiece、出生点等	src/level.js + main.js	读取尺寸与坐标重建网格和碰撞体，保留透明挡墙的物理作用
草地、砖墙、金属、泥地、天空	src/environment.js	用浏览器材质和本地纹理重建外观
R15 Man / Pal Hair / 摩托衫 / 牛仔裤	src/avatar.js	按原型重建 15 个身体分段、发束、笑脸、衣物与白底鞋
Humanoid 与默认第三人称镜头	main.js + avatar.js + camera.js	实现移动、跳跃、动作、跟随、拖动旋转与缩放
Message / Hint 等 UI	index.html + src/style.css	改为浏览器 HUD、开局、暂停和获胜界面

人物由原版运行时加载账号 Avatar。本例按外形原型用本地几何和纹理重建，没有直接导入 Roblox 官方网格。场景以简单 Part 为主，按真实布局重建；其他项目可以复用有权导出的模型和贴图。

图 12｜H5 人物正面保留发型、笑脸、蓝黑上衣、深色裤子和白底鞋。

图 12｜H5 人物正面保留发型、笑脸、蓝黑上衣、深色裤子和白底鞋。

图 13｜H5 人物侧面展示头发、身体分段和鞋的形体。

图 13｜H5 人物侧面展示头发、身体分段和鞋的形体。

本例约定 1 stud = 0.3m，原点取 Roblox (27,15,15)，球半径因此是 0.75m。这个坐标换算、质量、摩擦、滚动阻尼和速度限制均属于案例实现；自己的游戏按自己的数据和物理体验调整。

图 14｜H5 完整关卡按原版数据恢复三道障碍、边界和终点位置。

图 14｜H5 完整关卡按原版数据恢复三道障碍、边界和终点位置。


ballBody.addEventListener('collide', event => {
  if (event.body !== winPiece.body || state.mode !== 'playing' || state.won) return;
  state.won = true;
  state.phase = 'finished';
  pink.color.set('#fff000');
  pink.emissive.set('#fff000');
  glow.material.color.set('#fff54b');
  document.querySelector('#status').textContent = 'Winner!';
  show('won');
});

新增的浏览器能力包括触屏方向键与跳跃、暂停与继续、重玩、全屏、人物近景查看，以及 WebGL 不可用提示。Roblox 账号、Robux、多人同步和云存档未迁移；本例不是 Roblox 运行时的完整兼容层。

下载完整源码并验证

操作位置： 新建的 ball-game-h5 文件夹、终端和浏览器。

操作： 下载本节源码附件，解压后让 package.json 位于根部，再进入该目录执行 npm ci 和 npm run dev。源码包含 level.js、avatar.js、environment.js、camera.js、main.js、SOURCE-MAPPING.md 及 reference/ 下原 Lua 副本。

成功现象： 浏览器打开 5174 后出现开始界面；开局等待 5 秒，再出现粉色球、原型人物、草地、三道墙和终点。