最近在學Axure，看到一篇關(guān)于數(shù)字抽獎的教程，于是在此基礎(chǔ)上擴展了一些功能，增添了一些游戲元素，游戲規(guī)則如下：

1. 初始金幣為100，每次抽獎花費10金幣
2. 輸入1位數(shù)字點擊抽獎，如有1個開獎數(shù)字與輸入數(shù)字相同，獎勵20金幣，兩個相同獎勵40金幣，3個相同獎勵60金幣
3. 金幣為0，則無抽獎機會

原型效果：點我抽獎

下面簡單介紹一下制作流程：

1.設(shè)置全局變量和添加元件

設(shè)置全局變量

• suijishu：用來記錄保存隨機數(shù)
• jinbi：金幣數(shù)量，初始值100，每次抽獎減10
• cishu：抽獎次數(shù)，初始值0，每次抽獎加1

添加元件及命名

• shuru為單行文本框，設(shè)置最大文字數(shù)為1；
• one、two、three為矩形框調(diào)整為圓形，可根據(jù)自己興趣調(diào)整形狀和填充色，設(shè)置為隱藏，單擊抽獎方可顯示；
• choujiang按鈕下方設(shè)置tishi，用以顯示中獎、沒中獎、金幣用完等信息

2.添加點擊事件

所有的點擊事件都是基于“點擊抽獎”實現(xiàn)，選擇“choujiang”，設(shè)置鼠標單擊時事件

用例1：產(chǎn)生隨機數(shù)

設(shè)置條件為：

1. 顯示one、two、three（之前未隱藏的話不用顯示）
2. 移動第一個圓one，使其產(chǎn)生上下晃動效果
3. 使用random和substring函數(shù)給全局變量suijishu賦值，使其產(chǎn)生0-9的隨機數(shù)，并把數(shù)字賦予第一個圓one
4. 移動第二個圓two，使其產(chǎn)生上下晃動效果（時間比第一個久一些）
5. 用random和substring函數(shù)給全局變量suijishu賦值，使其產(chǎn)生0-9的隨機數(shù)，并把數(shù)字賦予第二個圓two
6. 移動第三個圓three，使其產(chǎn)生上下晃動效果（時間比第二個久一些）
7. 用random和substring函數(shù)給全局變量suijishu賦值，使其產(chǎn)生0-9的隨機數(shù)，并把數(shù)字賦予第三個圓three
8. 設(shè)置變量值jinbi=jinbi-10，cishu=cishu+1
9. 把加減后的變量值賦予元件jinbi和cishu

用例2：中獎

3個圓的中獎事件是平行且獨立的，分別判斷輸入的數(shù)字是否與該圓賦予的隨機數(shù)相同，如果相同，金幣數(shù)加20，可最高累計加60。

以第一個圓的中獎事件為例：

設(shè)置條件

其中[[sr]]為局部變量，元件shuru的文字；[[one]]為局部變量，元件one的文字。

1. 設(shè)置tishi文字為“恭喜您！中獎啦！”
2. 設(shè)置變量值jinbi=jinbi+20
3. 把更新后的jinbi數(shù)值顯示在元件jinbi上
4. 提示文字設(shè)置為800ms自動消失

第二個圓和第三個圓的用例和第一個類似，可直接復(fù)制修改。

用例3：沒中獎

設(shè)置條件

1. 設(shè)置tishi文字為“很遺憾！再來一次！”
2. 左右晃動抽獎按鈕
3. 提示文字設(shè)置為800ms自動消失

用例4：金幣用完

設(shè)置條件

1. 設(shè)置tishi文字為“嗚嗚嗚~金幣用完啦~”
2. 禁用shuru文本框，重要！（不然金幣為0時可修改輸入框與下方數(shù)字相同，繼續(xù)游戲）

用例5：輸入框為空

1. 設(shè)置條件：如果shuru=“”
2. 設(shè)置tishi文字為“請輸入1位數(shù)字！”
3. 左右晃動抽獎按鈕
4. 提示文字設(shè)置為800ms自動消失

3.補充說明

• 上下左右晃動效果純屬XX，如嫌麻煩可忽略之
• 各用例的設(shè)置條件并未詳細說明原因，其實都是在做的過程中填的一個個坑
• 周圍有個小伙伴最多玩到100多次，有人打破記錄嗎？

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