狼人殺微信小程序項目實例（附源碼）
一、項目展示
狼人殺是一款多人參與的，通過語言描述推動、較量口才和分析判斷能力的策略類桌面游戲
玩家人數(shù)適于4-18人參與
主要角色有：狼人 、預(yù)言家 、平民 、女巫 、獵人 、白癡 、守衛(wèi) 、騎士等
同時還有眾多的玩家形象
各角色的職能介紹
設(shè)置游戲人數(shù)和選擇對應(yīng)角色
開啟游戲環(huán)節(jié)
二、首頁
首頁是選擇游戲人數(shù)的頁面
不同人數(shù)會分配不同的角色數(shù)量
常駐角色有狼人、村民、預(yù)言家、女巫、獵人
當(dāng)游戲人數(shù)達(dá)到11人時將出現(xiàn)丘比特
UI代碼如下：
"container">
??"setting">
????"logo"?src="{{logo}}">
????"">
??????"{{array}}"?value="{{index}}"?bindchange="gameNumberChange">
????????"picker">選擇游戲人數(shù):
????????if="{{array[index]?>{{"?"?+?array[index]}}
????????else >{{array[index]}}
??????
??????"role-config"?wx:for="{{config}}">
????????"role-logo"?src="{{item.role.logo}}">
????????{{item.role.name}}?x?{{item.count}}
??????
????
??
??type="primary"?bindtap="startGame">開始游戲
效果如下：
三、游戲頁
在進(jìn)入游戲界面之前，玩家需要抽取自己對應(yīng)的角色牌
之后才是跳轉(zhuǎn)到游戲的界面
角色選取界面部分代碼如下：
"container">
????if="{{isChoosing}}">
????????"inner-container">
????????????"swiper-indicator">{{swiperCurrent}}/{{roles.length}}
????????????"swiperCurrentChange">
????????????????for="{{roles}}">
????????????????????
????????????????????????"item-container">
????????????????????????????"side-space">
????????????????????????????"{{cover}}"?class="cover">
????????????????????????????"side-space">
????????????????????????
????????????????????
????????????????
????????????
????????
????????type="primary"?bindtap="chooseRole">選擇這張牌
????
????else>
????????"inner-container">
????????????"role-logo-container">
????????????????"{{choosedRole.logo}}"?class="role-logo"?animation="{{roleLogoAnimationData}}">
????????????
????????????"role-name">你的角色是:?{{choosedRole.name}}
????????????"role-description">{{choosedRole.description}}
????????
????????type="primary"?bindtap="setReady">準(zhǔn)備好了
????
效果展示：
進(jìn)入游戲后，有多個白天黑夜的轉(zhuǎn)換環(huán)節(jié)，狼人可以在黑夜中淘汰選手
效果如下：
四、特殊角色
上面的效果是普通村民和狼人的
其中，神職人員有著不同的技能
首先是女巫
女巫有兩瓶藥，一瓶救命一瓶殺人
另外是獵人
獵人在每輪可以獵殺掉一名玩家
下載方式
關(guān)注公眾號后臺轉(zhuǎn)發(fā)朋友圈截圖回復(fù)666即可獲得
相關(guān)閱讀：
評論
圖片
表情