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

成品效果圖：

原型分析

流程分析：

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

元素分析：

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

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

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

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

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

實現步驟

元件的層次

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

花費值變量設置

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

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

單個卡牌設置

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

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

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

面板狀態更改：

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

“價格”標簽文字修改：

之后可在主頁面將該動態面板復制數個，并為每個獎品進行個性化調整。

翻面洗牌設置

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

翻面：為重來按鈕添加用例。將所有卡牌的面板狀態設置為背面。

洗牌：

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

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

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

X：

Y:

之后每一步的移動仿照此步設置好對應x，y值即可。

本文由 @YoSha 原創發布于人人都是產品經理。未經許可，禁止轉載。