开发文档

# 悬赏、陪玩

小程序的悬赏、陪玩玩法都是基于用户模式小程序（小程序模式）进行开发的。

用户模式小程序的开发调试方法如下：

悬赏、陪玩玩法介绍如下：

开发者只需关注进入小程序后的游戏流程，主要包括如下：

# 1. 获取游戏匹配结果，初始化游戏对局

通过悬赏或陪玩打开小程序后，小程序可调用 监听游戏匹配结果，创建游戏对局。

import React, { useEffect, useState } from 'react';
import { gameInit } from './api';
import './index.scss';

export default function Ready() {
  const [init, setInit] = useState(false);
  const [gameId, setGameId] = useState('');
  const [playerList, setPlayerList] = useState([]);

  ...

  useEffect(() => {
    FxExt.onMatchingResult(({ data }) => {
      const { gameId, playerList } = data;
      setPlayerList(list);
      setGameId(gameId);
      // 初始化游戏对局
      gameInit({ gameId, playerList }).finally(() => {
        setInit(true);
      });
    });

    return () => {
      FxExt.offMatchingResult();
    };
  }, []);

  ...
}

# 2. 进入游戏准备阶段

进入游戏准备阶段，小程序业务可以设计“准备” 按钮让玩家点击准备或自动准备，必须上报玩家准备状态。

import React, { useEffect, useState } from 'react';
import classNames from 'classnames';
import { fetchReadyStatus } from './api';
import './index.scss';

export default function Ready() {
  const [init, setInit] = useState(false);
  const [gameId, setGameId] = useState('');
  const [playerList, setPlayerList] = useState([]);
  const [selfReady, setSelfReady] = useState(false);

  ...

  const onReadyBtnClick = async () => {
    try {
      setSelfReady(true);
      fetchReadyStatus(gameId); // 后端调用开放平台准备Open Api
    } catch (error) {
      console.error(error);
      showToast(error.msg || '网络异常');
    }
  };

  ...

  return (
    <div className="wrapper">
      ...
      <div className="bottom-btn">
        <div className={classNames('ready-btn', { 'is-ready': selfReady })} onClick={onReadyBtnClick} />
      </div>
      ...
    </div>
  )
}

提示：

若第三方业务需要记录游戏玩家准备状态，可以创建类似示例中fetchReadyStatus接口，接口逻辑中，先调用开放平台的场次玩家准备，待返回上报成功结果后，再更新业务中玩家的准备状态，最后响应处理结果给前端。

若第三业务无需记录游戏玩家准备状态，可以直接调用开放平台的场次玩家准备，根据响应结果处理后续逻辑。

# 3. 游戏进行阶段

开发者可以设计开发互动性、趣味性较强的游戏内容，可以吸引更多的金主悬赏或邀请主播进行游戏互动。

# 4. 游戏结束阶段

当一局游戏结束后，开发者必须调用开放平台提供的上报结果Open API 场次结果上报，上报当前对局结果。

开发者可以自行设计游戏结果页，也可以调用开放平台提供的游戏结果面板: 打开游戏结果面板。

import React, { useEffect, useState } from 'react';
import { gameover } from './api';
import './index.scss';

export default function Playing() {
  const [gameId, setGameId] = useState('');
  const [playerList, setPlayerList] = useState([]);
  const [status, setStatus] = useState([]);

  ...

  useEffect(() => {
    async function fn() {
      if (status === GAME_STATUS.END) {
        const winner = playerList.find(e => e.gameResult === 1).userId;

        // 游戏结束
        try {
          await gameover(gameId);
        } catch (err) {
          showToast(err.msg || '网络请求异常');
        } finally {
          FxExt.openGameResultPanel({ gameId, winner });
        }
      } else {
        ...
      }
    }

    fn();
  }, [gameId, playerList, status]);

  ...
}

# 注意事项

# a.玩家未上报准备状态

当对局玩家未在规定时间内调用开发平台的场次玩家准备，平台会自动结算星币，然后弹窗提示玩家双方。具体玩法结算规则如下：

# b. 游戏结束后未上报游戏结果

当对局结束后，第三方业务规定时间内调用开放平台的场次结果上报，平台会自动结算星币，然后弹窗提示玩家双方。具体玩法结算规则如下：

# c. 异常情况进入小程序

一局游戏结束后，小程序会自动关闭，并且进入小程序入口也会关闭。若出现异常情况，进入小程序入口未关闭时，玩家再次通过入口进入小程序，第三方业务需要处理游戏对局已结束的情况。

← 接入说明 →