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

Posted 2022-03-11 失散多年的哥哥

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了微信小程序项目实例——狼人杀相关的知识，希望对你有一定的参考价值。

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

文章目录

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

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

一、项目展示

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

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