h5游戏源码网站|不写代码——教你如何快速制作h5独立小游戏(下篇)

2019-01-01 15:34:41 棋牌游戏资讯 124 views 棋牌游戏资讯
[导读]:本文(《不写代码——教你如何快速制作h5独立小游戏(下篇)》)由来自鄂州的用户投稿,并经由本站(安逸软件)结合主题:h5游戏源码网站,收集整理了众多资料而成。主要记述了僵尸游戏,变量等方面的信息。相信从本文您一定可以获得自己所需要的!

上一篇中,我们制作的html5,最后终于让可爱的小僵尸能缓缓地向右走动了。那在小僵尸能行走后,我们要怎样继续再进一步完善我们的小游戏呢?

1

  设置左右移动

要实现这个目标,我们要实现这两种效果:一,让僵尸“知道”自己现在朝向哪里;二,让僵尸碰到屏幕边界后转身返回。

现在我们要在僵尸身上添加一个变量,标注它现在是“向左”还是“向右”。

选中僵尸,在B区属性内点击Instance variables添加局部变量。

设置Name为direction(当然也可以自己设喜欢的变量名),Type选择Text(文本),Initial value设置为right(当然也可以用符号表示向左或向右,自己看得懂就好)。

h5游戏源码网站|不写代码——教你如何快速制作h5独立小游戏(下篇)

设置好变量之后,僵尸就“知道”自己应该是向左还是向右了,另外还要在代码中添加对僵尸目前状态的判断。

我们要对原有的代码进行修改,右键点击2号代码,选择Add,选择Addsub-event

选择僵尸,选择Compareinstance variable

选择僵尸,选择Compareinstance variable

选择僵尸,选择Compareinstance variable

大家可以看到,系统已经自动检测到局部变量了,大家只需要保证comparison的值是=equal to,value的值是”right”(一定要有英文引号,注意!)。

图片

同样的操作,同样步骤再建立一个sub-event,只是最后的value的值为”left”。 最终的效果为一个一分为二的分支:

h5游戏源码网站|不写代码——教你如何快速制作h5独立小游戏(下篇)

看到这里,一些聪明的朋友就应该能够猜到,我们只要分别在”right”和”left”后面分别对应让僵尸向右走、向左走就可以了。

之前有做好的,将其拉拽到”right”后面即可,然后同样的方式再创建一个,control改成left即可。

图片

光是这样还不够,因为僵尸的动画素材是向右走的,如果向左走的话,就会出现“僵尸版月球漫步”倒着走了,所以我们要在进行一些相关设置。

选择Setmirrored,设置镜像:

选择Setmirrored,设置镜像:

选择Setmirrored,设置镜像:

因为我选择的是在“right”下创建的,所以要选择not mirrored,不进行镜像。

h5游戏源码网站|不写代码——教你如何快速制作h5独立小游戏(下篇)

同样操作,在“left”下创建同样的action,但最后state选择mirrored,进行镜像。

h5游戏源码网站|不写代码——教你如何快速制作h5独立小游戏(下篇)

好了,我们已经完成了第一步,另外还要让僵尸“自己”转身。我们先点击界面任意处添加一个sprite,不用任何图片,填上你喜欢的颜色,作为界面边界。

建议创建sprite时命一个名字,例如“leftBorder”。选择油漆桶工具,涂上喜欢的颜色:

h5游戏源码网站|不写代码——教你如何快速制作h5独立小游戏(下篇)

拖动调整其大小,放置在界面左边(不要放在舞台内),作为左边的边界。同样的操作新创建一个sprite,命名为rightBorder,作为右边的边界。

图片

之后,在代码区内,点击Add event,新增一条leftBorder的事件:

h5游戏源码网站|不写代码——教你如何快速制作h5独立小游戏(下篇)

选择On collisionwith another object,意为碰触到某个其他物件。

然后就是选择碰触的目标物件,当然就是僵尸啦。

然后就是选择碰触的目标物件,当然就是僵尸啦。

然后就是选择碰触的目标物件,当然就是僵尸啦。

然后,在这条事件后,点击Add action,创建对应的执行事件。

由于之前的准备工作做得很充分,所以我们只要设置僵尸的局部变量direction为“right”即可。(撞到左边的墙后当然是继续往右走啦。)

将变量设为“right”(注意一定不能忘了引号)。

同样的操作,将rightBorder的事件也创建起来,注意direction为“left”。

完整之后,按F5预览,僵尸能够正常行走了,而且走到边界会自动转身徘徊了!

2

  子弹击中效果

