添加工具类方法

最近更新时间:2022-01-10 15:45:57

注意:

因产品策略调整,游戏联机对战引擎后续将与云开发 CloudBase 整合为新产品形态,现将该产品保持维护状态,不再接收新用户使用申请,老用户仍可正常使用。

操作场景

本文档主要介绍如何添加工具类方法。

前提条件

已在根目录创建一个 Util.js 文件。

操作步骤

  1. 在 Util.js 文件中,添加如下代码,设置一个对象,用于保存一些常用属性和方法。
    // 模拟全局对象
    export const Global = {
        MainView: null,
        RoomView: null,
        GameView: null,
        room: null,
        ErrCode: null,
        ENUM: null,
        gameInfo: null,
        name: "",
    };
  2. 在 Util.js 文件中,添加如下代码,用于生成 openId,在实际项目中,需要使用微信平台的接口获取 openId。
    // 生成测试 openId
    export const mockOpenId = () => "openId_" + Math.ceil(Math.random() * 100) + (new Date()).getMilliseconds();
  3. 在 Util.js 文件中,添加如下代码,用于生成 userName,在实际项目中,需要使用微信平台的接口获取玩家昵称。
    // 生成测试 userName
    export const mockName = () => "user_" + Math.ceil(Math.random() * 100);
  4. 在 Util.js 文件中,添加如下代码,获得 canvas 对象上下文,以及画布宽度、高度信息。
    // 获得 canvas 上下文
    export const canvas = wx.createCanvas();
    export const ctx = canvas.getContext('2d');
    export const width = canvas.width;
    export const height = canvas.height;
  5. 在 Util.js 文件中,添加如下代码,准备基本的点击事件管理方法,例如,使用一个数组 clickHandlers 保存全部点击区域和点击回调,当监听到点击事件发生时,遍历该数组并执行点击回调。
    // 点击事件回调函数数组
    // Handler 结构: [id, [x1, y1, x2, y2], callback]
    let clickHandlers = [];
        // 开启点击事件监听
    wx.onTouchStart(function (e) {
        const {
            clientX,
            clientY
        } = e.touches[0];
            clickHandlers.forEach((handler) => {
                const x1 = handler[1][0];
            const y1 = handler[1][1];
            const x2 = handler[1][2];
            const y2 = handler[1][3];
                if (clientX > x1 && clientX < x2 && clientY > y1 && clientY < y2) {
                handler[2] && handler[2]();
            }
        });
    });
        // 添加监听
    export const onClick = (id, area, callback) => clickHandlers.push([id, area, callback]);
        // 移除监听
    export const offClick = (id) => clickHandlers = clickHandlers.filter(handler => handler[0] !== id);
目录