微信小程序實現(xiàn)狼人殺小游戲的示例詳解

更新時間：2022年03月16日 10:17:09 作者：失散多年的哥哥

狼人殺是一款多人參與的，通過語言描述推動、較量口才和分析判斷能力的策略類桌面游戲。本文將利用小程序實現(xiàn)這一游戲，需要的可以參考一下

一、項目展示

狼人殺是一款多人參與的，通過語言描述推動、較量口才和分析判斷能力的策略類桌面游戲

玩家人數(shù)適于4-18人參與

主要角色有：狼人、預言家、平民、女巫、獵人、白癡、守衛(wèi) 、騎士等

同時還有眾多的玩家形象

各角色的職能介紹

設置游戲人數(shù)和選擇對應角色

開啟游戲環(huán)節(jié)

二、首頁

首頁是選擇游戲人數(shù)的頁面

不同人數(shù)會分配不同的角色數(shù)量

常駐角色有狼人、村民、預言家、女巫、獵人

當游戲人數(shù)達到11人時將出現(xiàn)丘比特

UI代碼如下：

<!--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">選擇游戲人數(shù):</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>

效果如下：

三、游戲頁

在進入游戲界面之前，玩家需要抽取自己對應的角色牌

之后才是跳轉到游戲的界面

角色選取界面部分代碼如下：

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

效果展示：

進入游戲后，有多個白天黑夜的轉換環(huán)節(jié)，狼人可以在黑夜中淘汰選手

效果如下：

四、特殊角色

上面的效果是普通村民和狼人的

其中，神職人員有著不同的技能

首先是女巫

女巫有兩瓶藥，一瓶救命一瓶殺人

另外是獵人

獵人在每輪可以獵殺掉一名玩家

具體的介紹就到這里了，是不是很有趣呢

五、源碼

源碼獲取鏈接提取碼：1234

到此這篇關于微信小程序實現(xiàn)狼人殺小游戲的示例詳解的文章就介紹到這了,更多相關小程序狼人殺內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

JavaScript實現(xiàn)PC端橫向輪播圖
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)PC端橫向輪播圖，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-02-02
下一代Bootstrap的5個特點超酷炫！
下一代Bootstrap的5個特點，超酷炫，你還猶豫什么，趕緊來學習吧
2016-06-06
JS制作可以選項卡切換的年歷
這篇文章主要為大家分享了JS制作類似于選項卡切換的年歷，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-12-12
js操作數(shù)組函數(shù)實例小結
這篇文章主要介紹了js操作數(shù)組函數(shù),實例分析了JavaScript針對數(shù)組刪除指定元素、去重及刪除指定下標元素的實現(xiàn)方法,需要的朋友可以參考下
2015-12-12
JS延時器提示框的應用實例代碼解析
這篇文章主要介紹了JS延時器提示框的應用實例代碼解析的相關資料,需要的朋友可以參考下
2016-04-04
js獲取光標位置的最新方法
這篇文章主要給大家介紹了關于js獲取光標位置的最新方法,獲取光標位置,最常用的方法就是使用Selection對象和Range對象,文中通過代碼介紹的非常詳細,需要的朋友可以參考下
2023-09-09
JavaScript flash復制庫類 Zero Clipboard
開發(fā)中經(jīng)常會用到復制的功能，在 IE 下實現(xiàn)比較簡單。但要想做到跨瀏覽器比較困難了。
2011-01-01
javascript:void(0)用法及常見問題分析
javascript:void(0) 在某些情況下會有瀏覽器不兼容的bug。下面我們先來看下javascript:void(0) 的基礎介紹及用法，然后再來看使用它會出現(xiàn)什么問題，該怎么解決，感興趣的朋友跟隨小編一起看看吧
2023-10-10
Javascript alert消息換行的方法
這篇文章介紹了Javascript alert消息換行的方法，有需要的朋友可以參考一下
2013-08-08
巧用replace將文字表情替換為圖片
選擇表情插入文本域的時候，顯示的是類似[哈哈]這樣的字符串，下面是把表情字符串轉換為圖片表情的一種方法
2014-04-04