上周发布了元素纪元，得到诸位鱼油的支持，也给出了很多建设性的意见，游戏更加完善了！

如果你有看过元素纪元的代码仓库，就会发现元素纪元其实是一个部署在 GitHub Page 的纯前端游戏！那么游戏的云存档是怎么实现的呢？答案就是今天的主题——鱼丸游戏平台！

这是一个专为纯前端单机游戏打造的全方位集成平台。通过简单的 SDK 接入，就可以为游戏提供后端能力，包括用户认证、云端存档、数据同步以及管理后台。对游戏而言，只需要使用平台提供的 SDK，就可以简单接入，即使纯前端开发的游戏，可以做用户登录认证，云存档管理。下面简单介绍一下集成操作：

游戏注册

首先需要到鱼丸游戏平台注册游戏，访问 https://play.adventext.fun 使用鱼排账号登录后，进入游戏注册界面，填写游戏信息：

• 游戏名称
• 游戏Key：通常使用英文代号，不可重复。在使用 SDK 时作为唯一标识；
• 游戏描述：你这个是什么样的游戏；
• 回调路径：登录后回调路径，届时需要在该界面处理用户认证信息；写相对域名的路径即可，比如 /login;
• 域名白名单：可以使用你这个游戏 Key调用 SDK 的域名白名单；

填写好后提交申请，待我这边通过（我会收到通知），你就可以使用平台功能了！

安装 SDK

安装 SDK 超级简单，只要执行下面的命令即可：

npm install fishpi-play

集成功能

首先初始化，初始化一个单例 SDK，然后全局都使用这个：

import { GameSDK } from 'fishpi-play';

export const sdk = new GameSDK('YOUR_GAME_KEY');

触发登录跳转只要把登录后要访问的地址传递给 login 函数即可：

sdk.login(window.location.href);

前面注册游戏有填写了一个回调地址，那么我们需要在该地址打开时调用认证初始化，也可以在访问这个地址时检查是否已经登录，若没有则跳转登录：

// 处理回调中的登录信息
await sdk.initAuth();

// 检查是否已经登录，若没有则跳转登录
if (!await sdk.isAuthenticated()) {
    sdk.login('/');
} else {
    location.href = '/'
}

还可以获取登录用户的信息：

const user = await sdk.getUserProfile(); 
console.log('欢迎, ' + user.nickname);

用户信息的数据结构如下：

interface UserInfo {
    id: string;       // 用户唯一 ID
    username: string; // 用户名
    nickname: string; // 昵称
    avatar: string;   // 头像 URL
    isAdmin: boolean; // 是否为管理员
}

还可以进行存档管理：

// 上传存档 
await sdk.saveArchive(JSON.stringify({ score: 100 })); 
 
// 获取存档 
const archive = await sdk.getArchive(); 
if (archive) {
     const data = JSON.parse(archive.content); 
}

还可以进行实时的数据交换

// 连接实时消息服务（连接了才能显示在线状态）
sdk.connectRealtime((msg) => {
    console.log('Received message:', msg);
});

// 设置属性
sdk.setAttributes({ status: 'in-game', level: 5 });

// 获取当前属性
const attrs = sdk.getAttributes();

更多接口可以查看：https://www.npmjs.com/package/fishpi-play

游戏管理

集成 SDK 后，就可以登录鱼丸游戏平台管理游戏了，可以直接查看游戏的注册用户，用户的在线状态，还有上传的存档，设置的属性等。

后续计划

后面可能会集成鱼排市场的插件市场功能，游戏可以通过平台分发买卖游戏道具。如果你有什么更好的建议，可以在评论区告诉我哦~

^[1] 鱼丸游戏平台：https://play.adventext.fun/

^[2] GitHub 仓库：https://github.com/FishPiOffical/fishpi-play