零代码怎么制作一个端午节H5小游戏页面?

六月已经过了三分之一,“粽子节”也马上要到了,每当这时候,又到新媒体运营人和设计师头秃的时刻,在传统的节日里,如何把传统的节日使用互联网元素表现,让更多的年轻人能够参与进来,H5这个形式或许是个不错的选择,而小游戏又容易让用户参与与分享。

 

在端午节做互动小游戏营销制作,其实有一个万能的制作思路,不光是在端午节,更是可几乎以应用在所有的节日上面上的形式。

今天我们介绍这样一款零代码的H5平台,市场上零代码的第三方平台很多,但是像betway备用网址网址Epub360这样专业级的工具,能够灵活创作一个场景,并且上手操作门槛极低的还是很少的。

 

在正式开始前,我们先来介绍一下作品的主要的功能组件和设置方法。

 

主要组件:碰撞侦测

作用:多个元素之间发生接触时,可以触发一些事件,例如计数或播放动画

 

 

 

组件效果

 

应用场景

碰撞检测组件,可以侦测组件的位置变化,当不同组件之间碰撞时,利用触发器触发各种动作,常用于H5小游戏。

《flappy fish》

《[端午游戏2]兄弟,要飙船么》

 

素材准备

文末附件下载素材,非商用,仅供学习使用。

 

碰撞检测的几个概念

1.碰撞目标元素/碰撞元素

被用来设定为可以触发碰撞事件的两组组件,针对任意一个碰撞检测组件,都需要设置这么两组对象。这两组对象,可以各一个,也可以各多个。

2.碰撞时触发器

用于设定当发生碰撞时,可以触发到动作

 

组件用法

基本用法

1.点击操作页面上方的菜单栏,点击高级组件,在交互组件下选择碰撞检测组件

 

 

2.碰撞检测对象设定。针对一个“碰撞检测”组件,设定方法如下图:PS作两张图,命名为小球和碰撞方块,并导入到画布中:

 

 

3.设置碰撞物小球:点击碰撞组件,点击右侧添加按钮,勾选小球,点击确认;

 

 

4.同理设置碰撞目标方块:点击碰撞组件,点击右侧添加按钮,勾选方块,点击确认;

 

 

5.设置小球飞入动画:给小球添加飞入动画,设置重复次数为一直播放,设置动画效果为Expo.easeIn,点击确认;

 

 

6.同理设置小球飞出动画:给小球添加飞出动画,设置出现方式为和上一个一起开始,设置动画效果为Expo.easeOut,勾选等待触发,设置动画结束时触发刚刚设置的小球飞入动画,点击确认;

 

 

7.选中碰撞检测的触发器,触发时播放小球飞出的动画。

 

8.将小球移动到画布的的最下方;

 

 

9.设置碰撞方块可移动:点击碰撞方块,勾选可拖动,设置拖拽限制为水平;

 

 

10.预览效果。这时候我们点击左上角的预览按钮,选择预览当前页,在小球一直掉落的时候左右拖拽方块,看看小球与方块碰撞后的效果吧。

 

 

 

关于组件的使用我们理解清楚之后我们就可以做端午节,下面是游戏部分的设置步骤:

 

1.我们把元素添加到画布上,摆放好,添加计时器,给“粽子”元素添加飞出动画,顶部,等待触发

 

 

 

2.给每个元素添加飞入动画,并把每一个飞入动画放在动画组里,设置与上一个一起开始

 

 

3.给每个飞出动画,动画结束时触发飞入的动画组

 

 

4.添加碰撞组件,绑定碰撞元素和目标元素

 

 

5.在碰撞侦测组件碰撞时,触发播放飞出动画

 

 

6.在碰撞侦测组件碰撞时,参数变量+1,就是游戏得分加1

 

 

学会了这个教程,我们不光做端午节的H5游戏,甚至所有的节日的H5小游戏了,只要是碰撞类型的小游戏,比如端午节接粽子,中秋节接月饼,618购物节接礼品,春节接红包……本期教程就到这里啦,下期我们再见~

 

 

Epub360 H5页面制作地址:www.m1w8t.com

21epub视效艺术组创意出品,转载请注明来源:betway备用网址网址·Epub360-专业的H5页面制作工具

Epub360,是一个专业的H5页面制作工具及企业服务平台,提供工具技术支持、工具教学培训、企业H5互动营销解决方案等服务。

 

10

相关文章: