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

1. 初始金幣為100，每次抽獎(jiǎng)花費(fèi)10金幣
2. 輸入1位數(shù)字點(diǎn)擊抽獎(jiǎng)，如有1個(gè)開獎(jiǎng)數(shù)字與輸入數(shù)字相同，獎(jiǎng)勵(lì)20金幣，兩個(gè)相同獎(jiǎng)勵(lì)40金幣，3個(gè)相同獎(jiǎng)勵(lì)60金幣
3. 金幣為0，則無抽獎(jiǎng)機(jī)會

原型效果：點(diǎn)我抽獎(jiǎng)

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

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

設(shè)置全局變量

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

添加元件及命名

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

2.添加點(diǎn)擊事件

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

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

設(shè)置條件為：

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

用例2：中獎(jiǎng)

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

以第一個(gè)圓的中獎(jiǎng)事件為例：

設(shè)置條件

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

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

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

用例3：沒中獎(jiǎng)

設(shè)置條件

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

用例4：金幣用完

設(shè)置條件

1. 設(shè)置tishi文字為“嗚嗚嗚~金幣用完啦~”
2. 禁用shuru文本框，重要?。ú蝗唤饚艦?時(shí)可修改輸入框與下方數(shù)字相同，繼續(xù)游戲）

用例5：輸入框?yàn)榭?/strong>

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

3.補(bǔ)充說明

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

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