Werewolf Mini‑Program Project Overview and Implementation Guide

The Werewolf project is a multiplayer strategy board game implemented as a WeChat mini‑program, supporting 4‑18 players with roles such as Werewolf, Seer, Villager, Witch, Hunter, Idiot, Guard, and Knight.

The home page allows users to select the number of players; based on the chosen number, the system allocates appropriate role counts, and when the player count reaches 11, the Cupid role appears.

Below is the UI code for the home page (index.wxml):

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

The game page lets each player draw a role card before entering the main gameplay. The role selection UI is implemented with a swiper component to browse available roles.

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

Special roles are illustrated with animated GIFs: the Witch possesses two potions (one for saving, one for killing), and the Hunter can eliminate another player during each round.

All screenshots and GIFs demonstrate the UI flow, day/night transitions, and role‑specific actions within the game.