blockly的hello world 跑起来看看

1   引入两个js文件

blockly内核文件 blockly_compressed.js

基础积木集文件  blocks_compressed.js

2 页面两个模块

积木拼装区 ,画板    一个唯一id的div(拖拽的积木在哪拼)

积木工具区 ,积木箱    一个xml文件或者js字符串 (从哪里拖拽积木)

3 注入blockly  初始化blockly

头一个js文件会在页面中生成一个全局对象 Blockly,直接在web控制台中也可以看到这个全局对象

初始化就是调用其中的inject方法,传入拼装区的id和积木箱的id

如图 

接下来就是把这个积木转化成相应的代码,javascript_compressed.js这个js文件是将积木转成js代码

function showCode() {
      // Generate JavaScript code and display it.
      Blockly.JavaScript.INFINITE_LOOP_TRAP = null;
      var code = Blockly.JavaScript.workspaceToCode(workspace);
      console.log(code,2);
    }

function runCode() {
      // Generate JavaScript code and run it.
      window.LoopTrap = 1000;
      Blockly.JavaScript.INFINITE_LOOP_TRAP =
          'if (--window.LoopTrap == 0) throw "Infinite loop.";\n';
      var code = Blockly.JavaScript.workspaceToCode(workspace);
      Blockly.JavaScript.INFINITE_LOOP_TRAP = null;
      try {
        eval(code);
      } catch (e) {
        alert(e);
      }
    }

调用方法将代码打印出来或者在浏览器中运行

blockly入门教程相关推荐

  1. 小明分享:8ms平台入门教程

    www.8ms.xyz 入门教程, [详细资料获取](http://doc.8ms.xyz/docs/gui-001/gui-001-1cinrj630tggq) 一. 注册个人账号 1.点击主页的& ...

  2. Kafka入门教程与详解

    1 Kafka入门教程 1.1 消息队列(Message Queue) Message Queue消息传送系统提供传送服务.消息传送依赖于大量支持组件,这些组件负责处理连接服务.消息的路由和传送.持久 ...

  3. 【CV】Pytorch一小时入门教程-代码详解

    目录 一.关键部分代码分解 1.定义网络 2.损失函数(代价函数) 3.更新权值 二.训练完整的分类器 1.数据处理 2. 训练模型(代码详解) CPU训练 GPU训练 CPU版本与GPU版本代码区别 ...

  4. python tornado教程_Tornado 简单入门教程(零)——准备工作

    前言: 这两天在学着用Python + Tornado +MongoDB来做Web开发(哈哈哈这个词好高端).学的过程中查阅了无数资料,也收获了一些经验,所以希望总结出一份简易入门教程供初学者参考.完 ...

  5. python向量计算库教程_NumPy库入门教程:基础知识总结

    原标题:NumPy库入门教程:基础知识总结 视学算法 | 作者 知乎专栏 | 来源 numpy可以说是 Python运用于人工智能和科学计算的一个重要基础,近段时间恰好学习了numpy,pandas, ...

  6. mysql query browswer_MySQL数据库新特性之存储过程入门教程

    MySQL数据库新特性之存储过程入门教程 在MySQL 5中,终于引入了存储过程这一新特性,这将大大增强MYSQL的数据库处理能力.在本文中将指导读者快速掌握MySQL 5的存储过程的基本知识,带领用 ...

  7. python tensorflow教程_TensorFlow入门教程TensorFlow 基本使用T

    该楼层疑似违规已被系统折叠 隐藏此楼查看此楼 TensorFlow入门教程 TensorFlow 基本使用 TensorFlow官方中文教程 TensorFlow 的特点: 使用图 (graph) 来 ...

  8. air调用java,AIR2.0入门教程:与Java应用交互

    在之前的一篇文章中,我介绍了如何使用AIR2.0新增的NativeProcess类与本地进程进行交互和通讯,在那个例子里面我们使用了C++ 的代码,实际上只要是基于命令行的标准输入输出,AIR2.0的 ...

  9. 【Arduino】开发入门教程【一】什么是Arduino

    Arduino Arduino 是一款便捷灵活.方便上手的开源电子原型平台,包含硬件(各种型号的arduino板)和软件(arduino IDE).它适用于艺术家.设计师.爱好者和对于"互动 ...

最新文章

  1. 敏捷研发之代码评审与工具
  2. 使用W3C XML Schema
  3. SDUT 贪心算法 删数问题
  4. 赛马问题,毒药问题,倒水问题等智力题
  5. 数据结构C语言版之查找(折半选择快速等)
  6. Vue + Element UI——滚动条el-scrollerbar和无限滚动指令v-infinite-scroll整合解决方案
  7. linux 0660 权限,CentOS 6上安装RAC权限绑定问题
  8. android 常驻轮询服务,Android实现自动轮询的RecycleView
  9. 鳞翅目动物的诅咒:玩java.time
  10. DiscoveryService.getRemoteAdvertisements是否会获得本地通告?
  11. 阿里摩酷实验室CV实习生和社招
  12. 怎么得到16位校检和-c语言,16位CRC校验C语言算法.pdf
  13. linux 0.11 内核学习 -- bootsect.s, 万里长征第一步
  14. flag - 待浏览学习网站
  15. HTML设置限时抢购倒计时步骤,Js网页倒计时代码(限时抢购、网购倒计时)
  16. 详解pandas编码函数pd.factorize()
  17. 去哪儿网被央视曝光,其实智慧旅行可以做到更多
  18. 调戏 ChatGPT
  19. nim博奕和巴什博奕
  20. CentOS 8 升级内核

热门文章

  1. unity 图片 粉碎效果 破碎效果
  2. 孙溟㠭先生禅意篆刻——虚妄的心
  3. 华为交换机密码相关问题解决记录
  4. 服务器虚拟化用2小钢炮,便宜 云服务器首选4小钢炮
  5. 华为AR2220 路由交换一体机简单配置
  6. [Test][心理测试]测试:《红楼梦》你是哪个角色?
  7. 过滤器实现评论内容的限制,玫感字和字数,分别用两个Filter实现
  8. 动态规划入门——详解经典问题零一背包
  9. csuoj1972大梵天的恩赐
  10. No property 属性名 found for type 类名