翻卡游戲風靡于頁游與手游中的小游戲。具有玩法簡單、易于實現(xiàn)的特點，在活動中經(jīng)常使用。本次教程將帶大家快速制作。

成品效果圖：

原型分析

流程分析：

卡牌獎品總覽->點擊按鈕->卡牌翻到背面、洗牌->花費代價點擊卡片/放棄本局游戲；

元素分析：

底層背景圖片：作者自己用矩形畫的

待翻卡牌：具有正面和反面2種狀態(tài)，采用動態(tài)面板切換。作者是用橢圓形配簡單文字畫的。

花費代價提示：用2個標簽，一個寫不變的信息，一個寫隨時變的花費代價信息。

重新開局按鈕：點擊后所有卡牌為背面、洗牌，代價回歸初始狀態(tài)。

退出按鈕(此教程省略)：退出返回到指定頁面

實現(xiàn)步驟

元件的層次

背景圖片放在底層、卡牌放在頂層。通過”右擊圖片->順序”設(shè)置。

花費值變量設(shè)置

菜單欄 ” 項目->全局變量-> +”添加變量，變量名字和默認值自定，作者設(shè)為CardPrice和0

拖兩個標簽，一個寫固定說明性文字如“下個花費”，一個起名為“價格”并寫上初始文字。

單個卡牌設(shè)置

拖出一個動態(tài)面板，調(diào)好尺寸，起好名字如“獎品1”，雙擊后進入“面板狀態(tài)管理”里雙擊state1編輯狀態(tài)。Tip:單擊選中state1后再單擊可改名

• 正面：把正面圖片放在動態(tài)面板里。作者是拖了個橢圓配上文字
• 背面：推薦直接選中state1后復(fù)制狀態(tài)，然后改成另一張圖片。作者是改了下圓的填充色和文字。

為背面圖片添加鼠標單擊時用例：

面板狀態(tài)更改：

價格變量更改：作者改為”[[CardPrice+100]]”

“價格”標簽文字修改：

之后可在主頁面將該動態(tài)面板復(fù)制數(shù)個，并為每個獎品進行個性化調(diào)整。

翻面洗牌設(shè)置

變量和價格變回初始值：過程略。

翻面：為重來按鈕添加用例。將所有卡牌的面板狀態(tài)設(shè)置為背面。

洗牌：

可看作牌之間移動交換，耗費時間自定。具體交換規(guī)則點擊每一步的”fx”詳細設(shè)定每一步x,y坐標

fx詳細設(shè)置：添加局部變量以指定交換的卡牌元件，此處命名為”LVAR1″，

x為”[[LVAR1.left]]”,y為”[[LVAR1.top]]”。x、y中需各自添加局部變量。

X：

Y:

之后每一步的移動仿照此步設(shè)置好對應(yīng)x，y值即可。

本文由 @YoSha 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。