微信小程序?qū)崿F(xiàn)狼人殺小游戲的示例詳解
一、項目展示
狼人殺是一款多人參與的,通過語言描述推動、較量口才和分析判斷能力的策略類桌面游戲
玩家人數(shù)適于4-18人參與
主要角色有:狼人 、預(yù)言家 、平民 、女巫 、獵人 、白癡 、守衛(wèi) 、騎士等
同時還有眾多的玩家形象
各角色的職能介紹
設(shè)置游戲人數(shù)和選擇對應(yīng)角色
開啟游戲環(huán)節(jié)
二、首頁
首頁是選擇游戲人數(shù)的頁面
不同人數(shù)會分配不同的角色數(shù)量
常駐角色有狼人、村民、預(yù)言家、女巫、獵人
當游戲人數(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>
效果如下:
三、游戲頁
在進入游戲界面之前,玩家需要抽取自己對應(yīng)的角色牌
之后才是跳轉(zhuǎn)到游戲的界面
角色選取界面部分代碼如下:
<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>
效果展示:
進入游戲后,有多個白天黑夜的轉(zhuǎn)換環(huán)節(jié),狼人可以在黑夜中淘汰選手
效果如下:
四、特殊角色
上面的效果是普通村民和狼人的
其中,神職人員有著不同的技能
首先是女巫
女巫有兩瓶藥,一瓶救命一瓶殺人
另外是獵人
獵人在每輪可以獵殺掉一名玩家
具體的介紹就到這里了,是不是很有趣呢
五、源碼
源碼獲取鏈接 提取碼:1234
到此這篇關(guān)于微信小程序?qū)崿F(xiàn)狼人殺小游戲的示例詳解的文章就介紹到這了,更多相關(guān)小程序狼人殺內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
微信小程序使用webview打開pdf文檔以及顯示網(wǎng)頁內(nèi)容的方法步驟
在線查看PDF文件,已經(jīng)是很常見的需求了,下面這篇文章主要給大家介紹了關(guān)于微信小程序使用webview打開pdf文檔以及顯示網(wǎng)頁內(nèi)容的方法步驟,文中通過圖文介紹的非常詳細,需要的朋友可以參考下2022-07-07JS獲取及設(shè)置TextArea或input文本框選擇文本位置的方法
這篇文章主要介紹了JS獲取及設(shè)置TextArea或input文本框選擇文本位置的方法,涉及TextArea及input文本操作技巧,需要的朋友可以參考下2015-03-03js前端身份證號、手機號脫敏、手機號、身份證號加密處理(ios瀏覽器兼容性問題)
這篇文章主要給大家介紹了關(guān)于js前端身份證號、手機號脫敏、手機號、身份證號加密處理的相關(guān)資料,還介紹了ios瀏覽器兼容性問題,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-11-11JS與Jquery獲取屏幕、瀏覽器、頁面的寬度和高度對比整理
頁面的展示,從外到內(nèi)的容器為:屏幕、瀏覽器以及頁面本身。HTML元素展現(xiàn)在頁面內(nèi),頁面展現(xiàn)在瀏覽器內(nèi),而瀏覽器展現(xiàn)在屏幕內(nèi)。通過Js的一些對象可以獲取這些容器的高度、寬度。容器的尺寸是指當前分辨率下的高度和寬度(分辨率不同,值就不相同)。2023-02-02