微信小程序實現狼人殺小游戲的示例詳解

第微信小程序實現狼人殺小游戲的示例詳解目錄一、項目展示二、首頁三、游戲頁四、特殊角色五、源碼

一、項目展示

狼人殺是一款多人參與的，通過語言描述推動、較量口才和分析判斷能力的策略類桌面游戲

玩家人數適于4-18人參與

主要角色有：狼人、預言家、平民、女巫、獵人、白癡、守衛(wèi)、騎士等

同時還有眾多的玩家形象

各角色的職能介紹

設置游戲人數和選擇對應角色

開啟游戲環(huán)節(jié)

二、首頁

首頁是選擇游戲人數的頁面

不同人數會分配不同的角色數量

常駐角色有狼人、村民、預言家、女巫、獵人

當游戲人數達到11人時將出現丘比特

UI代碼如下：

!--index.wxml--

view

view

imagesrc="{{logo}}"/image

formaction=""

pickerrange="{{array}}"value="{{index}}"bindchange="gameNumberChange"

text選擇游戲人數:/text

textwx:if="{{array[index]10}}"{{""+array[index]}}/text

textwx:else{{array[index]}}/text

/picker

viewwx:for="{{config}}"

imagesrc="{{item.role.logo}}"/image

{{}}x{{item.count}}

/view

/form

/view

buttontype="primary"bindtap="startGame"開始游戲/button

/view

效果如下：

三、游戲頁

在進入游戲界面之前，玩家需要抽取自己對應的角色牌

之后才是跳轉到游戲的界面

角色選取界面部分代碼如下：

view

blockwx:if="{{isChoosing}}"

view

view{{swiperCurrent}}/{{roles.length}}/view

swiperbindchange="swiperCurrentChange"

blockwx:for="{{roles}}"

swiper-item

view

view/view

imagesrc="{{cover}}"/image

view/view

/view

/swiper-item

/block

/swiper

/view

buttontype="primary"bindtap="chooseRole"選擇這張牌/button

/block

blockwx:else

view

view

imagesrc="{{choosedRole.logo}}"animation="{{roleLogoAnimationData}}"/image

/view

view你的角色是:{{choosedR}}/view

view{{choosedRole.description}}/view

/view

buttontype="primary"bindtap="setReady"準備好了/button

/block

/view

效果展示：

進入游戲后，有多個白天黑夜的轉換環(huán)節(jié)，狼人可以在黑夜中淘汰選手

效果如下：

四、特殊角色

上面的效果是普通村民和狼人的

其中，神職人員有著不同的技能

首先是女巫

女巫有兩瓶藥，一瓶救命一瓶