微信小程序| 做一款多人实时线上的五指棋联机游戏

📌个人主页个人主页
​🧀 推荐专栏小程序开发成神之路 --【这是一个为想要入门和进阶小程序开发专门开启的精品专栏!从个人到商业的全套开发教程,实打实的干货分享,确定不来看看? 😻😻】
📝作者简介从web开发,再到大数据算法,踩过了无数的坑,用心总结经验教训,助你在技术生涯一臂之力!若想获取更多精彩内容,敬请订阅专栏或者关注😁😂🤣😃😆😉😊😋😍😘🥰
⭐️您的小小关注是我持续输出的动力!⭐️


干货内容推荐

🥇入门和进阶小程序开发,不可错误的精彩内容🥇 :



一 、效果预览

在这里插入图片描述


二、需求背景

对于五指棋游戏而言,其已经没有任何的技术新鲜度了!网络上各类的源码比比皆是,有java版、c#版、unity版、h5版等等。

尽管五指棋的内容如此之丰富,但是美中不足的是,这些资源都有一个弊端他们都是单机版,纯属于自嗨版本!

再者,进一步说有有的版本甚至配备了人工智能模拟阿法狗陪你下棋,让你有一种征服世界的感觉!还有就是自己搭建游戏通信服务器,通过定义复杂的socket通信服务器实现了多人联机游戏。这种种形式,大佬们可能会直呼内涵了!但是对于刚入手开发五指棋游戏或者多人联机通信功能的伙伴来说,上手可能性基本为零!

为此,本文基于最容易上手的技术,搭建了一套可以多人联机游戏的五指棋游戏,让大家每个人都能享受到游戏的乐趣!相信我,从中你可能能学到很多!


三、技术栈介绍

前端页面HTML+vue 2.0
前端框架uni-app (可以打包成任意小程序或者app源码)
游戏通信框架Go-Easy

四、搭建教程

  • 4.1 申请Go-Easy 的 AppId
  • (3) 获取并拷贝相应的AppID

  • 配置AppId到mail.js
    获取本文所配备源码,并导入到HBilder中打开,将刚才获取到的AppID粘贴到main.js文件中即可!
    在这里插入图片描述

  • 使用Builder打包或启动项目
    在这里插入图片描述


五、关键技术点

  • 绘制五指棋棋盘和棋子
    绘制五指棋的内容我们可以通过html中的Carvas技术来实现:
// ==== 五指棋控制逻辑  ===
			drawLine() {
				let s = uni.upx2px(730);
				let dis = Math.floor(s / 15);
				let w = dis * 14;
				for (let i = 1; i <= 14; i++) {
					this.game.ctx.moveTo(i * dis + 0.5, w);
					this.game.ctx.lineTo(i * dis + 0.5, dis);
					this.game.ctx.moveTo(dis, i * dis + 0.5);
					this.game.ctx.lineTo(w, i * dis + 0.5);
					this.game.ctx.setStrokeStyle('#a5aa6b');
					this.game.ctx.stroke();
				}
				this.game.ctx.draw();
				for (let i = 0; i <= 13; i++) {
					this.game.chess_Board[i] = [];
					this.game.lianz[i] = [];
					for (let j = 0; j <= 13; j++) {
						this.game.chess_Board[i][j] = 0;
						this.game.lianz[i][j] = 0;
					}
				}
			},
  • 实现落棋动作的实时同步
    要实现下棋点击事件的同步,我们借助于websocket的消息发布-订阅模式。在下棋时一方面发送事件,一方面又同时监听对方的下棋动作。
// 监听新消息
			listenNewMessage(){
				// 监听当前聊天室的消息
				let self = this;
				let roomId = this.currentRoom.roomId;
				pubSub.subscribe({
					channel: roomId,
					onMessage : function (message) {
						let messageContent = "";
						let content = JSON.parse(message.content);
						//聊天消息
						if(content.type === self.MessageType.CHAT) {
							messageContent = content.content;
						}
						//道具消息
						if(content.type === self.MessageType.PROP) {
							if (content.content === self.Prop.ROCKET) {
								messageContent = "送出了一枚大火箭";
							}
							if (content.content === self.Prop.HEART) {
								messageContent = "送出了一个大大的比心";
							}
						}
						
						 console.log("监听消息成功==",content)
						if(content.type === self.MessageType.CHESS){
														
							self.canvasClick(content.body,content.chessRole)
							self.userInfo.roundFlag = true
						}
						//添加消息
						let newMessage = {
							content: messageContent,
							senderUserId: content.senderUserId,
							senderNickname: content.senderNickname,
							type: self.MessageType.CHAT
						};
						self.currentRoom.messages.push(newMessage);
						if (content.type === self.MessageType.PROP) {
							self.propAnimation(parseInt(content.content))
						}
						self.scrollToBottom();
					},
					onSuccess : function () {
					  console.log("监听新消息成功")
					},
					onFailed : function(error) {
						console.log("订阅消息失败, code:"+error.code+ ",错误信息:"+error.content);
					}
				})
			},

sendMessage(messageType, content) {
				//发送消息
				if (content === "" && messageType === this.MessageType.CHAT) {
					return;
				}
				var message = {
					senderNickname: this.currentRoom.currentUser.nickname,
					senderUserId: this.currentRoom.currentUser.id,
					type: messageType,
					content: content
				};
				
				if(messageType === this.MessageType.CHESS){
					this.chessMassage.body = content
					this.chessMassage.chessRole = this.userInfo.chessRole
					let userNum=this.currentRoom.onlineUsers.users.length
					
					message = {
						senderNickname: this.currentRoom.currentUser.nickname,
						senderUserId: this.currentRoom.currentUser.id,
						type: messageType,
						body:content,
						playerA:'',
						playerB:'',
						chessRole:this.userInfo.chessRole,
						mode:1,
						userNum:userNum
					}
				}
				console.log("发送==",message);
				pubSub.publish({
					channel : this.currentRoom.roomId,
					message : JSON.stringify(message),
					onSuccess : function () {
						console.log("发送成功");
					},
					onFailed : function (error) {
						console.log("消息发送失败,错误编码:" + error.code + " 错误信息:" + error.content);
					}
				});
				this.newMessageContent = "";
			},

六、完整源码

需要项目源码的小伙伴请自取(项目的运行步骤请根据教程一起食用,有任何疑惑欢迎随时私信!😁):项目完整源码地址【基于小程序的多人联机五指棋游戏实现完整源码】

评论 10
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

陶人超有料

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值