【Blockly系列教程】创建自定义块

接下来，我们要为工作区添加自定义“播放声音”块：

创建声音块脚本文件。

要在Blockly中定义自定义块，必须在js文件中指定它。创建一个JS文件来定义一个新的“播放声音”块：

1. sound_blocks.js在scripts目录中添加文件。
2. 将以下代码添加到sound_blocks.js：

Blockly.defineBlocksWithJsonArray([{"type":"play_sound","message0":"Play %1","args0":[{"type":"field_dropdown","name":"VALUE","options":[["C4","sounds/c4.m4a"],["D4","sounds/d4.m4a"],["E4","sounds/e4.m4a"],["F4","sounds/f4.m4a"],["G4","sounds/g4.m4a"],["A5","sounds/a5.m4a"],["B5","sounds/b5.m4a"],["C5","sounds/c5.m4a"]]}],"previousStatement":null,"nextStatement":null,"colour":355,"tooltip":"","helpUrl":""}]);

JSON内部defineBlocksWithJsonArray调用描述了块的外观，例如它的颜色，内容，连接器类型等。该type: "play_sound"属性定义了块的名称，我们将使用该名称将块注入工作区。

将声音块添加到工具箱中

打开 index.html。首先，让我们导入新创建的sound_blocks.js文件：

<scriptsrc="scripts/sound_blocks.js"></script>

现在我们可以更新工具箱以包含新的声音块。

工具箱的XML结构已包含“ 循环 ”类别。在该类别之后，添加包含我们的自定义块的“ 声音 ”类别play_sound：

<xml><categoryname="Loops"colour="120">
    ...
  </category><categoryname="Sounds"colour="170"><blocktype="play_sound"></block></category></xml>

再次运行应用程序，并使用新的“ 声音 ”类别和新的“播放（声音）”块进行播放。它应该如下所示：