微信小程序实现狼人杀小游戏的示例详解

第微信小程序实现狼人杀小游戏的示例详解目录一、项目展示二、首页三、游戏页四、特殊角色五、源码

一、项目展示

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

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

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

同时还有众多的玩家形象

各角色的职能介绍

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

开启游戏环节

二、首页

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

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

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

当游戏人数达到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

效果展示：

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

效果如下：

四、特殊角色

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

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

首先是女巫

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