微信小程序项目实例——狼人杀

文章目录

微信小程序项目实例——狼人杀
一、项目展示
二、首页
三、游戏页
四、特殊角色
文末

项目代码见文字底部，点赞关注有惊喜

一、项目展示

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

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

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

同时还有众多的玩家形象

各角色的职能介绍

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

开启游戏环节

二、首页

首页是选择游戏人数的页面
不同人数会分配不同的角色数量
常驻角色有狼人、村民、预言家、女巫、猎人
当游戏人数达到11人时将出现丘比特

UI代码如下：

<!--index.wxml-->
<view class="container"><view class="setting"><image class="logo" src="{{logo}}"></image><form action=""><picker range="{{array}}" value="{{index}}" bindchange="gameNumberChange"><text class="picker">选择游戏人数:</text><text wx:if="{{array[index] < 10}}">{{" " + array[index]}}</text><text wx:else>{{array[index]}}</text></picker><view class="role-config" wx:for="{{config}}"><image class="role-logo" src="{{item.role.logo}}"></image>{{item.role.name}} x {{item.count}}</view></form></view><button type="primary" bindtap="startGame">开始游戏</button>
</view>

效果如下：

三、游戏页

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

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

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

效果展示：

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

四、特殊角色

上面的效果是普通村民和狼人的
其中，神职人员有着不同的技能

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

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

文末

具体的介绍就到这里了，是不是很有趣呢
相关代码我已经上传，记得点赞关注和收藏

点击下载小程序

微信小程序项目实例——狼人杀相关推荐

微信小程序版狼人杀+服务端系列（1）
本系列主要讲利用微信小程序完整实现狼人杀游戏,慢慢跟进关于狼人杀的游戏规则,就懒得赘述了,请自行百度.以下正文开始创建房间以及加入房间创建房间逻辑加入房间逻辑后续更改界面什么创建房间效果图 ...
狼人杀服务器修改,微信小程序版狼人杀+服务端系列（1）
本系列主要讲利用微信小程序完整实现狼人杀游戏,慢慢跟进关于狼人杀的游戏规则,就懒得赘述了,请自行百度.以下正文开始创建房间以及加入房间创建房间逻辑加入房间逻辑后续更改界面什么创建房间效果图 ...
微信小程序项目实例——二维码生成器
微信小程序项目实例--二维码生成器文章目录微信小程序项目实例--二维码生成器一.项目展示二.项目核心代码三.效果展示文末项目代码见文字底部,点赞关注有惊喜一.项目展示项目是一个简单实 ...
微信小程序项目实例——手势解锁
微信小程序项目实例--手势解锁文章目录微信小程序项目实例--手势解锁一.项目展示二.设置手势.手势解锁三.手势重置文末:项目代码项目代码见文字底部一.项目展示这是一款简单实用的手势解 ...
微信小程序项目实例——摇色子
微信小程序项目实例--摇色子文章目录微信小程序项目实例--摇色子一.项目展示二.核心代码三.效果图文末项目代码见文字底部,点赞关注有惊喜一.项目展示摇色子是一款简易的游戏类小程序用 ...
微信小程序项目实例——食堂吃哪个
微信小程序项目实例--食堂吃哪个文章目录微信小程序项目实例--食堂吃哪个一.项目展示二.操作流程和核心代码三.效果展示文末项目代码见文字底部,点赞关注有惊喜一.项目展示这是一款娱乐性 ...
微信小程序项目实例——体质计算器
微信小程序项目实例--体质计算器文章目录微信小程序项目实例--体质计算器一.项目展示二.项目核心代码文末项目代码见文字底部,点赞关注有惊喜一.项目展示体质计算器是一款简单的健康类小程序 ...
微信小程序项目实例——记账本
微信小程序项目实例--记账本文章目录微信小程序项目实例--记账本一.项目展示二.首页三.效果图文末项目代码见文字底部,点赞关注有惊喜一.项目展示这是一款简易的记账本小程序用户可以记 ...
微信小程序项目实例——心情记事本
微信小程序项目实例--心情记事本文章目录微信小程序项目实例--心情记事本一.项目展示二.首页三.效果图文末项目代码见文字底部,点赞关注有惊喜一.项目展示心情记事本是一款可以记录当前心 ...

微信小程序项目实例——狼人杀

微信小程序项目实例——狼人杀

文章目录

一、项目展示

二、首页

三、游戏页

四、特殊角色

文末

微信小程序项目实例——狼人杀相关推荐

最新文章

热门文章