單元 3 · Blockly 全景 · Blockly × Scratch 繁中教學站

3.1 Blockly 不是「另一個 Scratch」

Blockly 是 Google 推出的開源 JavaScript 程式庫，讓開發者能在自己的網站/應用中嵌入積木編輯器。它不賣產品，而是提供「做產品」的零件。

關鍵：Blockly 的輸出不只是「積木畫面」，還能把積木生成成 JavaScript / Python / PHP / Lua 等程式碼——這是它最強大的地方。

有趣的事實：Scratch 3.0 在 2019 年改用 Blockly 的積木引擎重寫——所以兩者其實「同源」！

HTML 網頁載入 Blockly 程式庫定義積木生成程式碼

概念

一個 Blockly 應用 = 
  積木工具箱（toolbox：有哪些積木可用）
  + 工作區（workspace：使用者拼積木的地方）
  + 生成器（generator：積木 → 程式碼）
  + 執行器（可選：直接跑起來）

Blockly 最核心的能力，是「積木不能直接跑，必須先轉成文字程式碼」。這條管線是二次開發的地基：

拼積木→生成器掃描→每塊積木調用 forBlock 生成器→組合成完整 code 字串

Blockly 內建 5 種語言生成器：

關鍵：「語言生成器」管語言通用規則（縮排/字串引號/註解），「積木生成器（forBlock）」管單一積木怎麼轉。你想要的語言若不在內建 5 種，可以自己寫一個生成器——這正是 L6 單元 21–24 的主題。

範例

打開 blockly.games 迷宮關卡：
1. 用「前進/右轉/左轉」積木控制角色走出迷宮
2. 觀察：積木少 → 程式短；這是「序列」概念
3. 高關卡出現「迴圈」積木 → 重複走
4. 對照：迷宮 = 演算法，迴圈 = 讓程式變短

任務：走完 3 關，說出你用了哪些積木與概念。

動手：玩 Blockly Games 迷宮至少 3 關，並紀錄你用了哪些積木。

進階路線：若你是開發者，本單元後可直接跳單元 21 · Blockly 程式碼生成器深入，從「使用者」轉為「工具製作者」。

看完這單元你應該能說出：