一個免費的線上積木建造遊戲提供給你一個 5×5 的免費格網,每格最多可堆疊四塊積木,積木從三種有標籤的素材中抽取;此外有五個透明的活動里程碑,每個獎勵 200 分,總分上限精確為 1,000 分;再搭配一鍵匯出功能,可將目前的模型儲存為本機的 1,200×900 PNG。Brick Builder Studio 完全符合上述描述,可在任何現代瀏覽器中執行,而且在整個使用過程中都能持續編輯,即使你已經達到滿分也是如此。
光是這一句話,就已經點出了核心承諾:一款免費、基於瀏覽器的積木建造遊戲,你可以挑選素材、堆疊積木、為了探索而獲得里程碑,而非為了拼出某個指定輪廓;完成後還能帶走一張你所打造作品的攜帶型圖片。本指南的其餘部分將帶你了解這個工作室的運作方式、格網實際能做的事、分數如何計算、PNG 匯出在你的裝置上會如何運作,以及幾個讓創作更輕鬆的實用技巧。
Brick Builder Studio 實際提供的功能
Brick Builder Studio 是一款以瀏覽器為基礎的自由形式建造玩具,核心是一個 5×5 的格網。棋盤上的每一格可容納零到四塊積木,而每塊積木都標記著三種虛構的視覺標籤之一:黏土 (Clay)、沙子 (Sand) 與石板 (Slate)。這裡沒有必須達成的輪廓、沒有許可順序、沒有預算限制、沒有有限的庫存、沒有物理模擬,也沒有隱藏解答。棋盤從空白開始,在整個使用過程中都能持續編輯,即使已經賺到所有活動里程碑也不例外。
這個工作室將滑鼠、觸控與鍵盤輸入視為對等。滑鼠與觸控使用者先點選一格,再透過明確的「新增積木 (Add brick)」或「移除頂部 (Remove top)」動作進行操作,這代表你可以檢視或縮短既有的堆疊,而不會不小心在其上方放置新積木。鍵盤玩家則以方向鍵移動格網游標,Enter 或 Space 放置,Backspace 或 Delete 刪除,並用 1、2、3 鍵在黏土、沙子與石板之間切換。帶有修飾鍵的快速鍵會被刻意忽略。每一格也會向輔助技術公開其行、列、目前高度、容量與頂部素材,而棋盤採用循環式鍵盤焦點,並為動作控制項採用一致的觸控目標尺寸。
如果你想要更具限制的堆疊挑戰、需要對應特定輪廓,可以參考我們的 Block Stacking Puzzle: Rotate and Match Five 5×5 Targets 指南,介紹的是另一個以目標為導向的變體,值得與這個自由形式的工作室一起探索。
如何建造、編輯並賺取五個里程碑
- 在瀏覽器中開啟 Brick Builder Studio,並從黏土、沙子或石板選擇器中挑選一個起始素材。
- 在空白的 5×5 格網上點擊或輕觸任一格以選取它,或使用方向鍵移動鍵盤游標。
- 點擊畫面上的「新增積木 (Add brick)」,或按下 Enter 或 Space,將所選素材放置於該格的堆疊頂部。
- 隨時可用 1、2、3 鍵切換素材,或點擊其他標籤,然後在你想要的格子上重複放置動作。
- 選擇任一堆疊,使用「移除頂部 (Remove top)」,或按下 Backspace 或 Delete,即可只刪除該格最頂端的那塊積木。
- 觀察即時狀態區域,五個里程碑將逐一點亮,每個獎勵 200 分,直到分數達到 1,000。
- 達到 1,000 分後仍可繼續新增或移除積木以微調模型,或直接前往「匯出 PNG (Export PNG)」儲存目前的作品。
- 只有在想要完全重來時才使用「重新開始 (Restart)」,因為它是唯一一個會同時清空模型、所選素材、里程碑與分數的動作。
格網限制與素材標籤一覽
這個工作室採用的是固定尺寸,你在規劃作品時可以放心依賴。棋盤永遠是 5 欄 × 5 列,共 25 格,每格可堆疊零到四塊積木。素材僅限於上述三種標籤,無法新增第四種視覺風格,也無法將單一堆疊推高超過第四層。下表整理了你將在整個使用過程中會用到的結構常數。
| 屬性 | 數值 |
|---|---|
| 格網大小 | 5 欄 × 5 列 (25 格) |
| 每格積木數 | 0 到 4 層 |
| 可用素材 | 黏土、沙子、石板 |
| 必須達成的目標輪廓 | 無 |
| 物理模擬、預算或隱藏解答 | 均未提供 |
| 清空工作室的動作 | 僅限「重新開始」 |
由於每一格都是獨立的,你可以在同一個作品中混用空格、單塊積木與四層高的塔,而不會觸發任何衝突或警告。即時狀態區域會顯示目前的積木總數、佔用的格子數、最高堆疊的高度、出現的不同素材數量、已獲得的里程碑,以及分數,因此你隨時都能以數字確認模型的狀態。這個狀態面板位於格網旁邊,在窄螢幕上當棋盤與里程碑紀錄垂直堆疊時,仍可保持可達,不會隱藏任何控制項。
1,000 分的計分方式
這個分數記錄的是五個可見的創作里程碑,而不是評斷某個正確的佈局。每個里程碑都有獨特的 ID,只會頒發一次,價值 200 分,因此五個全數達成即可獲得剛好 1,000 分的滿分。里程碑在獲得後仍會保留紀錄,而移除一塊積木可能改變目前的模型,卻不會抹消你先前因達成該里程碑所獲得的分數。達到 1,000 分後仍可繼續新增或移除積木,這項持續性會顯示在格網旁,讓分數永遠不會與結構評等混淆。五個里程碑的定義如下。
| 里程碑 | 觸發條件 | 分數 |
|---|---|---|
| Groundwork | 在空白棋盤上放置第一塊積木 | 200 |
| Footprint | 佔用至少四個不同的格子 | 200 |
| Tower | 建立一座高度至少達三塊積木的堆疊 | 200 |
| Palette | 在目前的模型中同時出現黏土、沙子、石板三種素材 | 200 |
| Studio build | 至少放置十二塊積木,且分散在至少八個格子中 | 200 |
由於上限為 5 × 200,計分公式既精確又具決定性,任何編輯組合都無法讓顯示的總分超過 1,000。這五個里程碑的 ID 都是唯一的,因此即使你移除了原本滿足某個觸發條件的積木,該分數仍會保留,而不是稍後重新頒發。一旦達到 1,000,你可以繼續微調作品、移除積木、新增積木,而完全不需要清空工作室,分數只會固定停留在最大值。
滑鼠、觸控與鍵盤控制項比較
這個工作室透過兩條平行的輸入路徑,提供相同的放置、移除與素材選擇,確保滑鼠、觸控與鍵盤使用者擁有對等的控制權。滑鼠與觸控使用者先選取一格,再以獨立動作觸發「新增積木」或「移除頂部」,這能保護既有堆疊不會被意外加高。鍵盤使用者以方向鍵移動、Enter 或 Space 放置、Backspace 或 Delete 移除,並用 1、2、3 切換素材。下表將這兩條路徑並列比較。
| 動作 | 滑鼠或觸控路徑 | 鍵盤路徑 |
|---|---|---|
| 選取一格 | 輕觸或點擊該格 | 方向鍵移動格網游標 |
| 在所選格子上放置積木 | 點擊「新增積木 (Add brick)」控制項 | Enter 或 Space |
| 移除所選格子頂部的積木 | 點擊「移除頂部 (Remove top)」控制項 | Backspace 或 Delete |
| 選擇黏土 / 沙子 / 石板 | 點擊素材標籤 | 按下 1、2 或 3 |
| 將目前作品儲存為 PNG | 點擊「匯出 PNG (Export PNG)」控制項 | 未綁定按鍵 |
| 將工作室重設為空白棋盤 | 點擊「重新開始 (Restart)」控制項 | 未綁定按鍵 |
諸如 Ctrl、Alt、Shift 或 Meta 等帶修飾鍵的快速鍵會被刻意忽略,如此一來,意外的和弦按鍵絕不會觸發任何動作。每個動作控制項都採用一致的觸控目標尺寸;在窄螢幕上,棋盤與里程碑紀錄會垂直堆疊,既不會隱藏控制項,也不會強迫使用桌面版視窗大小。這個工作室也透過循環式鍵盤焦點,將每一格的行、列、目前高度、容量與頂部素材公開給輔助技術,因此螢幕閱讀器使用者能在編輯前先檢查任一堆疊。
將作品匯出為本機 PNG
「匯出 PNG (Export PNG)」會在你的瀏覽器中建立一塊全新的 1,200×900 畫布,並將目前純粹的積木模型重新繪製到其上。匯出過程會遍歷與遊戲邏輯相同的經過測試的列、行、層級與素材快照,因此你在工作室中看到的內容,將與圖片呈現的完全一致。它不會擷取不相關的頁面截圖、不會擷取外部圖片、不會載入遠端字型、不會呼叫 API,也不會把你的模型上傳到任何地方。
產生的圖片會以 brick-builder-studio.png 的檔名,透過一個暫時的本機物件 URL 提供下載,這代表整個檔案是在你的裝置上建立並儲存的。由於匯出是由記憶體中的模型驅動,而非即時的 DOM,你的作品在匯出後仍然保持不變,因此你可以繼續在同一個工作階段中編輯,稍後若想要更新版本也能再次匯出。如果你想要重來,只有「重新開始 (Restart)」動作會將工作室回復到決定性的空白狀態;匯出本身絕不會清空模型。
Creative building tips that work well in the 5×5 space
Because the studio does not require any target shape, the most efficient route to the 1,000-point cap is to plan around the five milestones instead of around a visual idea. Place your first brick anywhere to earn Groundwork, then spread into at least four cells to pick up Footprint, and stack one tower to at least three layers before you forget. Switching materials early ensures Palette lights up as soon as the third label appears, and finishing the Studio build milestone is mostly a matter of distributing twelve bricks across eight or more cells rather than concentrating them in one or two stacks.
A few practical habits make the studio easier to use. Build tall towers in the corners so they do not block your cursor when you move around the rest of the grid. Use keyboard 1, 2, and 3 to swap materials faster than clicking the selector on every placement. Treat the live status area as your honest readout: total bricks, occupied cells, tallest stack, material count, earned milestones, and score all update as you edit. If you want a completely fresh starting point, hit Restart to return to the deterministic empty board; otherwise just keep playing, because no milestone ever blocks further edits and no edit ever wipes an earned milestone.
Once the build looks the way you want it, hit Export PNG to capture the current snapshot without disturbing the in-progress session, and keep iterating. Because every milestone is awarded exactly once and the score is capped at 1,000, you can experiment freely without worrying about losing points, and you can compare several exports from the same session to see how the same starting board evolves as you add and remove bricks.
Finally, remember that the five-by-five grid, the four-layer limit, the three labels, the milestone thresholds, the 1,000-point cap, and the export layout are all original product fixtures. They do not represent real brick dimensions, load capacity, structural engineering, construction codes, architecture guidance, or material performance. Brick Builder Studio is recreational creative software, so the value of the build is the time you spend shaping it and the PNG you take with you, not any claim about how the bricks would behave in the real world.
Related reading: Build a City Game: Play the 5-Permit Puzzle to 1,000.