跳到主要内容

多人在线对战入门教程 · JavaScript

欢迎使用多人在线对战。本教程将通过模拟一个比较玩家分数大小的场景，来讲解 SDK 的核心使用方法。

安装​

多人在线对战客户端 SDK 是开源的，您可以直接下载 Release 版本。源码请访问 Play-SDK-JS。

支持开发平台​

微信开发者工具：微信小程序 / 微信小游戏

CocosCreator：Mac、Web、微信小游戏、Facebook Instant Game、iOS、Android。

LayaAir：微信小游戏

Egret：Web

Cocos Creator​

下载 play.js 并拖拽至 Cocos Creator 工程中，选择「插件」模式导入。可参考 Cocos Creator 插件脚本。

在 Cocos Creator 中选中刚刚导入的 play.js 文件，在「属性检查器」选中以下所有选项：

  • 导入为插件
  • 允许 Web 平台加载
  • 允许编辑器加载
  • 允许 Native 平台加载

如图所示：

image

LayaAir​

下载 play-laya.js 至 Laya 工程的 bin/libs 目录下。

在 bin/index.html 中项目「IDE 生成的 UI 文件」之前引入刚下载的 SDK 文件：

  <!--提供了制作 UI 的各种组件实现-->
    <script type="text/javascript" src="libs/laya.ui.js"></script>
  <!--用户自定义顺序文件添加到这里-->
  <!--jsfile--Custom-->
+   <script src="libs/play-laya.js"></script>
  <!--jsfile--Custom-->
  <!--IDE 生成的 UI 文件-->
  <script src="../src/ui/layaUI.max.all.js"></script>

Egret​

下载 play-egret.zip 并解压至 Egret 工程的 libs 目录下。

在 Egret 工程中的 egretProperties.json 文件中添加 SDK 配置：

{
  "engineVersion": "5.2.13",
  "compilerVersion": "5.2.13",
  "template": {},
  "target": {
    "current": "web"
  },
  "modules": [
    {
      "name": "egret"
    },
    ...
+    {
+      "name": "Play",
+      "path": "./libs/play"
+    }
  ]
}

在 Egret 工程下，执行 Egret build -e 命令，如果在 manifest.json 中生成了 SDK 引用，说明 SDK 安装成功。

{
  "initial": [
    "libs/modules/egret/egret.js",
    ...
+    "libs/play/Play.js"
  ],
  "game": [
    ...
  ]
}

可参考 Egret 第三方库使用方法。

微信小程序​

下载 play-weapp.js 并拖拽至微信小程序的工程目录下即可。

Node.js 安装​

安装与引用 SDK：

npm install @leancloud/play --save

日志​

日志可以方便我们追踪问题，SDK 支持在浏览器和 Node.js 环境下打开日志调试。调试日志开启后，SDK 会把网络请求、错误消息等信息输出到 console 中。

浏览器​

浏览器环境下，请打开浏览器的控制台，运行以下命令：

localStorage.debug = 'Play'

Node.js​

Node.js 环境下，需要将环境变量 DEBUG 设置为 Play，你可以在启动某个命令之前设置环境变量。 下面以本地启动云引擎调试的命令 lean up 为例：

# Unix
DEBUG='Play' lean up
# Windows cmd
set DEBUG=Play lean up

初始化​

导入 SDK

const {
  Client,
  Region,
  Event,
  ReceiverGroup,
  setAdapters,
  LogLevel,
  setLogger,
} = Play;
const client = new Client({
    // 设置 APP ID
    appId: "your-app-id",
    // 设置 APP Key
    appKey: "your-app-key",
    // 设置 Server （请将 xxx.example.com 替换为你的应用绑定的自定义 API 域名）
    playServer: 'https://xxx.example.com',
    // 设置用户 id
    userId: 'tarara',
    // 设置游戏版本号（选填，默认 0.0.1）
    gameVersion: '0.0.1'
});

连接多人对战服务器​

client
  .connect()
  .then(() => {
    // 连接成功
  })
  .catch((error) => {
    // 连接失败
    console.error(error.code, error.detail);
  });

