Werewolf Game Mini‑Program Project Overview and Implementation Guide

1. Project Overview

Werewolf is a multiplayer strategy tabletop game that emphasizes oral description, rhetoric, and analytical judgment. It supports 4‑18 players and includes roles such as Werewolf, Seer, Villager, Witch, Hunter, Idiot, Guard, Knight, etc. The article showcases the overall UI layout and role illustrations.

2. Home Page

The home page allows users to select the number of participants, automatically assigning role quantities. Persistent roles include Werewolf, Villager, Seer, Witch, and Hunter; Cupid appears when the player count reaches 11. The UI code for this page is provided below.

<!--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 resulting interface is displayed in the accompanying screenshot.

3. Game Page

Before entering the main game screen, each player draws a role card. The role‑selection interface code is shown below, followed by the gameplay screen where day/night cycles occur and Werewolves eliminate players at night.

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

Animated GIFs illustrate the role‑selection flow and the day/night transition effects.

4. Special Roles

The article also explains special roles such as the Witch, who possesses a healing potion and a poison, and the Hunter, who can eliminate one player each round. Corresponding animation screenshots demonstrate these abilities.

5. Conclusion

The tutorial concludes with a link to the full source code hosted on Baidu Cloud for readers to download and explore further.