定義自訂構成元素

程式區塊是用來編寫程式,它們代表以文字為基礎的程式設計語言中的運算式和陳述式。

如要進一步瞭解區塊及其部分,請參閱圖像詞彙表

區塊定義

區塊定義會指定區塊上的拼圖片連線和欄位。大部分的區塊外觀和樣式都會以其他方式指定。區塊轉換為的字串 (通常是程式碼) 會定義為區塊程式碼產生器

如要定義簡單的區塊,最簡單的方法是使用 JSON。

這個程式碼片段會定義「前進」區塊,其中包含下一個和上一個連結,以及一個距離欄位。

// Create the definition.
const definitions = Blockly.common.createBlockDefinitionsFromJsonArray([
  {
    // The type is like the "class name" for your block. It is used to construct
    // new instances. E.g. in the toolbox.
    type: 'my_custom_block',
    // The message defines the basic text of your block, and where inputs or
    // fields will be inserted.
    message0: 'move forward %1',
    args0: [
      // Each arg is associated with a %# in the message.
      // This one gets substituted for %1.
      {
        // The type specifies the kind of input or field to be inserted.
        type: 'field_number',
        // The name allows you to reference the field and get its value.
        name: 'FIELD_NAME',
      }
    ],
    // Adds an untyped previous connection to the top of the block.
    previousStatement: null,
    // Adds an untyped next connection to the bottom of the block.
    nextStatement: null,
  }
]);

// Register the definition.
Blockly.common.defineBlocks(definitions);

用於前進的區塊

如要進一步瞭解如何定義區塊並將其加入工具箱,請參閱「自訂區塊總覽」。