0.0.8 • Published 7 months ago
@ytfee/mitt v0.0.8
游戏接入依赖 @ytfee/mitt JavaScript 库。 @ytfee/mitt JavaScript 库用于 iframe 页面之间进行通信。简化了不同组件和页面之间的数据传递和事件处理。
安装和引入
在使用 @ytfee/mitt 之前，需要先进行安装。可以使用 npm 或者 yarn 进行安装。
npm install --save @ytfee/mitt"
# 或者
yarn add @ytfee/mitt"然后在需要的地方引入 @ytfee/mitt。
import { IframeInitForChild } from '@ytfee/mitt';IframeInitForChild(Object object)
游戏页面通信初始化实例类
参数
Object object
| 属性 | 类型 | 必填 | 说明 |
|---|---|---|---|
| quitGameListener | function | 是 | 父页面通知游戏页面退出游戏的监听事件 |
返回值
Object
| 属性 | 类型 | 说明 |
|---|---|---|
| startGame | function | 异步函数，通知父页面开始游戏，无入参，无返回值 |
| reportGameData | function | 异步函数，上报当前游戏数据，入参为游戏数据( reportGameDataParams )，无返回值。入参说明详见 reportGameDataParams |
| endGame | function | 异步函数，通知父页面结束游戏，无入参，返回值为附带游戏正确率的游戏数据(endGameRes)。返回值说明详见 endGameRes |
| quitGame | function | 异步函数，通知父页面退出游戏，无入参，无返回值 |
参数详解
reportGameDataParams
上报游戏数据 reportGameData 函数入参
| 属性 | 类型 | 必填 | 说明 |
|---|---|---|---|
| total | Number | 是 | 总数(选项数 || 分组数 || 容器数 || 元素数) |
| success | Number | 是 | 选正确数 |
| failure | Number | 是 | 选错误数 |
| snapshotData | Array | 否 | 游戏快照数据 |
endGameRes
上报游戏数据 endGame 函数返回值
| 属性 | 类型 | 说明 |
|---|---|---|
| total | Number | 总数(选项数 || 分组数 || 容器数 || 元素数) |
| success | Number | 选正确数 |
| failure | Number | 选错误数 |
| snapshotData | Array | 游戏快照数据 |
| ratio | Number | 正确率 |
接入示例
<!-- ...... -->
<!-- ↓↓↓ 核心逻辑代码 ↓↓↓ -->
<script type="module">
import { IframeInitForChild } from "./libs/modules/yt-mitt/dist/index.es.js";
let startGame = async () => {};
let reportGameData = async (params) => {};
let endGame = async () => {};
let quitGame = async () => {};
// 父页面退出游戏事件监听
const quitGameListener = async () => {
await handleReportGameData();
await handleQuitGame();
};
function init() {
// 子页面通信初始化
const result = new IframeInitForChild({
quitGameListener: quitGameListener,
});
// 开始游戏
startGame = result.startGame;
// 上报游戏数据
reportGameData = result.reportGameData;
// 游戏正常结束
endGame = result.endGame;
// 游戏异常退出
quitGame = result.quitGame;
const btnStart = document.getElementById("btn-start");
const btnReport = document.getElementById("btn-report");
const btnEnd = document.getElementById("btn-end");
const btnQuit = document.getElementById("btn-quit");
// 按钮绑定点击事件
btnStart.addEventListener("click", handleStartGame);
btnReport.addEventListener("click", handleReportGameData);
btnEnd.addEventListener("click", handleEndGame);
btnQuit.addEventListener("click", handleQuitGame);
}
/** 开始游戏 */
async function handleStartGame() {
await startGame();
}
/** 上报数据 */
async function handleReportGameData() {
await reportGameData({
total: 5, // 总数(选项数 || 分组数 || 容器数 || 元素数)
success: 1, // 选正确数
failure: 4, // 选错误数
snapshotData: [], // 游戏快照, 非必传
});
}
/** 游戏结束 */
async function handleEndGame() {
// 返回值内容:
// result.total 总数(选项数 || 分组数 || 容器数 || 元素数)
// result.success 选正确数
// result.failure 选错误数
// result.ratio 正确率
// result.snapshotData: [], // 游戏快照(如果有)
const result = await endGame();
// 游戏界面根据正确率执行奖励动画等内部逻辑...
}
/** 游戏非正常退出 */
async function handleQuitGame() {
await quitGame();
}
document.addEventListener("DOMContentLoaded", init);
</script>
<!-- ↑↑↑ 核心逻辑代码 ↑↑↑ -->
<body>
<div class="btn-wrapper">
<button id="btn-start">开始游戏</button>
<button id="btn-report">上报游戏数据</button>
<button id="btn-end">游戏正常结束</button>
<button id="btn-quit">游戏退出</button>
</div>
<!-- ...... -->
</body>交互逻辑
