微信小程序?qū)崿F(xiàn)狼人殺小游戲的示例詳解

更新時間：2022年03月16日 10:17:09 作者：失散多年的哥哥

狼人殺是一款多人參與的，通過語言描述推動、較量口才和分析判斷能力的策略類桌面游戲。本文將利用小程序?qū)崿F(xiàn)這一游戲，需要的可以參考一下

一、項目展示

狼人殺是一款多人參與的，通過語言描述推動、較量口才和分析判斷能力的策略類桌面游戲

玩家人數(shù)適于4-18人參與

主要角色有：狼人、預言家、平民、女巫、獵人、白癡、守衛(wèi) 、騎士等

同時還有眾多的玩家形象

各角色的職能介紹

設置游戲人數(shù)和選擇對應角色

開啟游戲環(huán)節(jié)

二、首頁

首頁是選擇游戲人數(shù)的頁面

不同人數(shù)會分配不同的角色數(shù)量

常駐角色有狼人、村民、預言家、女巫、獵人

當游戲人數(shù)達到11人時將出現(xiàn)丘比特

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">選擇游戲人數(shù):</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>

效果如下：

三、游戲頁

在進入游戲界面之前，玩家需要抽取自己對應的角色牌

之后才是跳轉(zhuǎn)到游戲的界面

角色選取界面部分代碼如下：

<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>

效果展示：