微信小程序版狼人杀+服务端系列(1)

news/2025/3/29 17:00:08/

本系列主要讲利用微信小程序完整实现狼人杀游戏,慢慢跟进

关于狼人杀的游戏规则,就懒得赘述了,请自行百度。以下正文开始

  1. 创建房间以及加入房间
  2. 创建房间逻辑
  3. 加入房间逻辑

后续更改界面什么

创建房间效果图

以下实现逻辑,首先具有一个初始参数,然后根据用户选择来进行调节

Page({/*** 页面的初始数据*/data: {person_step: 62.5, //初始人数条wolf_step: 60, //初始狼人条sumPerson: 9, //参与人数sumWolf: 3, //狼人人数radio: '2', //默认屠边loading: false, //不加载initPerson: { //默认配置hunter: 1, //猎人witch: 1, //女巫prophet: 1, //预言家guard: 0, //守卫idiot: 0, //白痴villager: 3, //村民wolf: 3, //狼人sheriff: 2, //警长票数},},/*** 生命周期函数--监听页面加载*/onLoad: function(options) {},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function() {},/*** 生命周期函数--监听页面显示*/onShow: function() {},/*** 生命周期函数--监听页面隐藏*/onHide: function() {},/*** 生命周期函数--监听页面卸载*/onUnload: function() {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function() {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function() {},/*** 用户点击右上角分享*/onShareAppMessage: function() {},onDrag(event) {this.setData({sumPerson: Math.ceil(event.detail.value / 6.25)})},onDrag_wolf(event) {this.setData({sumWolf: Math.ceil(event.detail.value / 20)})},onChange(event) {this.setData({radio: event.detail});},//推荐设置setIdentity() {let initPerson = this.data.initPerson,that = thisswitch (this.data.sumPerson) {case 9:initPerson.hunter = 1initPerson.witch = 1initPerson.prophet = 1initPerson.wolf = 3initPerson.villager = 3initPerson.guard = 0initPerson.idiot = 0initPerson.sheriff = 0break;case 10:initPerson.hunter = 1initPerson.witch = 1initPerson.prophet = 1initPerson.wolf = 3initPerson.villager = 4initPerson.guard = 0initPerson.idiot = 0initPerson.sheriff = 0break;case 11:initPerson.hunter = 1initPerson.witch = 1initPerson.prophet = 1initPerson.wolf = 4initPerson.villager = 3initPerson.guard = 0initPerson.idiot = 1initPerson.sheriff = 3break;case 12:initPerson.hunter = 1initPerson.witch = 1initPerson.prophet = 1initPerson.wolf = 4initPerson.villager = 4initPerson.guard = 0initPerson.idiot = 1initPerson.sheriff = 3break;case 13:Toast('目前没有推荐配置,请自行配置')break;case 14:Toast('目前没有推荐配置,请自行配置')break;case 15:Toast('目前没有推荐配置,请自行配置')break;case 16:Toast('目前没有推荐配置,请自行配置')break;}this.setData({initPerson: initPerson,sumWolf: initPerson.wolf,sumPerson: that.reckonPerson(),person_step: that.reckonPerson() * 6.25,wolf_step: initPerson.wolf * 20})},//头像单点identityClick(event) {// 1 2 3 4 5 6 7 8  hunter witch prophet wolf villager guard idiot sherifflet initPerson = this.data.initPerson,that = this,sumPerson = this.data.sumPersonswitch (parseInt(event.currentTarget.dataset.index)) {case 1:Toast('当前局只能有1个猎人')break;case 2:Toast('当前局只能有1个女巫')break;case 3:Toast('当前局只能有1个预言家')break;case 4:initPerson.wolf = initPerson.wolf + 1break;case 5:initPerson.villager = initPerson.villager + 1break;case 6:initPerson.guard = initPerson.guard + 1break;case 7:initPerson.idiot = initPerson.idiot + 1break;case 8:if (parseInt(initPerson.sheriff) < 4) {initPerson.sheriff = initPerson.sheriff + 0.5;} else {Toast('最高4票,0.5票算作一人')}break;}if (that.reckonPerson() <= 16) {this.setData({initPerson: initPerson,sumPerson: that.reckonPerson(),sumWolf: initPerson.wolf,person_step: that.reckonPerson() * 6.25,wolf_step: initPerson.wolf * 20})} else {Toast('超过最大人数十六人')}},//计算总人数reckonPerson() {let initPerson = this.data.initPersonlet sumPerson = initPerson.hunter + initPerson.witch + initPerson.prophet + initPerson.wolf + initPerson.villager + initPerson.guard + initPerson.idiotreturn sumPerson;},btnCreate() {let that = this,initPerson = this.data.initPersonthis.setData({loading: true})//请求创建房间util.request(api.CreateRoom, {openid: app.globalData.userInfo.openid,gamer: that.reckonPerson(),wolf: initPerson.wolf,villager: initPerson.villager,witch: initPerson.witch,prophet: initPerson.prophet,hunter: initPerson.hunter,idiot: initPerson.idiot,guard: initPerson.guard,sheriff: initPerson.sheriff}).then(res => {if (res.code == 200) {wx.redirectTo({url: '/pages/room/room?roomid=' + res.data.id,})}})}
})

整个项目已上传至GitHub,觉得有用的同学麻烦点个star 谢谢。GitHub狼人杀项目


http://www.ppmy.cn/news/646412.html

相关文章

微信浏览器是什么内核,以及它的兼容性。

微信浏览器内核-------QQ浏览器X5内核 也就是说微信、手机QQ内置浏览器都是腾讯的QQ浏览器。 X5内核是腾讯基于开源Webkit优化的浏览器渲染引擎&#xff0c;目前除了微信、手机QQ、京东等有30多款APP内置浏览器都是基于X5内核。 如何查看&#xff1a;进入微信进入朋友圈或者公…

微信小程序获取用户高清头像

获取到用户头像的路径之后执行此函数, 返回值及时高清头像路径 function headimgHD(imageUrl) { console.log(原来的头像, imageUrl);imageUrl imageUrl.split(/); //把头像的路径切成数组//把大小数值为 46 || 64 || 96 || 132 的转换为0if (imageUrl[imageU…

微信小程序, 长按加号 不断添加数量

如图, 需求,长按加号,数量不断增加, 反之减号不断减少 需要使用 小程序中的长按事件,.bindlongpress, 需要注意的是连续增加一定会用到定时器, 在bindtouchend鼠标一开始需要清理定时器. html <image class"reduce img" bindtapreducesurplus bindlongpressreduc…

微信小程序项目实例——狼人杀

微信小程序项目实例——狼人杀 文章目录 微信小程序项目实例——狼人杀一、项目展示二、首页三、游戏页四、特殊角色文末 项目代码见文字底部&#xff0c;点赞关注有惊喜 一、项目展示 狼人杀是一款多人参与的&#xff0c;通过语言描述推动、较量口才和分析判断能力的策略类桌…

微信红包dome php,微信小程序学习用demo:简易图片动画红包代码

var app getApp(); Page({ data: { userInfo: {}, src: , coverImg:{ hidden: false, top: 0, //上面图片的top值 bottom: 0, //下面图片的bottom值 locked: false //首页展开触摸锁定 }, openPage: app.globalData.openPage1?true:false }, resetCoverImg: function() { thi…

微信小程序源码

下面是所有微信小程序源码以及部分项目的后台源码&#xff0c;因为也是程序员辛苦编程的&#xff0c; 方便大家学习&#xff0c;关注下面公众号后&#xff0c; 发送&#xff1a;我要源码&#xff0c;需要支付19.9元&#xff0c;即可得到下载链接。 │ ├─o2o行业&#xff0…

如何使用微信开发工具进行小程序开发

一、小程序介绍 官方文档&#xff1a;微信开放文档 微信小程序&#xff0c;简称小程序&#xff0c;英文名 MiniProgram &#xff0c;是一种不需要下载安装即可使用的应用&#xff0c;它实现了应用 “ 触手可及 ” 的梦想&#xff0c;用户扫一扫或者搜一下即可打开应用。也体现…

企微主页_企业微信名片对外怎么显示官网和小程序?

当客户添加我们的企业微信时&#xff0c;企业微信的对外名片是客户对我们的第一印象&#xff0c;设置个性化对外名片&#xff0c;有助于客户快速了解企业能够提供的服务&#xff0c;为客户留下美好的第一印象。 上图是两个零售行业企业成员个人名片案例&#xff0c;和微信名片不…