https://zhuanlan.zhihu.com/p/147724302
之前做过一点这方面的开发，最近整理硬盘，想把这个项目删掉，雁过留痕，写篇文章留个念想，在开始之前首先介绍一个国外非盈利组织建设的少儿编程教学站点http://code.org，有家长想不花钱教孩子学编程，在此隆重推荐一下。这个平台上的课程甚至可以说很多付费教学课程的母版。而且这个平台的课程还在不断进化发展。
先来一张人家的实际界面效果图，让大家感性经验一下。下面开发篇我们来自己的原型界面
界面的左侧是游戏效果展示窗口，右侧是积木式编程界面。
右侧编辑器界面是采用积木式编程编辑器来做，左侧图形交互界面的实现,使用2D的HTML5游戏引擎解决。先剧透答案吧：积木式编程编辑器使用Google出品的Blockly，左侧是采用开源HTML5游戏引擎Phaser.js。
先谈谈Blockly，Blockly是Google开源的积木式编程编辑器，具有高度的二次定制开发能力且多端适配，业界比较知名Scratch的3.0版本开始也是采用Blockly，我们在做这次开发前，为了在技术层面掌控高度灵活的定制能力，我们也采用了Google的Blockly，http://code.org对Blockly做了轻度的二次定制，我们在对Blockly实现的界面做一些它本身不支持的定制开发时，采用在SVC层面直接操作DOM来达到目的，下面谈谈Blockly的二次定制开发主要面向其基本编程命令块展开，可以对命令块的外部显示以及内部命令逻辑等多个层面做定制开发，同时Blockly官方提供了一个定制编辑器，在编辑器内可以以GUI图形交互的模式定制命令块Block。
接着谈谈HTML5游戏引擎，为什么用游戏引擎做这个交互，因为整个少儿编程教学的交互都是游戏式的，为什么采用HTML5游戏引擎，其可以覆盖Web、Android、iOS多种前端。phaser的整个架构体系有一套属于游戏引擎行业的专业技术术语体系，需要逐步理解，对这些术语的准确理解有助于有效地使用这个游戏引擎的特性，为什么没有采用国产的一些高度工具化的H5游戏引擎，而采用Phaser.js，工具化的框架好做制式产品项目，而我们这行教学环境内的嵌入式游戏交互，使用Phaser，其在源代码技术架构上的可控度要高一点。
好吧，架构选型篇就谈到这儿了，下篇实战开发篇上原型代码。