`

可视化编程 blockly 入门

 
阅读更多
 <script src="blockly_compressed.js"></script>
  <script src="blocks_compressed.js"></script>
  <script src="javascript_compressed.js"></script>//支持javascript代码转化
  <script src="msg/js/en.js"></script>//支持的语言,并存放blockly 工作区用到的工具的描述

 

将blockly里的模块转化为不同语言的代码

 

 

Blockly.JavaScript.workspaceToCode()
Blockly.Python.workspaceToCode()
Blockly.Dart.workspaceToCode()

 

设定blockly工作区的基本属性, grid 坐标点的设定,rtl 工作区展示方式false为居坐显示;media 静态资源位置

 

 Blockly.inject(document.getElementById('content_blocks'),//工具要展示的位置
      {grid:
          {spacing: 25,
           length: 25,
           colour: 'red',
           snap: false},
       media: '../../media/',
       rtl: false,
       toolbox: document.getElementById('toolbox')//工具的xml的页面元素
     }
   );

 

清空workspace

 

Blockly.mainWorkspace.clear();

 

获取工作区所有模块,返回模块集合数组

 

   Blockly.mainWorkspace.getAllBlocks()

 

MSG用了储存工作区所需文字的区域

 

eval(Blockly.JavaScript.workspaceToCode())

 执行编译后的代码

 

自定义自己的blockly

 

Blockly.Msg.TEXT_CONSOLE_HELPURL = "";//帮助网址
Blockly.Msg.TEXT_CONSOLE_TITLE = "console %1";定义模块上的显示文字
Blockly.Msg.TEXT_CONSOLE_TOOLTIP = "console the specified text, number or other value.";


Blockly.Blocks.text_console = {init: function () {
    this.setHelpUrl(Blockly.Msg.TEXT_CONSOLE_HELPURL);//右键help连接网址
    this.setColour(Blockly.Blocks.texts.HUE);//定义颜色,用数值表示
    this.interpolateMsg(Blockly.Msg.TEXT_CONSOLE_TITLE, ["TEXT", null, Blockly.ALIGN_RIGHT], Blockly.ALIGN_RIGHT);
    this.setPreviousStatement(!0);//设定模块的图形的缺口或突起,其实就是设定程序的流程
    this.setNextStatement(!0);//同上
    this.setTooltip(Blockly.Msg.TEXT_CONSOLE_TOOLTIP)//鼠标停留后使用提示
}};
//定义模块的图形样子,如果感觉比较麻烦可以在一直的blockly 找到近似的然后在修改

Blockly.JavaScript.text_console = function (a) {
    return"console.log(" + (Blockly.JavaScript.valueToCode(a, "TEXT", Blockly.JavaScript.ORDER_NONE) || "''") + ");\n"
};//定义模块所代表的代码,如果感觉比较麻烦可以在一直的blockly 找到近似的然后在修改

 

自定义官方讲解 https://developers.google.com/blockly/custom-blocks/defining-blocks#sethelpurl

分享到:
评论

相关推荐

    基于Blockly的青少年可视化编程开发平台设计论文

    《基于Blockly的青少年可视化编程开发平台设计》 随着信息技术的发展,青少年编程教育逐渐成为全球教育领域的焦点。为了培养青少年的编程思维能力,基于Blockly的可视化编程开发平台应运而生。这种平台旨在让青少年...

    基于Blockly的青少年可视化编程开发平台设计_彭佳汉1

    该平台针对不同编程熟练程度的青少年设置了“入门级”、“基础级”和“进阶级”三个层次,分别提供“动画编程”、“游戏编程”和“可视化编程”三大系列的模块。通过这种分层和分类的方式,平台能够逐步引导孩子们从...

    Vue实现图形化积木式编程Vue前端源码

    在少儿编程环境中,Babylon.js可能用于实现可视化编程的结果,让孩子们可以实时看到他们编写的代码在3D空间中的表现。 5. **vue.config.js**:这是Vue CLI项目的配置文件,开发者可以在此定制Vue CLI服务,比如设置...

    blockly的积木转C++

    Blockly的核心理念在于“可视化编程”,它将传统的文本代码转化为直观的积木块,使得编程变得更加直观易懂。在HTML环境下,用户可以利用Blockly创建出交互式的编程界面,无需复杂的语法知识,只需简单的拖放操作,就...

    【图形化编程二级】NCT全国青少年编程能力等级测试真题卷

    图形化编程是一种通过拖拽图形化块来编写代码的方法,它降低了编程的入门难度,特别适合初学者和青少年学习。在NCT的图形化编程二级考试中,学生将被要求掌握以下几个核心知识点: 1. **基础编程概念**:了解变量、...

    google-blockly

    总的来说,google-blockly是一个强大的工具,它通过可视化编程方式降低了编程的复杂性,提高了编程的可访问性,尤其适合教育和初学者。它的开源特性鼓励社区参与,推动了更多的创新和个性化应用。通过深入学习和使用...

    werkbank:Clojure的块状可视化编程

    werkbank 是一个专门为 Clojure 语言设计的块状可视化编程工具,它借鉴了 Google 的 Blockly 概念,为程序员提供了一种通过拖放图形化块来编写代码的方式,尤其适合教育和初学者入门。werkbank 的核心目标是降低 ...

    ESP32 Mixly 图形化程序 & 插件

    这种可视化编程方式尤其适合教育场景,帮助学生理解基本的编程概念,如循环、条件语句和函数,而无需接触复杂的语法。 在ESP32 Mixly中,用户可以设计和控制各种硬件接口,如GPIO(通用输入/输出)、ADC(模拟数字...

    Mixly软件,傻瓜式编程

    Mixly的核心特点是其图形化编程界面,它基于Blockly项目,这是一个由Google开发的开源项目,旨在通过积木块的方式实现编程概念的可视化。用户可以通过拖拽不同功能的代码块,拼接成完整的程序,这种方式避免了初学者...

    blockly_delights:Blockly Delights-使用Google Blockly和Minecraft进行STEM教育

    "Blockly Delights"项目是将这个可视化编程平台与流行的沙盒游戏Minecraft相结合,为学生提供一个既有趣又有教育意义的编程学习环境。 **1. Google Blockly** Blockly的核心是其图形化编程界面,它将传统的文本编程...

    blockly-nelua:生成 Nelua 的 Blockly!

    `Blockly-Nelua` 是一个项目,旨在为Nelua编程语言提供一个基于Blockly的可视化编程环境。Blockly是Google开发的一个开源库,用于创建可自定义的图形化编程工具,而Nelua则是一种静态类型的、面向系统的Lua方言,...

    lego_blockly:使用Web bolckly编程lego mindstorm RXC 2.0

    Blockly是一种由Google开发的开源可视化编程工具,它使用积木块来构建代码,降低了编程的入门难度。对于Lego Mindstorms NXT 2.0用户来说,这意味着无需掌握复杂的文本编程语法,就可以通过拖放的方式创建和编辑指令...

    少儿编程只知道对对对,你就out了!.docx

    此外,还有像Blockly这样的开源项目,它们提供了与Scratch类似但更加通用的可视化编程工具,可以与多种编程语言结合使用。 随着硬件技术的发展,例如树莓派、Arduino等微型计算机和物联网设备的普及,孩子们也有...

    适合小孩接触编程起步的几款软件,从游戏中学习编程-2021-08-29(B).pdf

    1. **Scratch**:由麻省理工学院(MIT)开发的可视化编程语言,通过拖拽积木式的编程块,让孩子们理解基本的编程概念,如逻辑结构、循环和条件语句。 2. **Code.org**:提供一系列在线编程课程,适合不同年龄层次的...

    blockly_uc3m

    这种方式降低了编程的入门门槛,使得教育者和开发者能够构建自己的可视化编程环境。 JavaScript是这个项目的主要技术栈,意味着BlocklyUC3M是用JavaScript语言编写的,并且可能利用了浏览器的Web技术,如HTML和CSS...

    用于Arduino IDE的Blockly @ rduino插件-项目开发

    Blockly @ rduino是一种基于Google的Blockly项目定制的图形化编程工具,它将复杂的编程语法转化为可拖动的积木块,使得编程过程更加可视化和直观。对于教育领域,特别是STEM(科学、技术、工程和数学)教育,这种...

    waddle-master.zip

    Blockly是Google开源的一个可视化编程工具,它提供了一套积木式的编程界面,用户可以通过拖拽代码块来构建程序。这种图形化的编程方式使得复杂的逻辑结构变得简单明了,减少了语法错误的可能性,同时也降低了编程...

    BlocklyPrototypeEB:使用 Blockly 的 ExperimentBuilder 原型

    2. **可视化编程**:用户可以通过拖拽预定义的代码块来构建程序,降低了编程入门的难度。 3. **代码转换**:Blockly能够将这些可视化编程块转换为多种编程语言的源代码,如JavaScript、Python等。 4. **多平台兼容**...

    blocklyExtended:玩块状

    "BlocklyExtended:玩块状"是一个基于Google的Blockly项目的扩展,它提供了一种更加丰富的可视化编程体验。Blockly是Google推出的一个免费且开源的在线编程工具,用户可以通过拖放图形化积木来编写程序,这种方式特别...

Global site tag (gtag.js) - Google Analytics