Google blockly简介（三）puzzle游戏的制作

完成puzzle游戏的制作（一）相关的案例之后，来正式开始着手做puzzle游戏。

Puzzle游戏界面

1. 新建代码块

使用Blockly Developer Tools新建拼图所涉及的代码块。

 

 

 

拼图模块1

 

 

 

拼图模块2

 

拼图模块3

 

拼图模块4

 

拼图模块5

2. 导出代码块

导出代码块

 

点击Block Exporter选项卡，全选所有代码块，选择Block Definition(s)和Generator Stub(s)的文件类型，并分别定义文件名，点击Export，即可将所有的块的定义代码导入到puzzle_b.js文件夹中，将所有的块的生成代码导入到puzzle_g.js文件夹中。

3. 导出工作区

拼图案例不涉及Toolbox工具箱，所以这里直接定义工作区即可，将需要用到的块添加到工作区，然后导出Starter Code和Workspace Blocks文件。

 

设置并导出工作区

4. 文件的整理

新建文件夹，并将2和3步中导出的文件，都复制粘贴到新建的文件夹中；将blockly_compressed.js和javascript.js文件复制粘贴到新建的文件夹中；

 

js文件整理

 

js文件导入：

<script src="blockly_compressed.js"></script>
<script src="puzzle_b.js"></script>
<script src="javascript_compressed.js"></script>
<script src="puzzle_g.js"></script>

并将workspace的xml文件，插入到body标签中，修改导出的workspace.js中的代码：

/* Inject your workspace */ 
var workspace = Blockly.inject('blockDiv', options);

完成以上步骤之后，保存所有的文件，并用浏览器打开html文件，在浏览器中查看是否创建成功。

 

puzzle界面成功加载

5. 对“检查答案”功能进行设计

（1）添加按钮

在body中添加“检查答案”的按钮

<button id="check_button">检查答案</button>

（2）设计生成代码

给每个块设置返回代码，这里为了方便匹配和判断，选取简单的数字作为返回值：

Blockly.JavaScript['question'] = function(block) {
  var value_question_img = Blockly.JavaScript.valueToCode(block, 'question_img', Blockly.JavaScript.ORDER_ATOMIC);
  var dropdown_leg_number = block.getFieldValue('leg_number');
  var statements_question_statement = Blockly.JavaScript.statementToCode(block, 'question_statement');
  // TODO: Assemble JavaScript into code variable.
  var code = (value_question_img=="(#cat)" && dropdown_leg_number=="4" && statements_question_statement==21 );
  if(code){
      return "yes";
  }else{
      return "no";
  }
};

Blockly.JavaScript['answer_img_cat'] = function(block) {
  // TODO: Assemble JavaScript into code variable.
  var code = '#cat';
  // TODO: Change ORDER_NONE to the correct strength.
  return [code, Blockly.JavaScript.ORDER_NONE];
};

Blockly.JavaScript['answer_img_dog'] = function(block) {
  // TODO: Assemble JavaScript into code variable.
  var code = '#dog';
  // TODO: Change ORDER_NONE to the correct strength.
  return [code, Blockly.JavaScript.ORDER_NONE];
};

Blockly.JavaScript['answer_statement1'] = function(block) {
  // TODO: Assemble JavaScript into code variable.
  var code = '';
  code = '21';
  return code;
};

Blockly.JavaScript['answer_statement2'] = function(block) {
  // TODO: Assemble JavaScript into code variable.
  var code = '22';
  return code;
};

并且在workspace.js文件中添加对应的button控制代码：

 /* 创建点击函数 */
function button_click(){
    var code = Blockly.JavaScript.workspaceToCode(workspace);
    console.log(code);
    console.log("----" + code.match("no"))
    if(code.match("no")== null){
        alert("恭喜你，全对！");
    }else{
        alert("别灰心，继续加油！");
    }
}

/* 添加点击事件监听 */
document.getElementById("check_button").addEventListener("click", button_click);

修改完成之后，保存所有代码，用浏览器打开html文件进行测试：

 

恭喜你，全对！

 

别灰心，继续加油！

说明：
在最初设计返回代码时，“尾巴”和“羽毛”模块的返回代码定义的是“#weiba”和“#yumao”，但是和主块（question块）进行拼接后值传递过程中，发现总是会返回undefined的数据类型，无法进行相等判断，故采用21和22这样的数字，进行判断。（后续会针对这一问题尽行更新发布）

作者：郅朋
链接：https://www.jianshu.com/p/b129459d90e4
來源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。