Wechat Mini Program Project Example - Werewolf Kill
Article directory
See the project code at the bottom of the text, like and follow for surprises
1. Project display
Werewolf is a multi-player strategy board game that promotes, competes eloquence and analyzes and judges ability through language description
The number of players is suitable for 4-18 people to participate
The main characters are: werewolf, prophet, commoner, witch, hunter, idiot, guard, knight, etc.
At the same time, there are many player images
Introduction to the functions of each role
Set the number of players and select the corresponding role
Start the game
2. Home
The home page is a page for selecting the number of players.
Different numbers of players will be assigned different numbers of characters.
Resident characters include werewolves, villagers, prophets, witches, and hunters.
When the number of players reaches 11, Cupid will appear
The UI code is as follows:
<!--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 effect is as follows:
3. Game page
Before entering the game interface, players need to draw their corresponding character cards
before jumping to the game interface
The code for the character selection interface is as follows:
<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>
Show results:
After entering the game, there are multiple day and night transitions. Werewolves can eliminate players in the dark. The
effect is as follows:
4. Special roles
The above effects are for ordinary villagers and werewolves.
Among them, clerics have different skills.
The first is the witch . The
witch has two bottles of medicine, one for life and one for killing.
The other is the hunter . The
hunter can kill one player per round.
End of sentence
The specific introduction is here, isn't it very interesting?
I have uploaded the relevant code, remember to like, follow and bookmark
