Teach you to quickly develop a werewolf killing wechat applet (with source code)

Click on the official account , utilize Fragment time to learn

One 、 Project presentation

Werewolf kill is a multiplayer , Promote... Through language description 、 Strategic desktop games that compete for eloquence and analytical judgment

The number of players is suitable for 4-18 Ginseng and

The main characters are ： werewolf 、 prophet 、 Civilian 、 witch 、 The hunter 、 Idiot 、 The guards 、 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 characters

Start the game

Two 、 home page

The home page is the page for selecting the number of games

Different numbers of people will be assigned different numbers of roles

Resident characters have werewolves 、 villager 、 prophet 、 witch 、 The hunter

When the number of players reaches 11 There will be Cupid

UI The 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"> Select the number of games :</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"> Start the game </button>
</view>

The effect is as follows ：

3、 ... and 、 Game page

Before entering the game interface , Players need to draw their own character cards

Then jump to the game interface

Part of the code of the role 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"> Choose this card </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"> Your role is : {
    {choosedRole.name}}</view>
            <view class="role-description">{
    {choosedRole.description}}</view>
        </view>
        <button type="primary" bindtap="setReady"> Be on it </button>
    </block>
</view>

Effect display ：

After entering the game , There are multiple conversion links between day and night , Werewolves can knock out players in the dark

The effect is as follows ：

Four 、 Special characters

The above effect is that of ordinary villagers and werewolves

among , The clergy have different skills

The first is the witch

The witch has two bottles of Medicine , A bottle of life-saving, a bottle of murder

The other is the Hunter

Hunters can kill one player in each round

Last

Download link ( need CSDN Integral )：

https://download.csdn.net/download/ws15168689087/83644749

source ：https://blog.csdn.net/ws15168689087

recommend ：

Main stream Java Advanced technology （ Learning material sharing ）

PS： Because the official account platform changed the push rules. , If you don't want to miss the content , Remember to click after reading “ Looking at ”, Add one “ Star standard ”, In this way, each new article push will appear in your subscription list for the first time . spot “ Looking at ” Support us ！