完成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这样的数字，进行判断。（后续会针对这一问题尽行更新发布）
网友评论