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
來源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。

Google blockly简介（三）puzzle游戏的制作相关推荐

html puzzle游戏,Blockly培训案例-puzzle游戏的制作（一）
去年的两期培训,发现老师们对blockly-games兴趣较高,而且参训老师在返校之后,很多都使用blockly-games进行了教学尝试.而设计这个案例的原因一是老师们对blockly-games较 ...
【微信小游戏实战】零基础制作《欢乐停车场》三、游戏场景制作
1.游戏立项微信小游戏中有一款<欢乐停车场Plus>的小游戏,大家可以搜索玩下.这是一款益智类的小游戏,游戏中有红.黄.绿.蓝.紫5辆豪车6个停车位,玩家通过可行走路线移动小车,最终让各 ...
Google blockly简介（二）Blockly Developer Tools使用
现在国内Google官网打不开Blockly Developer Tools,要想使用此工具,那就用别的办法了. https://blockly-demo.appspot.com/static/dem ...
Google blockly简介（一）Simple Blockly操作
谷歌官网的有一些比较简单的demo,大家可以试一下. https://developers.google.cn/blockly/guides/configure/web/fixed-size 一.包括 ...
游戏配音怎么弄的？分享三个游戏配音制作方法
随着时代的发展,人们对于配音的要求也越来越高,除了传统的文字配音外,现在又出现了游戏配音.其实游戏配音也是有一定门槛的,并不是人人都可以做得好的.但是如果你想要拥有一位自己喜欢的游戏角色,那么你就要学 ...
# 使用Scratch 3.0制作弹球游戏（三）——游戏关卡及难度设计
目录使用Scratch 3.0制作弹球游戏(三)--游戏关卡及难度设计 1.第一关 1.1第一关游戏角色需求 1.2第一关游戏玩法设计 1.3角色设计--球 1.4角色设计--接球平台 1.5背景设 ...
升级到游戏设计师攻略之—— 用游戏编辑器制作MOD脱颖而出
[导读] 立志成为游戏策划的你,和千千万万的游戏玩家的不同之处在哪? 是你玩过很多的游戏?别人也玩过是你游戏打得比别人好?也许电子竞技更适合你是你对游戏的理解比别人深,知道如何设计出更好玩的游戏? ...
三十位游戏业界最有影响力的人
三十位游戏业界最有影响力的人(第30) 克里斯.泰勒(Chris Taylor) 现在所处公司:Gas Powered Games 克里斯.泰勒始终保持着自己的童心,他是一个真正的玩家,所以作为制作人 ...
Chillingo分享三款游戏图标的设计经验
每个月在iTunes上发布的游戏多达6000款以上,因此,游戏图标在如此狭窄的空间里激烈地竞争着用户的注意力.时间和屏幕空间.对于全方位普及免费模式的手游产业而言,要想在万千游戏图标中脱颖而出,无疑更 ...

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

Google blockly简介（三）puzzle游戏的制作相关推荐

最新文章

热门文章