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

缺乏、安全感 2022-05-13 04:00 495阅读 0赞

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

![70][]

Puzzle游戏界面

1. 新建代码块

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

![70 1][]

拼图模块1

![70 2][]

拼图模块2

![70 3][]

拼图模块3

![70 4][]

拼图模块4

![70 5][]

拼图模块5

2. 导出代码块

![70 6][]

导出代码块

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

3. 导出工作区

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

![70 7][]

设置并导出工作区

4. 文件的整理

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

![70 8][]

js文件整理

js文件导入：

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

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

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

![70 9][]

puzzle界面成功加载

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

（1）添加按钮

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

（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文件进行测试：

![70 10][]

恭喜你，全对！

![70 11][]

别灰心，继续加油！

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

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

[70]: /images/20220513/c9f5d3ed47f94cb29ef2a84bd8d42f00.png
[70 1]: /images/20220513/d13607840bab40ddb3ce4dc7c7c2ee0a.png
[70 2]: /images/20220513/7561172a3c054e75a82ce3f3e2256ccd.png
[70 3]: /images/20220513/1234b1cb368d48f8819bf205ff74bebd.png
[70 4]: /images/20220513/a68194fbc48c4f0fa589ed1983c6a925.png
[70 5]: /images/20220513/8a7d7990277f414486100f519c2ed53d.png
[70 6]: /images/20220513/be7edac1fcf246c2889dbda9c384d5ad.png
[70 7]: /images/20220513/da0503f2d0d44d41b4a63d3d5d75eb94.png
[70 8]: /images/20220513/e8362a83c9664d8fa9be9407b1a5c9f7.png
[70 9]: /images/20220513/f4cb92e5d9e1427fa8b6f5870b9bffac.png
[70 10]: /images/20220513/a5ea5e55a5684b2d80c7ff9278c237e6.png
[70 11]: /images/20220513/9942e6371566474b96eec8a50b4f0b07.png