六月已经过了三分之一，“粽子节”也马上要到了，每当这时候，又到新媒体运营人和设计师头秃的时刻，在传统的节日里，如何把传统的节日使用互联网元素表现，让更多的年轻人能够参与进来，H5这个形式或许是个不错的选择，而小游戏又容易让用户参与与分享。
在端午节做互动小游戏营销制作，其实有一个万能的制作思路，不光是在端午节，更是可几乎以应用在所有的节日上面上的形式。
今天我们介绍这样一款零代码的H5平台，市场上零代码的第三方平台很多，但是像意派Epub360这样专业级的工具，能够灵活创作一个场景，并且上手操作门槛极低的还是很少的。
在正式开始前，我们先来介绍一下作品的主要的功能组件和设置方法。
主要组件：碰撞侦测
作用：多个元素之间发生接触时，可以触发一些事件，例如计数或播放动画
组件效果
应用场景
碰撞检测组件，可以侦测组件的位置变化，当不同组件之间碰撞时，利用触发器触发各种动作，常用于H5小游戏。
素材准备
文末附件下载素材，非商用，仅供学习使用。
碰撞检测的几个概念
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.epub360.com
21epub视效艺术组创意出品，转载请注明来源：意派·Epub360-专业的H5页面制作工具
Epub360，是一个专业的H5页面制作工具及企业服务平台，提供工具技术支持、工具教学培训、企业H5互动营销解决方案等服务。