Build a Werewolf Party Game Mini‑Program: Full Frontend Guide with Code

Project Showcase

Werewolf is a multiplayer tabletop strategy game that relies on verbal description, debate, and deduction. It supports 4‑18 players and includes roles such as Werewolf, Seer, Villager, Witch, Hunter, Idiot, Guard, Knight, etc.

Various player avatars are displayed, and role functions are illustrated.

Home Page

The home page lets users choose the number of players, which determines the distribution of roles. Permanent roles include Werewolf, Villager, Seer, Witch, and Hunter; Cupid appears when the player count reaches 11.

UI code (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>

Resulting UI screenshot:

Game Page

Before entering the game, each player draws a role card, then proceeds to the main game screen. Role selection UI code:

<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>
      <button type="primary" bindtap="chooseRole">选择这张牌</button>
    </view>
  </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>
      <button type="primary" bindtap="setReady">准备好了</button>
    </view>
  </block>
</view>

Gameplay screenshot:

Special Roles

Beyond the basic Villager and Werewolf, special roles have unique abilities. The Witch possesses two potions—one to heal and one to kill. The Hunter can eliminate a player each round.

Conclusion

This concludes the overview of the Werewolf mini‑program. The full source code is available for download.