教你快速开发一个 狼人杀微信小程序(附源码)

>>强大,10k+点赞的 SpringBoot 后台管理系统竟然出了详细教程!

点击关注公众号,利用碎片时间学习

一、项目展示

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

玩家人数适于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>

效果展示:

教你快速开发一个 狼人杀微信小程序(附源码)

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

效果如下:

教你快速开发一个 狼人杀微信小程序(附源码)

四、特殊角色

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

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

首先是女巫

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

教你快速开发一个 狼人杀微信小程序(附源码)
另外是猎人

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

教你快速开发一个 狼人杀微信小程序(附源码)

最后

下载链接(需要CSDN的积分):

https://download.csdn.net/download/ws15168689087/83644749

来源:https://blog.csdn.net/ws15168689087


推荐:

主流Java进阶技术(学习资料分享)

教你快速开发一个 狼人杀微信小程序(附源码)
PS:因为公众号平台更改了推送规则,如果不想错过内容,记得读完点一下“在看”,加个“星标”,这样每次新文章推送才会第一时间出现在你的订阅列表里。“在看”支持我们吧!

原文始发于微信公众号(Java笔记虾):教你快速开发一个 狼人杀微信小程序(附源码)