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


    📌个人主页个人主页
    ​🧀 推荐专栏小程序开发成神之路 --【这是一个为想要入门和进阶小程序开发专门开启的精品专栏!从个人到商业的全套开发教程,实打实的干货分享,确定不来看看? 😻😻】
    📝作者简介从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;
    					}
    				}
    			},
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 实现落棋动作的实时同步
      要实现下棋点击事件的同步,我们借助于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 = "";
    			},
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94

    六、完整源码

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

  • 相关阅读:
    php实战案例记录(23)根据数值来判断权限名称的封装函数
    Mac11.0.1系统M1处理器安装cocoaPoads最新教程
    华为ENSP网络设备配置实战(单臂路由+OSPF+端口汇聚+SSH+DHCP)
    MyBatis-Plus学习
    已经刷新了四大公开数据集纪录?吃一记新ReID数据集安利!
    【MySQL】索引介绍、索引的数据结构
    spring boot整合jwt
    软件架构设计的底层核心
    【动手学深度学习】3 Softmax 回归 + 损失函数
    Github每日精选(第60期):使用 HTML5 画布从 DOM 节点生成图像html-to-image
  • 原文地址:https://blog.csdn.net/weixin_37797592/article/details/128107154