ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

CocosCreator基于websocket实时对战开发方案

2020-12-15 10:57:06  阅读:288  来源: 互联网

标签:websocket 对战 实现 实时 玩家 CocosCreator 接收


CocosCreator基于websocket实时对战开发方案

随着4G/5G技术的普及,互联网通信的延迟越来越低。实时对战游戏迎来了春天。从最早的CS, 到现在的王者荣耀,吃鸡等,通过互联网构建多人在线实时对战的游戏,大大提高了游戏的趣味性。今天我们就来看看在CocosCreator框架下如何实现即时通讯。
用到的技术还是websocket, 它是通过对Http协议的扩展来实现长连接的。可以发送二进制数据。访问以ws或者wss(加密)开头加url的方式。例如: ws://huoshishanxin.com/websocketest/1。想详细了解的同学可以戳链接:https://www.runoob.com/html/html5-websocket.html
好了, 话不多说。咱们开始撸代码。我们要实现的效果呢,就是在地图上有两个玩家,每个人可以控制自己在地图上随意走动,并且通过点击目标位置来发射弓箭。弓箭射中对方,对方掉血。
搭建项目结构的不多说了,准备好相关的资源,以及实现本地玩家自己控制自己的移动。最后代码架构如下:
在这里插入图片描述

Websocket部分在GameControll.js中,界面上方有个输入框和登录按钮,输入用户的身份,点击登录。在这时候去建立socket连接。
在这里插入图片描述

Onopen是打开连接,如果打开失败则会出发onerror.
在onmessage中处理接收到的消息,因为其他玩家的消息都是通过这个接口接收的。我们规定数据的格式是坐标,包含x, y的信息的。所以这里先做个粗糙的判断啦。 以后正式需要开发的时候,必须严格进行格式的定义。 比如通过增加code字段来划分各种不同的命令。这里我们接收到移动的位置数据后转化成v2坐标,再控制当前玩家的位置,就可以实现实时的移动了。这段代码最后设置了全局变量ws, 这是为了后面使用它来发送位置的。请看下面代码:
在这里插入图片描述

在这里我们给move(移动控制板)增加监听,设置目标位置。
在这里插入图片描述

再在update的函数中更新本地位置时,通过websocket发送出去。注意要转化成string哦。结合上面接收onmessage处理的部分,实现起来是不是很简单啊。
需要了解服务器websocket的实现,可以接着看。
服务器是java开发的,使用了springboot框架,基于spring-websocket来实现。需要配置websocket。
在这里插入图片描述

在WebSocketServer中定义访问的url。我们把用户id放在了url上,便于获取。
在这里插入图片描述

建立连接时,把当前用户身份加入全局map中,方便后面查找。
在这里插入图片描述

接收到消息,需要转发给当前游戏中的其他玩家。
在这里插入图片描述

这样前后端连接起来,就可以实现实时对战啦。
代码下载请移步火石闪信官网:http://www.huoshishanxin.com/techShareDetail002.html, 最下方有下载地址。

标签:websocket,对战,实现,实时,玩家,CocosCreator,接收
来源: https://blog.csdn.net/weixin_42547469/article/details/111194024

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有