一、项目展示

狼人杀是一款多人参与的，通过语言描述推动、较量口才和分析判断能力的策略类桌面游戏

玩家人数适于4-18人参与

主要角色有：狼人 、预言家 、平民 、女巫 、猎人 、白痴 、守卫 、骑士等

同时还有众多的玩家形象

各角色的职能介绍

设置游戏人数和选择对应角色

开启游戏环节

二、首页

首页是选择游戏人数的页面

不同人数会分配不同的角色数量

常驻角色有狼人、村民、预言家、女巫、猎人

当游戏人数达到11人时将出现丘比特

UI代码如下：

<viewclass="container"><viewclass="setting"><imageclass="logo"src="{{logo}}">image><formaction=""><pickerrange="{{array}}"value="{{index}}"bindchange="gameNumberChange"><textclass="picker">选择游戏人数:text><textwx:if="{{array[index] < 10}}">{{" "   array[index]}}text><textwx:else>{{array[index]}}text>picker><viewclass="role-config"wx:for="{{config}}"><imageclass="role-logo"src="{{item.role.logo}}">image>{{item.role.name}} x {{item.count}}view>form>view><buttontype="primary"bindtap="startGame">开始游戏button>view>

效果如下：

三、游戏页

在进入游戏界面之前，玩家需要抽取自己对应的角色牌

之后才是跳转到游戏的界面

角色选取界面部分代码如下：

class="container"><blockwx:if="{{isChoosing}}"><viewclass="inner-container"><viewclass="swiper-indicator">{{swiperCurrent}}/{{roles.length}}view><swiperbindchange="swiperCurrentChange"><blockwx:for="{{roles}}"><swiper-item><viewclass="item-container"><viewclass="side-space">view><imagesrc="{{cover}}"class="cover">image><viewclass="side-space">view>view>swiper-item>block>swiper>view><buttontype="primary"bindtap="chooseRole">选择这张牌button>block><blockwx:else><viewclass="inner-container"><viewclass="role-logo-container"><imagesrc="{{choosedRole.logo}}"class="role-logo"animation="{{roleLogoAnimationData}}">image>view><viewclass="role-name">你的角色是: {{choosedRole.name}}view><viewclass="role-description">{{choosedRole.description}}view>view><buttontype="primary"bindtap="setReady">准备好了button>block>view>

效果展示：

进入游戏后，有多个白天黑夜的转换环节，狼人可以在黑夜中淘汰选手

效果如下：

四、特殊角色

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

其中，神职人员有着不同的技能

首先是女巫

女巫有两瓶药，一瓶救命一瓶杀人

另外是猎人

猎人在每轮可以猎杀掉一名玩家

文末

具体的介绍就到这里了，是不是很有趣呢

相关代码我已经上传到百度云，大家自行下载即可

想要源码，请记得关注 转发 私信

私信回复【狼人杀小程序】