零代碼怎么制作一個端午節H5小游戲頁面?

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

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

 

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

今天我們介紹這樣一款零代碼的H5平臺,市場上零代碼的第三方平臺很多,但是像意派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.17wanda.com

21epub視效藝術組創意出品,轉載請注明來源:意派·Epub360-專業的H5頁面制作工具

Epub360,是一個專業的H5頁面制作工具及企業服務平臺,提供工具技術支持、工具教學培訓、企業H5互動營銷解決方案等服務。

 

10

国语小鬼特种兵