创建或加入房间​

默认情况下 Play SDK 不需要加入「大厅」，即可创建 / 加入指定房间。

// 例如，有 4 个玩家同时加入一个房间名称为「room1」的房间，如果不存在，则创建并加入
client
  .joinOrCreateRoom("room1")
  .then(() => {
    // 加入或创建房间成功
  })
  .catch((error) => {
    // 加入房间失败，也没有成功创建房间
    console.error(error.code, error.detail);
  });

joinOrCreateRoom 通过相同的 roomName 保证两个客户端玩家可以进入到相同的房间。请参考 开发指南 获取更多关于 joinOrCreateRoom 的用法。

通过 CustomPlayerProperties 同步玩家属性​

当有新玩家加入房间时，Master 为每个玩家分配一个分数，这个分数通过「玩家自定义属性」同步给玩家。 （这里没有做更复杂的算法，只是为 Master 分配了 10 分，其他玩家分配了 5 分）。

// 注册新玩家加入房间事件
client.on(Event.PLAYER_ROOM_JOINED, (data) => {
  const { newPlayer } = data;
  console.log(`new player: ${newPlayer.userId}`);
  if (client.player.isMaster) {
    // 获取房间内玩家列表
    const playerList = client.room.playerList;
    for (let i = 0; i < playerList.length; i++) {
      const player = playerList[i];
      // 判断如果是房主，则设置 10 分，否则设置 5 分
      if (player.isMaster) {
        player.setCustomProperties({
          point: 10,
        });
      } else {
        player.setCustomProperties({
          point: 5,
        });
      }
    }
    // ...
  }
});

玩家得到分数后，显示自己的分数。

// 注册「玩家属性变更」事件
client.on(Event.PLAYER_CUSTOM_PROPERTIES_CHANGED, (data) => {
  const { player } = data;
  // 解构得到玩家的分数
  const { point } = player.customProperties;
  console.log(`${player.userId}: ${point}`);
  if (player.isLocal) {
    // 判断如果玩家是自己，则做 UI 显示
    this.scoreLabel.string = `score:${point}`;
  }
});

通过「自定义事件」通信​

当分配完分数后，将获胜者（Master）的 ID 作为参数，通过自定义事件发送给所有玩家。

if (client.player.isMaster) {
  const WIN_EVENT_ID = 2;
  client.sendEvent(
    WIN_EVENT_ID,
    { winnerId: client.room.masterId },
    { receiverGroup: ReceiverGroup.All }
  );
}

根据判断胜利者是不是自己，做不同的 UI 显示。

// 注册自定义事件
client.on(Event.CUSTOM_EVENT, (event) => {
  // 解构事件参数
  const { eventId, eventData } = event;
  if (eventId === "win") {
    // 解构得到胜利者 Id
    const { winnerId } = eventData;
    console.log(`winnerId: ${winnerId}`);
    // 如果胜利者是自己，则显示胜利 UI；否则显示失败 UI
    if (client.player.actorId === winnerId) {
      this.resultLabel.string = "win";
    } else {
      this.resultLabel.string = "lose";
    }
    client.close().then(() => {
      // 断开连接成功
    });
  }
});

Demo​

我们在 Cocos Creator、LayaAir、Egret Wing 中都完成了这个 Demo，供大家运行和参考。

QuickStart 工程。

构建注意事项​

你可以通过 Cocos Creator 构建出其支持的工程。

其中仅在构建 Android 工程时需要做一点额外的配置，需要在初始化 play 之前添加如下代码：

onLoad() {
  const { setAdapters } = Play;
  if (cc.sys.platform === cc.sys.ANDROID) {
    const caPath = cc.url.raw('resources/cacert.pem');
    setAdapters({
      WebSocket: (url) => new WebSocket(url, 'protobuf.1', caPath)
    });
  }
}

这样做的原因是 SDK 使用了基于 WebSocket 的 wss 进行安全通信，需要通过以上代码适配 Android 平台的 CA 证书机制。