【Blockly开发教程】05 积木块基础概念（上）

Bright_Lin

已于 2024-06-12 22:58:29 修改

阅读量1.4k

点赞数 13

分类专栏： Blockly开发文章标签： javascript blockly 少儿编程 scratch 前端

于 2024-05-20 23:02:50 首次发布

本文链接：https://blog.youkuaiyun.com/huil0925/article/details/138926725

版权

本文详细介绍了Blockly中积木块的类型，包括语句块、值块、变量块、逻辑运算块、数学运算块、文本块、列表块、颜色块和函数块。同时，阐述了积木块的定义、头部、输入、字段和输出等组成部分，为初学者提供了深入的理解。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

你将收获

通过本文，你将了解积木块有哪些类型、如何定义、有什么组成。

核心概念

Blockly 是一个由 Google 开发的 Web 库，它允许开发者在应用程序中嵌入基于块的编程代码编辑器。Blockly 的核心优势在于它使得编程教育和编程本身变得更加易于接近，特别是对初学者而言。

块（Blocks）

定义：

块是Blockly中的图形化编程代码的基础元素，代表文本编程语言中的表达式和语句。
块通过拼图式的接口，使用户能够通过拖放来构建代码逻辑。

我们可以通过几个分类来了解块：

块的类型
块的定义
块的属性
块的行为

块的类型

语句块（Statement Blocks）

包含执行代码的块，如循环、条件判断等。
通常包含一个或多个输入，用于嵌套其他块。
这类积木块通常像一个字母“C”。
在这里插入图片描述
定义如下：

{
   
    'type': 'controls_repeat_ext',
    'message0': '%{BKY_CONTROLS_REPEAT_TITLE}',
    'args0': [
      {
   
        'type': 'input_value',
        'name': 'TIMES',
        'check': 'Number',
      },
    ],
    'message1': '%{BKY_CONTROLS_REPEAT_INPUT_DO} %1',
    'args1': [
      {
   
        'type': 'input_statement',
        'name': 'DO',
      },
    ],
    'previousStatement': null,
    'nextStatement': null,
    'style': 'loop_blocks',
    'tooltip': '%{BKY_CONTROLS_REPEAT_TOOLTIP}',
    'helpUrl': '%{BKY_CONTROLS_REPEAT_HELPURL}',
 },

值块（Value Blocks）

用于表示数据和变量，可以连接到其他块的值输入上。
例如，数字、字符串、布尔值等。
这类积木块通常左边有一个拼图接口，右边是封闭边：
在这里插入图片描述
定义如下，关键代码'output': 'Number', 设置了output后，积木块与其他积木块连接时，会对比另一个积木块的input是否和这个积木块的output类型一直，不一致是无法拼接的。

  {
   
    'type': 'math_number',
    'message0': '%1',
    'args0': [
      {
   
        'type': 'field_number',
        'name': 'NUM',
        'value': 0,
      },
    ],
    'output': 'Number',
    'helpUrl': '%{BKY_MATH_NUMBER_HELPURL}',
    'style': 'math_blocks',
    'tooltip': '%{BKY_MATH_NUMBER_TOOLTIP}',
    'extensions': ['parent_tooltip_when_inline'],
  },

变量块（Variable Blocks）

用于声明或引用变量。在工具箱中，有一个创建变量的按钮，创建后，工具箱（Toolbox）会出现三个积木块：
在这里插入图片描述
这三个积木块，对应：

为变量赋值块：set [ ] to [ ]
修改变量的值: change [ ] by [ ]
取变量值: get [ ]

工具箱中的变量声明方式，和其他分类不同。其他分类需要列举<block>，而变量分类只需要：

<category name="Variables" custom="VARIABLE" colour="%{BKY_VARIABLES_HUE}"></category>

逻辑运算块（Logic Blocks）

执行逻辑运算，如AND、OR、NOT等。

逻辑运算块，取值是布尔（boolean）类型。还包含逻辑运算符。

定义如下，关键代码'output': 'Boolean'：

  {
   
    'type': 'logic_negate',
    'message0': '%{BKY_LOGIC_NEGATE_TITLE}',
    'args0': [
      {
   
        'type': 'input_value',
        'name': 'BOOL'</