【越策划】不写代码——教你如何快速制作h5独立小游戏（下篇）
上一篇不写代码：教你如何快速制作h5独立小游戏（上篇）中，我们制作的html5，最后终于让可爱的小僵尸能缓缓地向右走动了。那在小僵尸能行走后，我们要怎样继续再进一步完善我们的小游戏呢？
要实现这个目标，我们要实现这两种效果：一，让僵尸“知道”自己现在朝向哪里；二，让僵尸碰到屏幕边界后转身返回。
现在我们要在僵尸身上添加一个变量，标注它现在是“向左”还是“向右”。
选中僵尸，在B区属性内点击Instance variables添加局部变量。
设置Name为direction（当然也可以自己设喜欢的变量名），Type选择Text（文本），Initial value设置为right（当然也可以用符号表示向左或向右，自己看得懂就好）。
设置好变量之后，僵尸就“知道”自己应该是向左还是向右了，另外还要在代码中添加对僵尸目前状态的判断。
我们要对原有的代码进行修改，右键点击2号代码，选择Add，选择Addsub-event
选择僵尸，选择Compareinstance variable
大家可以看到，系统已经自动检测到局部变量了，大家只需要保证comparison的值是=equal to，value的值是”right”（一定要有英文引号，注意！）。
同样的操作，同样步骤再建立一个sub-event，只是最后的value的值为”left”。 最终的效果为一个一分为二的分支：
看到这里，一些聪明的朋友就应该能够猜到，我们只要分别在”right”和”left”后面分别对应让僵尸向右走、向左走就可以了。
之前有做好的，将其拉拽到”right”后面即可，然后同样的方式再创建一个，control改成left即可。
光是这样还不够，因为僵尸的动画素材是向右走的，如果向左走的话，就会出现“僵尸版月球漫步”倒着走了，所以我们要在进行一些相关设置。
点击Addaction，添加僵尸的事件：
选择Setmirrored，设置镜像：
因为我选择的是在“right”下创建的，所以要选择not mirrored，不进行镜像。
同样操作，在“left”下创建同样的action，但最后state选择mirrored，进行镜像。
好了，我们已经完成了第一步，另外还要让僵尸“自己”转身。我们先点击界面任意处添加一个sprite，不用任何图片，填上你喜欢的颜色，作为界面边界。
建议创建sprite时命一个名字，例如“leftBorder”。选择油漆桶工具，涂上喜欢的颜色：
拖动调整其大小，放置在界面左边（不要放在舞台内），作为左边的边界。同样的操作新创建一个sprite，命名为rightBorder，作为右边的边界。
之后，在代码区内，点击Add event，新增一条leftBorder的事件：
选择On collisionwith another object，意为碰触到某个其他物件。
然后就是选择碰触的目标物件，当然就是僵尸啦。
然后，在这条事件后，点击Add action，创建对应的执行事件。
由于之前的准备工作做得很充分，所以我们只要设置僵尸的局部变量direction为“right”即可。（撞到左边的墙后当然是继续往右走啦。）
将变量设为“right”（注意一定不能忘了引号）。
同样的操作，将rightBorder的事件也创建起来，注意direction为“left”。
完整之后，按F5预览，僵尸能够正常行走了，而且走到边界会自动转身徘徊了！
先把击中效果的动画加进来，双击舞台创建Sprite，命名为explosion。
设置动画参数，speed设为15，注意loop要保持NO，因为此动画只播放一次，不需要循环。
然后代码内，增加击中相关的事件。Add event，选择豌豆子弹，选择上一节新接触到的On collision withanother object事件，目标设置为僵尸：
点击Addaction，继续添加执行事件。选择执行豌豆的事件，spawn another object事件
选择目标为击中动画explosion，默认layer1，锚点0
在下面还要继续添加一个action：
依然是豌豆的事件，选择Destroy。因为子弹击中敌人之后，就“打到肉里面”了，所以要设置为击中后消失。
还有一条重要的代码，将explosion动画清理掉，不然随着击中次数越多，游戏会变得越来越卡。
新增一条事件Addevent，选中explosion，选中On finished（在Animations下）
填入动画的名称，由于我们用的是默认名，所以填入“Default”（注意引号）。
后面继续Addaction，增加explosion事件，选择destory。
按F5试试吧，点击屏幕射击，子弹飞到僵尸身上，很有打击感吧。
3 设置多个敌人
要放置多个僵尸，就要用到系统的刷新机制，新增一条事件Add event，选择system（系统），选择Every X seconds事件。
设置每隔多少秒触发，1.0表示1秒。当然也可以使用ramdom函数，每隔1-3秒进行，不定时刷新更具趣味性。
继续添加Add action，选择system，添加Create object
创建的目标当然就是僵尸，Layer是1，另外要注意的是坐标（X，Y），表示的是在屏幕左边界外面刷新（凭空出现比较违和），随机位置（不要设置太高僵尸脑袋在外面，或位置太低豌豆射手都打不到了）。
同样操作，再创建一条同样的事件，只是坐标X轴改为500，是在屏幕的右边界外。这样做有个好处，僵尸是左边右边都有出，而不是单单从左边出来，略显单调。
按F5查看效果，发现一会儿就满屏幕僵尸了
拍脑袋定一下，僵尸的血量为15，豌豆的攻击力为2-5。
点选僵尸，B区点击Instance variables，增加一个局部变量HP，类型为Number，数值为15。
另外，在子弹击中僵尸的事件下，再添加一个事件，用于削减僵尸的HP。
选中僵尸，选择subtractfrom（减少局部变量的数值）
设置减少的量为随机2-5.
然后需要设定僵尸的血量小于或等于0的事件（当然是死亡啦）。
在这之前，我们要先把僵尸死亡的动画加进来。双击舞台添加Sprite，导入dead文件夹的素材，步骤参考11节 设置敌人部分的内容（别忘了设置锚点）。
设置动画参数，Speed设为10，loop设为NO（默认）。设置好后将其拖出舞台（别让玩家看到）。
新增事件Addevent，选中僵尸：
再选择Compareinstance variable，监控局部变量数值：
设置当HP的数值小于或等于0时，执行命令：（注意Instance variable对应的是HP）
继续在此事件后添加执行事件Add action。选中僵尸，选择spawn another object事件，目标为僵尸死亡的动画，Layout为1，锚点为0。
跟着下方再添加一条事件，将死亡后的僵尸清除掉Destory。
就如同13节子弹击中效果 中讲到的，我们要将播放结束的僵尸死亡动画清除掉，所以我们要添加类似的事件。
同样，选中僵尸死亡动画，选中On finished（在Animations下），然后让其Destroy掉。
就这样就OK了吗，还不对，因为僵尸还有向左（也就是mirrored状态），所以，对应的死亡动画也要mirrored。
首先我们创建一条和10号代码一样的一条代码（用复制粘贴大法）。
右键点击事件条件，选择Add，选择Addanother condition。这里有点类似12节设置左右移动中的sub-event。
这里我们添加的，叫复合条件，也就是说，需要两条条件同时满足，才会执行后面的事件。
我们创建的复合条件就是，当僵尸处于mirrored状态下，执行事件。
大家可以看到，复合条件创建好后的样子
之后继续添加执行事件Add action，选择僵尸死亡动画，然后将其镜像（使用set mirrored）。
最后，最重要的一点，将刚刚创建的12号代码拖拽放在原来的代码前面！因为当前代码的条件比之前的代码条件苛刻，如果放在后面的话，会造成这条代码永远不会执行！
好了，按F5试玩，点击屏幕发射子弹，可以正常击杀僵尸，已经基本是个可玩的游戏了。
游戏就这么茫无目的地打着未免有些单调，所以我们要设置一个记分系统。有三个数据要实时显示：1 杀死的僵尸个数2 豌豆射手开炮次数 3 游戏时间。
首先我们要再建立一个图层，用于放置UI相关的内容，D区Layers里面点击加号添加：
选中layers 2，拖入三张图片kills.png、times.png、bean.png（注意和之前用过的不一样），作为记分数字栏的图标，将其放在合适的位置。
我们可以发现，将图片直接拖入，系统会自动将其创建为Sprite，注意要在Layer 2 图层下（后面所有涉及UI的都要放在Layer 2下，否则会图层错误）
然后双击舞台，添加插件textbox，同样的操作创建三个，分别命名为kills_text、times_text、bean_text。
调整大小至合适位置，并放置在相应的图标旁边（用于显示分数数值）。
选中文本框，在B区进行设置，Placeholder里面分别设置文字为kills: 、beans: 、time:
要记得三个文本框的名字，之后代码中需要用到：
转到代码部分，右键点击任意空白处，选择Add global variable，创建全局变量，用于存储杀死的僵尸数、打出的豌豆数、游戏时间（秒）
自己命名（任意文本，自己能看懂就行），保证类型是number就可以，怕忘记可以在Description里面写上注释（支持中文）
三个全局变量建好了，置顶显示在代码窗口中：
首先，将僵尸死亡的计数加上去。在僵尸死亡动画结束的代码下增加一条：
选择system事件，选择Add to，增加变量值
选择Variable变量名为kills，value变量值为1，也就是僵尸死亡1只，分数加1。
然后要将这个变量值显示出来，新增事件Add event，选择system系统事件。
选择Every tick，我们在第5节逻辑代码 中介绍过tick的概念，由于分数的变化每时每刻都有可能变化，所以需要系统对其进行每时每刻的更新。
继续添加action，选择文本框kills_text。
选择set text事件，设置文本内容。
填入文本内容，"Kills: "&kills，前面引号内的就是文本，&是连接符号，kills是你之前设置好的变量名（如果之前已经设好了的话，系统会自动提示，很方便）
同样的操作，在后面继续增加times_text、bean_text的实时更新。
在touch事件下增加纪录子弹发射的相关代码：
此时可以按F5试试，看看豌豆计数和僵尸死亡计数是否正常计算。
不过大家可能会发现，一开始什么都没打，击杀次数就自动变成1了。那是因为我们放置在舞台外面的死亡动画播放结束后增加的，解决方式很简单，给死亡动画加一个DestroyOutsideLayout的behavior，这样在游戏一开始屏幕外的死亡动画就被清除了，也就没有碰触到加分事件了。
我们先设定一局游戏时间为30秒，游戏结束后弹出结算框显示分数，并可以再次一局游戏。
首先把结算框面板score.png加入进来，然后添加text插件，命名为score_num
在B区设置text的属性，text设为000（这个任意），Initialvisibility设为Invisible（不可见，记得同样把结算框面板score也设为不可见），字号为24，颜色白色。
将其放置在合适的位置，作为结算框面板的数字。
最后，将restart.png重新开始按钮，放入，也设为invisible，将其放在合适的位置。
将全局变量，将times设置为30。
新建一个事件Add event，选择system系统事件，选择Evey X seconds，X设置为0.01。
点击Add ation，选择system系统事件，选择subtract from，数值设置为0.01。
再添加一条时间，用于检测时间是否走完。添加system系统事件，选择compare variable，variable变量名选择times，小于或等于0。
接着Add action，选择score面板，选择set visible，设置为visible（可见）。
同样的操作，将score_num、restart都设为可见。
最后很重要的，将击杀的分数显示在面板上，找到之前写的Every tick的代码，下方添加一条，选择score_num，选择set text，值为全局变量kills。
好了，按F5我们试试吧，系统自动倒计时30秒，结束后弹出结算框。呃……好像不对啊，这个时候怎么还能打？游戏应该结束了才对啊。我们需要设置一个游戏开始结束的“开关”才行，下一节继续讲。
我们先创建一个全局变量switch，作为开关，类型为number，数值为1，0表示关闭，1表示开始。（最好是写上注释）
当switch为关时，僵尸应该不能继续刷新了、豌豆不能继续发子弹，游戏时间不能减少。我们可以用到之前学到的“复合条件”，将这些相关的代码位置加上限制。
豌豆发射子弹部分：
僵尸刷新部分：
游戏时间减少部分：
另外，游戏结束的标志——时间小于或等于0的部分，要添加上相关的收尾工作，首先要用destory将场上的所有僵尸清理干净，另外将switch设为0。
现在可以按F5试试，时间走完之后游戏是否结束。
测试成功后，还要添加重新开始游戏的相关代码，基本上和游戏结束的“反”过来。
新增事件Add event，选择touch，选择on tap object，目标为restart按钮。
后面接着Add action，设置score、score_num、restart为invisible（不可见），将switch设为1（打开开关），还有一个 新增的将全局变量times重新恢复为30秒，还有相关的计数kills、beans也都要设为0。
至此，本教程的所有内容都已结束。大家可以导出为html文件，将其部署在网站上，将链接发给朋友，打开就能玩（微信内也可以打开哦）。个人版提供了多种导出方式，包括iOS和安卓。也可以去官方网站（scirra），将游戏部署在官网的应用商店里（速度较慢，需翻墙）。
如果想深入研究，可以去GAD官网向各位高手们咨询，还有一些高手自制的很多很给力的插件，前文也说到了，当你想实现某种效果不知道如何下手时，很可能一个插件就搞定了。
祝大家都能做出自己想要的游戏。
添加小编微信，发送“策划”
即可直接加入GAD行业精英策划汪聚集地
获取行业干货资讯，观看大牛分享直播
↓长按添加小编GAD-沫沫↓