六月已經(jīng)過了三分之一，“粽子節(jié)”也馬上要到了，每當(dāng)這時候，又到新媒體運營人和設(shè)計師頭禿的時刻，在傳統(tǒng)的節(jié)日里，如何把傳統(tǒng)的節(jié)日使用互聯(lián)網(wǎng)元素表現(xiàn)，讓更多的年輕人能夠參與進來，H5這個形式或許是個不錯的選擇，而小游戲又容易讓用戶參與與分享。

 

在端午節(jié)做互動小游戲營銷制作，其實有一個萬能的制作思路，不光是在端午節(jié)，更是可幾乎以應(yīng)用在所有的節(jié)日上面上的形式。

今天我們介紹這樣一款零代碼的H5平臺，市場上零代碼的第三方平臺很多，但是像意派Epub360這樣專業(yè)級的工具，能夠靈活創(chuàng)作一個場景，并且上手操作門檻極低的還是很少的。

 

在正式開始前，我們先來介紹一下作品的主要的功能組件和設(shè)置方法。

 

主要組件：碰撞偵測

作用：多個元素之間發(fā)生接觸時，可以觸發(fā)一些事件，例如計數(shù)或播放動畫

效果如下：

 

 關(guān)于這個組件詳細使用教程：《碰撞檢測》

 

應(yīng)用場景

碰撞檢測組件，可以偵測組件的位置變化，當(dāng)不同組件之間碰撞時，利用觸發(fā)器觸發(fā)各種動作，常用于H5小游戲。

 

碰撞檢測的幾個概念

1.碰撞目標元素／碰撞元素

被用來設(shè)定為可以觸發(fā)碰撞事件的兩組組件，針對任意一個碰撞檢測組件，都需要設(shè)置這么兩組對象。這兩組對象，可以各一個，也可以各多個。

2.碰撞時觸發(fā)器

用于設(shè)定當(dāng)發(fā)生碰撞時，可以觸發(fā)到動作

 

 本期H5案例如下：

點擊圍觀>>>>>[端午游戲1]抓住這個粽子

 

關(guān)于組件的使用我們理解清楚之后我們就可以做端午節(jié)，下面是游戲部分的設(shè)置步驟：

 

1.我們把元素添加到畫布上，擺放好，添加計時器，給“粽子”元素添加飛出動畫，頂部，等待觸發(fā)

 

             

 

 

2.給每個元素添加飛入動畫，并把每一個飛入動畫放在動畫組里，設(shè)置與上一個一起開始

 

             

 

3.給每個飛出動畫，動畫結(jié)束時觸發(fā)飛入的動畫組

 

             

 

4.添加碰撞組件，綁定碰撞元素和目標元素

 

             

 

5.在碰撞偵測組件碰撞時，觸發(fā)播放飛出動畫

 

             

 

6.在碰撞偵測組件碰撞時，參數(shù)變量+1，就是游戲得分加1

 

             

 

學(xué)會了這個教程，我們不光做端午節(jié)的H5游戲，甚至所有的節(jié)日的H5小游戲了，只要是碰撞類型的小游戲，比如端午節(jié)接粽子，中秋節(jié)接月餅，618購物節(jié)接禮品，春節(jié)接紅包……本期教程就到這里啦，下期我們再見~

 

 

Epub360 H5工具官方地址：www.epub360.com

21epub視效藝術(shù)組創(chuàng)意出品，轉(zhuǎn)載請注明來源：意派·Epub360-專業(yè)的H5頁面制作工具

Epub360，是一個專業(yè)的H5頁面制作工具及企業(yè)服務(wù)平臺，提供工具技術(shù)支持、工具教學(xué)培訓(xùn)、企業(yè)H5互動營銷解決方案等服務(wù)。