使用 Matter-js 制作的抽奖小游戏模块

之前项目中使用Matter.js制作的抽奖小游戏,现在单独抽离成一个模块,参数可配置化,方便复用.

安装

npm install dmc-gacha-game --save-prod

使用

// 引用
import GachaGame from "dmc-gacha-game";
// 参数见下表
const option = {
    container: "#c-gacha-game-container",
    viewportWidth: 375,
    ballImages: [...],
    ballSpriteScale: 0.8,
    decorateImage: {...},
    separatorOffsetY: 0.12,
    canvasStyle: {
      left: 101.25,
      top: 0,
      width,
      height: width * 2.78,
    },
    // separatorWidth: 100,
    // jumpCount: 10,
    // jumpInterval: 500,
    // ballCount: 20,
    // ballRadius: Math.floor(width / 10),
    // devicePixelRatio: window.devicePixelRatio,
    debug: false,
    timeScale: true,
};
// 传入option初始化,返回game实例
const game = new GachaGame(option);
// 监听游戏状态变化
game.addEventListener("changeGameStatus", (status) => {
  // status 类型见下方代码
  console.log("status: ", status);
});
// 开始游戏
game.start();
// 重置游戏, <option> 可选,覆盖初始化的参数
game.reset(<option>);

Option

| Key | Explanation | Type | Default | Required | | -------------------- | ------------------------------------------------------------ | -------------------- | ---------------------------------- | -------- | | container | 游戏的容器元素,DOM 元素或 queryString. | DOM / queryString | Body | true | | canvasStyle | canvas 位置大小{left, top,width,height} | Object | {} | true | | viewportWidth | 示口大小,之后的所有大小都是以该值为基础来计算 | Number[0-∞] | 375 | true | | debug | 开启 debug,装饰图片会变成半透明,可以看见 matter-js 游戏参数和图形,方便调试 | Boolean | false | false | | timeScale | 弹跳时开启时间加速与放缓 | | | | | ballImages | 球的精灵图数组[{id:...,url:..}...]或者[imgUrl,...]. | Array[String/Objcet] | [] | false | | ballCount | 球的数量 | Number[0-∞] | 15 | false | | ballRadius | 球的半径 | Number[0-∞] | Math.floor(canvasStyle.width / 10) | | | devicePixelRatio | 设备像素比 | Number[0-∞] | window.devicePixelRatio || 2 | false | | gameOverTimeout | 游戏结束等待时间 | Number[0-∞] | 3000(m s) | | | ballSpriteScale | 球的精灵图的缩放比例,有时设计给精灵图的四周有空白区域,会导致贴图大小对不上,可以使用该参数调节 | Number[0-1] | 1 | false | | decorateImage | 装饰图片对象,包含了四个类型,见下方代码 | Object | {} | false | | decorateImage.inner | 内饰图片 | Object | {} | false | | decorateImage.exit | 出口图片 | Object | {} | false | | decorateImage.button | 按钮图片 | Object | {} | false | | decorateImage.body | 机身图片 | Object | {} | false | | separatorOffsetY | 隔板 Y 轴偏差值 | Number[0-1] | 0 | false | | separatorWidth | 隔板宽度 | Number[0-∞] | 1000 | false | | jumpCount | 球弹跳次数 | Number[0-∞] | 8 | false | | jumpInterval | 弹跳时间间隔 | Number[0-∞] | 1000(m s) | false | | matterConfig | Matter-js 配置参数,见下方代码 | Object | {} | false |

decorateImage

const decorateImage = {
  inner: {
    url: "...",
    style: {
      width: 172.5,
      left: 105,
      top: 127.5,
    },
  },
  exit: {
    style: {
      width: 60,
      left: 101.25 + 0,
      top: 431.25,
    },
  },
  button: {
    style: {
      width: 75,
      left: 157.5,
      top: 340,
    },
    status: {
      "R,A,O": {
        url: `https://dfmz-new.oss-cn-shanghai.aliyuncs.com/manghe/img/38-theme/%E8%89%B2%E7%9B%B8%EF%BC%8F%E9%A5%B1%E5%92%8C%E5%BA%A6%202%20%E6%8B%B7%E8%B4%9D%206%402x.png`,
        style: {
          width: 75,
          left: 157.5,
          top: 340,
        },
      },
    },
    onClick(e) {
      if (this.gameStatus === "N") {
        this.start();
      } else {
        this.reset();
      }
    },
  },
  body: {
    url: "...",
    style: {
      width: 375,
      left: 0,
      top: 0,
    },
  },
};

matterConfig

matterConfig: {
      EngineCreate: {
        gravity: {
          scale: 0.002, // 重力比例
        },
      },
      RenderCreate: {
        hasBounds: true,
        options: {
          wireframes: false,
          showPerformance: false,
          background: "rgba(0,0,0,0)",
          // showAngleIndicator: true,
          // showCollisions: true,
          // showVelocity: true,
        },
      },
      RenderLookAt: {
        min: { x: 0, y: 0 },
      },
      RunnerCreate: {},
      BodiesCircle: {
        //   density: 1, //刚体的质量
        frictionAir: 0.0, //表示物体空气摩擦力(空气阻力)的数字
        restitution: 0.8, // 反弹动能系数
        friction: 0.0001, //表示物体摩擦力的数字
      },
    },
}

gameStatusMap

{
      L: {
        disc: "load",
      },
      N: {
        desc: "not started",
      },
      R: {
        desc: "running",
      },
      A: {
        desc: "await",
      },
      O: {
        desc: "over",
      },
}