html puzzle游戏,Blockly培训案例-puzzle游戏的制作（一）

去年的两期培训，发现老师们对blockly-games兴趣较高，而且参训老师在返校之后，很多都使用blockly-games进行了教学尝试。而设计这个案例的原因一是老师们对blockly-games较为熟悉且兴趣较高，二是前几个案例都是基于blockly-master中的code demo的代码进行设计的，这个案例将基本抛开blockly-code，是一个全新的开始。

blockly-games游戏界面

所以此puzzle案例将以blockly-games中的puzzle为原型，制作一个简单的拼图游戏，从新建文件夹开始，从“前端”到“后端”，咱们从头来！

Blockly游戏：拼图

Simple Blockly(二)

在正式开始之前，先做一个小案例热热身，这也是谷歌官网的有提到的一个小案例，可能因为是英文的，可能大家没有留意，这里就带大家动手操作一下。

Blockly网站Toolbox例子

1. 超精简Blockly

(1)新建html文件

新建文件夹，并在文件夹中新建index.html文件，并在html文件中，编写之前提到的“最简”html代码：

SSimple Blockly

(2)修改html文件

向上一步html代码中，添加新的“控制”代码：

/*添加到head中*//*添加到body中*/varworkspace = Blockly.inject('blocklyDiv',    {toolbox:document.getElementById('toolbox')});

(3)复制对应js文件

将blockly文件夹中的blockly_compressed.js、blocks_compressed.js、messages.js，放到此文件目录下，用浏览器打开html文件，即可看到你的超精简blockly。(与Blockly Demo中的Fixed Blockly很像)

“超精简Blockly”

当然，这里的blockly只添加了blocks，没有添加category，大家可以自己动手添加。

思考：为什么这里面没有导入blocks的msg文件可以正常显示？

2. 较完整的Blockly

前面我们用到了Blockly的开发者工具，但只是用它来进行块的设计，它的Workspace Factory我们并没有深入接触，这个较完整的Blockly，就是教大家用Workspace Factory，定义你的Blockly。

Workspace Factory界面

(1)定义Toolbox

当选项卡选中Toolbox时，可以通过中部的“+”和“-”，添加或删除Toolbox中的类或块。

“+”选项

New Category，输入类名，新建全新的类；

New Category

Standard Category，输入标准类的类名，将直接添加整个类；

Standard Category

Separator，在类与类之间，新建一个分界线；

Standard Toolbox，添加完整的Toolbox到工作区；

(2)定义Workspace

Worksapce界面

当选项卡选中Workspace时，界面看似和Toolbox没什么区别，不过这里从左侧Toolbox中拖拽到工作区的代码块，都将默认显示在你的工作区，像Plane游戏中的seat块一样，而且可以通过中部的选项，定义工作区的样式，是否添加Zoom，是否添加Grid，是否添加Scrollbars等。

(3)导出文件

完成前两步之后，导出点击“Export”按钮，选择你要导出的文件。

Export选项

这里，我们选择导出ALL。

(4)新建html

如“超精简Blockly”案例一样，先新建“最简”html代码：

SSimple Blockly2

打开(3)中导出的workspace.xml代码，将其复制添加到body中：

打开(3)中导出的toolbox.xml代码，将其复制添加到body中；

将workspace.js文件复制到该文件目录下，并用编辑器打开：

/*TODO:Change toolbox XML ID if necessary. Can export toolbox XML from Workspace Factory. */vartoolbox =document.getElementById("toolbox");varoptions = {toolbox: toolbox,collapse:true,comments:true,disable:true,maxBlocks:Infinity,trashcan:true,horizontalLayout:false,toolboxPosition:'start',css:true,media:'https://blockly-demo.appspot.com/static/media/',rtl:false,scrollbars:true,sounds:true,oneBasedIndex:true};/* Inject your workspace */varworkspace = Blockly.inject(/*TODO:Add ID of div to inject Blockly into */, options);/* Load Workspace Blocks from XML to workspace. Remove all code below if no blocks to load *//*TODO:Change workspace blocks XML ID if necessary. Can export workspace blocks XML from Workspace Factory. */varworkspaceBlocks =document.getElementById("workspaceBlocks");/* Load blocks to workspace. */Blockly.Xml.domToWorkspace(workspaceBlocks, workspace);

在worspace.js代码中，我们只需要修改如下代码：

--------修改前--------/* Inject your workspace */varworkspace = Blockly.inject(/*TODO:Add ID of div to inject Blockly into */, options);--------修改为--------/* Inject your workspace */varworkspace = Blockly.inject("blocklyDiv", options);

修改完成之后，在body底部添加：

注意：workspace.js文件插入的位置，如果插入到head中，可能无法显示。

以上步骤都完成之后，用浏览器打开html文件，即可看到你设计的Blockly界面。

我定义的Blockly界面