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 秒，再出現粉色球、原型人物、草地、三道牆和終點。