如何使用JavaScript实现HTML5游戏断线自动重连

  介绍

这篇文章主要介绍如何使用JavaScript实现HTML5游戏断线自动重连,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

断线重连的需求一断线重连原理二游戏内自动重连不刷新三刷新游戏自动重连重连数据Locationreplace重置url重连四实际项目中处理重连机制最后的总结断线重连的需求

尤其是手机上,会因为网络的不稳定或者其他原因,导致用户的套链接断开。这个时候如果直接让玩家退出游戏,重新登录,无疑是非常影响用户体验的事情,所以根据这个需求,就有需要程序来实现断线后自动重连回去的技术,是用户能够再次快速开始游戏进行战斗。

<强>一、断线重连原理

原来其实很简单,就是在断线的时候,根据用户的点击(有些时间短的就不用点击,默认是自动重连回来),程序自动识别,是要刷新重新进入游戏还是帮用户自动重连。客户端会根据自动重连标记,帮用户自动做事情。比如自动登陆,选角色,进入场景,请求同步后台数据等等。

根据实现机制,大致可以分两种实现方法。主要是游戏内自动重连(不刷新)和刷新游戏自动重连,后面会详细讲两种实现机制,以及相关的利弊。

<强>二、游戏内自动重连(不刷新)

这种是比较难的,因为不刷新游戏,那么会因为一段时间的断开游戏,导致客户端数据跟服务器数据不同步了。比如怪物的位置,获得的奖励,进度等等。这些需要一开始就设计好,如果策划在后期要求加这个,那几乎是无法实现的,改动太大了,所以假设要这么多,大概是类似下面的做法。

1。客户端和服务端协定好那些数据需要客户端自己同步

2。断线多久内可以自动重连(策划以及技术上的实现来互相评估)

3。服务端提供自动重连的协议,同时用户断线第一时间不应该就销毁掉相关数据(这里比较复杂,比如自动战斗是否要一直在服务器挂着,以及其他的一些关联操作)

4。客户端不刷新游戏,使用新接口重新连接服务器,自动更新和同步相应的数据(比如同步怪物位置或者其他人物位置等等)

这种技术一般用于回合制之类的游戏,一般不涉及战斗系统。如果arpg的话,只能短暂的时间内可以自动重连,不然的话变数太大,或者需要做一些变种,比如单纯场景的怪物之类的刷新下,但是世界老板之类的场景就得重新载入之类的特殊处理。

<强>三,刷新游戏自动重连

我个人感觉这个是简单粗暴又实用的做法。大部分游戏都适合使用,只要一刷新,游戏的数据都没了,全部重新开始,客户端只需要根据标记来做一些自动化的操作,容易很多,同时服务器也不用更改,稳定也不容易出错。唯一不好的就是用户体验会稍微差一些。

<强>重连数据

字符串数据:

//ip  +,用户标识,+,服id  +,服名字,(数据根据自己项目情况)   var 重载:string =, ip  +,“#”, +, token  +,“#”, +, serverId  +,“#”, + serverName;//后面的重载字符串都是这里的内容

重连标识:

重新加载//字符串

注意:刷新只能刷新自己的页面。(比如在iframe里面的时候)

<强>位置。取代重置url重连

这种比较简单,也不会有什么兼容性的问题。就是重连的时候,把之前的登录用户以及服务端地址给记录起来

通过url来附带参数,最后再实际使用中解析出来,通过判断属性是否重载,

位置对象的替代()方法:用新的文档替换当前文档。

通过传入新的url(其实是原url +附带重连数据)

location.replace(时间+ oldUrl “重载#“,+,重载);

是必须走url,而且还需要和原来的参数进行兼容处理。在游戏游戏中可能是这样的url了:

地调试1

http://localhost: 63342/游戏/index . html ?重载=1,主机=ws://192.168.0.10:1050/ws&标记

饼干是存储于访问者的计算机中的变量。每当同一台计算机通过浏览器请求某个页面时,就会发送这个饼干。你可以使用JavaScript来创建和取回cookie的值。

利用饼干的本地存放功能,也比较方便,但是会有些手机浏览器可能会无法读取到。

document.cookie =,“重载#“,+,重载;

1。使用Html5的窗口。localStorage

localStorage属性允许你访问一个本地存储对象.localStorage sessionStorage与相似,不同之处在于,存储在localStorage里面的数据没有过期时间(过期时间),而存储在sessionStorage里面的数据会在浏览器会话(浏览会话)结束时被清除,即浏览器关闭时。

如何使用JavaScript实现HTML5游戏断线自动重连