<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的可视化编程开发平台应运而生。这种平台旨在让青少年...
该平台针对不同编程熟练程度的青少年设置了“入门级”、“基础级”和“进阶级”三个层次,分别提供“动画编程”、“游戏编程”和“可视化编程”三大系列的模块。通过这种分层和分类的方式,平台能够逐步引导孩子们从...
在少儿编程环境中,Babylon.js可能用于实现可视化编程的结果,让孩子们可以实时看到他们编写的代码在3D空间中的表现。 5. **vue.config.js**:这是Vue CLI项目的配置文件,开发者可以在此定制Vue CLI服务,比如设置...
Blockly的核心理念在于“可视化编程”,它将传统的文本代码转化为直观的积木块,使得编程变得更加直观易懂。在HTML环境下,用户可以利用Blockly创建出交互式的编程界面,无需复杂的语法知识,只需简单的拖放操作,就...
图形化编程是一种通过拖拽图形化块来编写代码的方法,它降低了编程的入门难度,特别适合初学者和青少年学习。在NCT的图形化编程二级考试中,学生将被要求掌握以下几个核心知识点: 1. **基础编程概念**:了解变量、...
总的来说,google-blockly是一个强大的工具,它通过可视化编程方式降低了编程的复杂性,提高了编程的可访问性,尤其适合教育和初学者。它的开源特性鼓励社区参与,推动了更多的创新和个性化应用。通过深入学习和使用...
werkbank 是一个专门为 Clojure 语言设计的块状可视化编程工具,它借鉴了 Google 的 Blockly 概念,为程序员提供了一种通过拖放图形化块来编写代码的方式,尤其适合教育和初学者入门。werkbank 的核心目标是降低 ...
这种可视化编程方式尤其适合教育场景,帮助学生理解基本的编程概念,如循环、条件语句和函数,而无需接触复杂的语法。 在ESP32 Mixly中,用户可以设计和控制各种硬件接口,如GPIO(通用输入/输出)、ADC(模拟数字...
Mixly的核心特点是其图形化编程界面,它基于Blockly项目,这是一个由Google开发的开源项目,旨在通过积木块的方式实现编程概念的可视化。用户可以通过拖拽不同功能的代码块,拼接成完整的程序,这种方式避免了初学者...
"Blockly Delights"项目是将这个可视化编程平台与流行的沙盒游戏Minecraft相结合,为学生提供一个既有趣又有教育意义的编程学习环境。 **1. Google Blockly** Blockly的核心是其图形化编程界面,它将传统的文本编程...
`Blockly-Nelua` 是一个项目,旨在为Nelua编程语言提供一个基于Blockly的可视化编程环境。Blockly是Google开发的一个开源库,用于创建可自定义的图形化编程工具,而Nelua则是一种静态类型的、面向系统的Lua方言,...
Blockly是一种由Google开发的开源可视化编程工具,它使用积木块来构建代码,降低了编程的入门难度。对于Lego Mindstorms NXT 2.0用户来说,这意味着无需掌握复杂的文本编程语法,就可以通过拖放的方式创建和编辑指令...
此外,还有像Blockly这样的开源项目,它们提供了与Scratch类似但更加通用的可视化编程工具,可以与多种编程语言结合使用。 随着硬件技术的发展,例如树莓派、Arduino等微型计算机和物联网设备的普及,孩子们也有...
1. **Scratch**:由麻省理工学院(MIT)开发的可视化编程语言,通过拖拽积木式的编程块,让孩子们理解基本的编程概念,如逻辑结构、循环和条件语句。 2. **Code.org**:提供一系列在线编程课程,适合不同年龄层次的...
这种方式降低了编程的入门门槛,使得教育者和开发者能够构建自己的可视化编程环境。 JavaScript是这个项目的主要技术栈,意味着BlocklyUC3M是用JavaScript语言编写的,并且可能利用了浏览器的Web技术,如HTML和CSS...
Blockly @ rduino是一种基于Google的Blockly项目定制的图形化编程工具,它将复杂的编程语法转化为可拖动的积木块,使得编程过程更加可视化和直观。对于教育领域,特别是STEM(科学、技术、工程和数学)教育,这种...
Blockly是Google开源的一个可视化编程工具,它提供了一套积木式的编程界面,用户可以通过拖拽代码块来构建程序。这种图形化的编程方式使得复杂的逻辑结构变得简单明了,减少了语法错误的可能性,同时也降低了编程...
2. **可视化编程**:用户可以通过拖拽预定义的代码块来构建程序,降低了编程入门的难度。 3. **代码转换**:Blockly能够将这些可视化编程块转换为多种编程语言的源代码,如JavaScript、Python等。 4. **多平台兼容**...
"BlocklyExtended:玩块状"是一个基于Google的Blockly项目的扩展,它提供了一种更加丰富的可视化编程体验。Blockly是Google推出的一个免费且开源的在线编程工具,用户可以通过拖放图形化积木来编写程序,这种方式特别...