html5游戏联机教程,纯前端如何利用帧同步做一款联机游戏？

一、游戏帧同步

1.简介

·现代多人游戏中，多个客户端之间的通讯大多以同步多方状态为主要目标，为了实现这一目标，主要有两个技术方向：状态同步、帧同步。

·状态同步的思想中不同玩家屏幕上的一致性的表现并不是重要指标，只要每次操作的结果相同即可。所以状态同步对网络延迟的要求并不高。

·帧同步主要依赖客户端的能力，服务器仅仅是做一个转发，甚至客户端可以无需服务器，通过P2P方式来转发数据。由于只是转发游戏的行为，所以广播的数据量比状态同步要小很多。

本文将以帧同步技术为主来介绍如何实现一款联机游戏。

2.小游戏案例

·本次我们在《街霸小游戏》中利用腾讯云的游戏联机对战引擎实现了玩家之间的PVP玩法。

感兴趣的同学可以扫码体验：

二、游戏联机对战引擎：Mgobe

1.引擎简介

·Mgobe是由腾讯云提供的游戏联机对战引擎，可以为游戏提供房间管理、在线匹配、帧同步、状态同步等网络通信服务，帮助开发者快速搭建多人交互游戏。

·Mgobe可以让我们在没有后台开发人力的情况下也能实现游戏的帧同步。

Unity Editor也嵌入了MGOBE，在Unity Editor 2019.1.9及以上版本，各位开发者可以通过服务面板，一键开通腾讯云服务MGOBE。

Cocos Creator嵌入了MGOBE，在v2.3.4及以上版本，各位开发者可以通过Cocos Service服务面板，一键开通腾讯云服务MGOBE。

·官网：https://cloud.tencent.com/product/mgobe

2.开发语言

·Mgobe支持使用 JavaScript 或 TypeScript 来进行前端开发。

3.支持平台

·Mgobe目前支持：微信小游戏、QQ小游戏、百度小游戏、OPPO小游戏、vivo小游戏、字节小游戏；H5小游戏和手游。

三、纯前端打造帧同步实现联机对战

·接下来会从前端的角度来一步一步讲解使用Mgobe的方法，借助Mgobe我们可以不用知晓后台和运维知识，就可以构建起一套性能优越的帧同步游戏。

1.控制台配置

·首先我们需要在Mgobe的控制台中创建游戏实例，以获取游戏ID、游戏Key和域名等信息，我们会在初始化SDK时使用到游戏ID和游戏Key。

·出于安全考虑，微信小游戏会限制请求域名，所有的 HTTPS、WebSocket、上传、下载请求域名都需要在微信公众平台进行配置。因此，在正式接入游戏联机对战引擎 SDK 前，还需要开发者在微信公众平台配置合法域名。 ·需要配置的域名包含一条 request 域名和两条 socket 域名记录，配置如下：

// request 域名

report.wxlagame.com

// socket 域名

xxx.wxlagame.com

xxx.wxlagame.com:5443

2.SDK

2.1.下载

·SDK下载地址：https://cloud.tencent.com/document/product/1038/33406

2.2.引入SDK

·SDK文件包含 MGOBE.js 和 MGOBE.d.ts，即源代码文件和定义文件。在 MGOBE.js 中，SDK接口被全局注入到 window 对象下。因此，只需要在使用SDK接口之前执行 MGOBE.js 文件即可。

·以微信为例，只需将 MGOBE.js 放到项目下任意位置，在 game.js 中 import SDK 文件后即可使用 MGOBE 的方法。当然也可以使用 import/from、require 语法显式导入 MGOBE 模块。

2.3.直接使用密钥进行初始化

·用这种方式可以快速初始化SDK，可以最快的速度使用引擎的帧同步功能，但这种