先把击中效果的动画加进来,双击舞台创建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查看效果,发现一会儿就满屏幕僵尸了

4

  设置数值

拍脑袋定一下,僵尸的血量为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状态下,执行事件。

先选中僵尸

选择is mirrored

大家可以看到,复合条件创建好后的样子

之后继续添加执行事件Add action,选择僵尸死亡动画,然后将其镜像(使用set mirrored)。

最后,最重要的一点,将刚刚创建的12号代码拖拽放在原来的代码前面!因为当前代码的条件比之前的代码条件苛刻,如果放在后面的话,会造成这条代码永远不会执行!

好了,按F5试玩,点击屏幕发射子弹,可以正常击杀僵尸,已经基本是个可玩的游戏了。

5

  设置记分系统

游戏就这么茫无目的地打着未免有些单调,所以我们要设置一个记分系统。有三个数据要实时显示: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,这样在游戏一开始屏幕外的死亡动画就被清除了,也就没有碰触到加分事件了。

6

  设置游戏时间

我们先设定一局游戏时间为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秒,结束后弹出结算框。呃……好像不对啊,这个时候怎么还能打?游戏应该结束了才对啊。我们需要设置一个游戏开始结束的“开关”才行,下一节继续讲。

7

  控制结束和开始

我们先创建一个全局变量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。

8

  结语

至此,本教程的所有内容都已结束。大家可以导出为html文件,将其部署在网站上,将链接发给朋友,打开就能玩(微信内也可以打开哦)。个人版提供了多种导出方式,包括iOS和安卓。也可以去官方网站(scirra),将游戏部署在官网的应用商店里(速度较慢,需翻墙)。

如果想深入研究,可以去GAD官网向各位高手们咨询,还有一些高手自制的很多很给力的插件,前文也说到了,当你想实现某种效果不知道如何下手时,很可能一个插件就搞定了。

祝大家都能做出自己想要的游戏。

h5游戏源码网站视频

200源码网站后台管理上

相关问答

问:h5游戏平台源码哪个可靠

答:游戏平台我真的不得不推荐玩go app给你了,这个平台很好,首先说他里面的游戏很好玩,再一个是新游戏那边都是最早可以下载体验的,还有礼包激活码可以领。


问:h5游戏网上的代码都没有源码

答:源码天堂那里有很多HTML5的源码。


问:我爱h5游戏源码的免费源码都有哪些啊?有好多都没找到在哪

答:贴吧里看见个蛇蛇大作战的是免费的,http://tieba.baidu.com/p/4954128281,网站最近更新的貌似都是免费的。


问:求H5网站互动游戏源码 谢谢

答:灵动h5源码论坛,不知道有没有你需要的~


问:哪里有能下载H5游戏源代码的网站?

答:九秒社区 论坛


问:微信h5小游戏源码怎么上传到微信

答:小游戏源码上传到微信做啥呢?你把小游戏代码 做出来 放在服务器上面 生成游戏链接。将链接放在微信公众号即可。
不是放源代码到微信的。这里面的东西很多的。如果你要――{定做}――微信小游戏的话 可以跟 蓝橙互动 沟通。


问:想做H5游戏,源码有没有卖的,求购

答:现在网上卖源码的很多,建议你购买大公司的产品,这样比较稳妥,我之前定制的溪谷软件的H5游戏,运行就很流畅


问:html5微信小游戏源代码怎么来的?

答:如果你是个人拿来练习或者研究的话,在网上买吧。或者有合适的游戏就直接下载吧,这个h5的东西源代码不好保护想要应该要简单很多。如果你是公司准备做个html5微信游戏,那这样操作就不得行了。只能找专门的微信开发上,比如蓝橙互动定做了。这里面牵涉到一个稳定性问题,找源代码改一般用起来很容易出问题,并且出了问题你还不好修改。定做要方便很多。


问:谁可以搭建游戏H5的

答:搭建游戏其实很简单的 ,首先你需要有域名 服务器,游戏源码
然后下载Xshell 搭建宝塔面板控制环境 记得服务器要用Linux的系统
然后把游戏源码上传到服务器里面 在配置一下 基本就搞定了 ,我没什么时间不然可以教你 ,你加我朋友他是这方面的专家


标签:

下一篇:没有了

发表评论

飞扬雪

网上找,或者找人做,费用还比较高。

2019-01-03 19:53:16
hua

这种源码现在不对外发布的

2019-01-02 09:32:24
天涯

火星玩游戏社区免费玩H5游戏

2019-01-02 01:42:08

发表评论:

PHONE