【高级互动】如何用木疙瘩做游戏？
在众多H5作品中，游戏无疑是最吸引人的类型！而木疙瘩强大的行为功能合集已经足够实现大部分的游戏功能了，这里将分享一下 如何用木疙瘩来做游戏！
首先我们来看看木疙瘩目前都有哪些优秀的游戏案例吧！
1.休闲游戏大合集
2.神射手
3.抓蝴蝶
4.炒茶大师
5.像素鸟
更多案例→http://www.mugeda.com/cases.php 选择互动游戏分类
那么怎么用木疙瘩做游戏呢？
1.准备素材
首先需要把游戏所要用到的所有素材尽可能的先准备齐全，这样可以更直观的观察到游戏的效果，在做的过程中遇到还没有的素材可以临时绘制几何图形代替。
2.充分了解游戏规则
这一部分很重要，充分了解游戏规则并不只是和我们平时看到的游戏规则说明那样，而是要在玩游戏过程中更深度的去理解！
就拿上面的第五个案例《像素鸟》来说明吧
像素鸟的游戏规则说明是：点击屏幕让小鸟上下移动，每穿过一次柱子并且没有碰到柱子则记一分
但我们要结合游戏理解为：
1.小鸟会在场景中前行
2.柱子的出口位置随机变化
3.小鸟会匀加速向下掉落，并且旋转角度也随其改变
4.鼠标点击屏幕会使小鸟瞬间向上移动一段固定的距离，仅仅在手指按下瞬间时有效，持续按下无法连续触发
5.小鸟碰到柱子或者屏幕上下方均使游戏失败，成功穿过柱子则记1分
……等
3.将每一条游戏规则翻译成逻辑语言
到这一部分开始就需要费点脑子了，这里将涉及逻辑判断、数学和物理的各种运算，这一步的翻译可能需要进行很多次，先是翻译成木疙瘩功能可以实现的方法，再翻译成具体的各种公式，这是相对比较难的一部分，也是最容易让人开始放弃的部分。我们要对木疙瘩现有的各种行为的作用以及逻辑表达式的书写格式有足够的了解，详情请参考教程贴：http://bbs.mugeda.com/?/article/289
示范：（对应第二部分游戏规则编号进行翻译）
1. 创建随机数控件，设置变化频率为0.1秒，并在控件上添加行为，使得“改变元素属性”行为持续响应
第一个“改变元素属性”行为持续改变背景图片和柱子的横向坐标
第二个行为判断当坐标超出屏幕范围后，将坐标改为进入屏幕前的坐标
2.在更改柱子坐标的同时再改变柱子的纵向坐标，坐标每次与随机数进行一个取值关联
3.在舞台外创建一个文本框，定义为数值，在随机数控件上添加“改变元素”行为，实时改变小鸟的纵向坐标，使得小鸟按每次按速度下降，同时每次下降增加速度的数值，产生加速掉落效果
4.在屏幕前放置一个透明的块，用来触发鼠标点击行为，鼠标点击触发行为改变速度为向上数值，产生小鸟瞬间向上移动的效果。
5. 在判断小鸟纵向坐标在柱子缝隙范围内，并且小鸟穿过柱子宽度后，坐标小于小鸟坐标时，加1分，用改变元素属性行为对舞台外用于记录分数的文本框进行数值改变。
当小鸟纵向坐标超出屏幕范围、或者在进入柱子区域时候纵向坐标并不在柱子间隙范围内的时候判断游戏失败
……等
4.问题（BUG）检测
在做第三步的时候，绝大部分人都会有BUG产生，有可能是因为行为触发方式选择错误，也有可能是逻辑表达式写错，取值公式算错等等各种原因，这时候我们就要在这种情况下更精确的寻找到BUG是如何产生的。
这里提供几个BUG查找的几个要领：
1.如果出现关联动画失效，或者通过“改变元素”行为无法正确使得物体改变的时候，可以新建一个用于测试的文本框，用来显示关联的数值，或者公式计算结果，可以直观的看到数值的变化，以检查公式是否有错。像陀螺仪这类数值就通常与我们想象中的变化规律不同，最好在做之前先关联文本框观察一下变化规律。
2.如果出现一个或多个导致最终结果实现的行为无法执行的时候，先依次取消执行条件，看看取消后能不能正常产生变化，就可以判断是取值公式的错误还是罗技表达式的错误了。
3.如果确定了是取值公式或者逻辑表达式出错的话，请一定仔细检查一下书写的格式，不要急着让老师帮你找错，有时候很细微的书写问题是很难被找到的，例如英文括号写成了中文括号，英文i写成了数字1，对逻辑表达式没有了解透彻，把判断是否相等的公式写成了 a = b（正确应该是a == b），等等很多细节问题都是BUG产生的一大原因。
4.一个游戏效果不符合理想中的效果，这个时候就需要返回到第三步重新开始审查自己翻译的逻辑是不是正确的，毕竟计算机不是人类，需要很严谨的根据你的命令去执行。
最后，木疙瘩教程页中有一些游戏的案例教程，大家可以去看看老师们是如何按照了上面的流程去做的！
教程地址：http://www.mugeda.com/help.php
4.案例讲解→小游戏
5.热门案例
觉得这篇文章对你有帮助的话，给我点个赞吧！
我的其它文章：
【代码分享】贴边UI功能！ http://bbs.mugeda.com/?/article/426
【代码分享】用鼠标进行控制（鼠标响应事件）！ http://bbs.mugeda.com/?/article/267
手机上播放木疙瘩的H5动画很卡怎么办？5招教你解决！ http://bbs.mugeda.com/?/question/230
首先我们来看看木疙瘩目前都有哪些优秀的游戏案例吧！
1.休闲游戏大合集
2.神射手
3.抓蝴蝶
4.炒茶大师
5.像素鸟
更多案例→http://www.mugeda.com/cases.php 选择互动游戏分类
那么怎么用木疙瘩做游戏呢？
1.准备素材
首先需要把游戏所要用到的所有素材尽可能的先准备齐全，这样可以更直观的观察到游戏的效果，在做的过程中遇到还没有的素材可以临时绘制几何图形代替。
2.充分了解游戏规则
这一部分很重要，充分了解游戏规则并不只是和我们平时看到的游戏规则说明那样，而是要在玩游戏过程中更深度的去理解！
就拿上面的第五个案例《像素鸟》来说明吧
像素鸟的游戏规则说明是：点击屏幕让小鸟上下移动，每穿过一次柱子并且没有碰到柱子则记一分
但我们要结合游戏理解为：
1.小鸟会在场景中前行
2.柱子的出口位置随机变化
3.小鸟会匀加速向下掉落，并且旋转角度也随其改变
4.鼠标点击屏幕会使小鸟瞬间向上移动一段固定的距离，仅仅在手指按下瞬间时有效，持续按下无法连续触发
5.小鸟碰到柱子或者屏幕上下方均使游戏失败，成功穿过柱子则记1分
……等
3.将每一条游戏规则翻译成逻辑语言
到这一部分开始就需要费点脑子了，这里将涉及逻辑判断、数学和物理的各种运算，这一步的翻译可能需要进行很多次，先是翻译成木疙瘩功能可以实现的方法，再翻译成具体的各种公式，这是相对比较难的一部分，也是最容易让人开始放弃的部分。我们要对木疙瘩现有的各种行为的作用以及逻辑表达式的书写格式有足够的了解，详情请参考教程贴：http://bbs.mugeda.com/?/article/289
示范：（对应第二部分游戏规则编号进行翻译）
1. 创建随机数控件，设置变化频率为0.1秒，并在控件上添加行为，使得“改变元素属性”行为持续响应
第一个“改变元素属性”行为持续改变背景图片和柱子的横向坐标
第二个行为判断当坐标超出屏幕范围后，将坐标改为进入屏幕前的坐标
2.在更改柱子坐标的同时再改变柱子的纵向坐标，坐标每次与随机数进行一个取值关联
3.在舞台外创建一个文本框，定义为数值，在随机数控件上添加“改变元素”行为，实时改变小鸟的纵向坐标，使得小鸟按每次按速度下降，同时每次下降增加速度的数值，产生加速掉落效果
4.在屏幕前放置一个透明的块，用来触发鼠标点击行为，鼠标点击触发行为改变速度为向上数值，产生小鸟瞬间向上移动的效果。
5. 在判断小鸟纵向坐标在柱子缝隙范围内，并且小鸟穿过柱子宽度后，坐标小于小鸟坐标时，加1分，用改变元素属性行为对舞台外用于记录分数的文本框进行数值改变。
当小鸟纵向坐标超出屏幕范围、或者在进入柱子区域时候纵向坐标并不在柱子间隙范围内的时候判断游戏失败
……等
4.问题（BUG）检测
在做第三步的时候，绝大部分人都会有BUG产生，有可能是因为行为触发方式选择错误，也有可能是逻辑表达式写错，取值公式算错等等各种原因，这时候我们就要在这种情况下更精确的寻找到BUG是如何产生的。
这里提供几个BUG查找的几个要领：
1.如果出现关联动画失效，或者通过“改变元素”行为无法正确使得物体改变的时候，可以新建一个用于测试的文本框，用来显示关联的数值，或者公式计算结果，可以直观的看到数值的变化，以检查公式是否有错。像陀螺仪这类数值就通常与我们想象中的变化规律不同，最好在做之前先关联文本框观察一下变化规律。
2.如果出现一个或多个导致最终结果实现的行为无法执行的时候，先依次取消执行条件，看看取消后能不能正常产生变化，就可以判断是取值公式的错误还是罗技表达式的错误了。
3.如果确定了是取值公式或者逻辑表达式出错的话，请一定仔细检查一下书写的格式，不要急着让老师帮你找错，有时候很细微的书写问题是很难被找到的，例如英文括号写成了中文括号，英文i写成了数字1，对逻辑表达式没有了解透彻，把判断是否相等的公式写成了 a = b（正确应该是a == b），等等很多细节问题都是BUG产生的一大原因。
4.一个游戏效果不符合理想中的效果，这个时候就需要返回到第三步重新开始审查自己翻译的逻辑是不是正确的，毕竟计算机不是人类，需要很严谨的根据你的命令去执行。
最后，木疙瘩教程页中有一些游戏的案例教程，大家可以去看看老师们是如何按照了上面的流程去做的！
教程地址：http://www.mugeda.com/help.php
4.案例讲解→小游戏
5.热门案例
觉得这篇文章对你有帮助的话，给我点个赞吧！
我的其它文章：
【代码分享】贴边UI功能！ http://bbs.mugeda.com/?/article/426
【代码分享】用鼠标进行控制（鼠标响应事件）！ http://bbs.mugeda.com/?/article/267
手机上播放木疙瘩的H5动画很卡怎么办？5招教你解决！ http://bbs.mugeda.com/?/question/230
2 个评论
厉害，大牛
求逻辑表达式和控件应用详情