0.1.5 • Published 9 months ago
dmc-gacha-game v0.1.5
使用 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 | 示口大小,之后的所有大小都是以该值为基础来计算 | Number0-∞ | 375 | true |
| debug | 开启 debug,装饰图片会变成半透明,可以看见 matter-js 游戏参数和图形,方便调试 | Boolean | false | false |
| timeScale | 弹跳时开启时间加速与放缓 | |||
| ballImages | 球的精灵图数组{id:...,url:..}...或者imgUrl,.... | ArrayString/Objcet | [] | false |
| ballCount | 球的数量 | Number0-∞ | 15 | false |
| ballRadius | 球的半径 | Number0-∞ | Math.floor(canvasStyle.width / 10) | |
| devicePixelRatio | 设备像素比 | Number0-∞ | window.devicePixelRatio || 2 | false |
| gameOverTimeout | 游戏结束等待时间 | Number0-∞ | 3000(m s) | |
| ballSpriteScale | 球的精灵图的缩放比例,有时设计给精灵图的四周有空白区域,会导致贴图大小对不上,可以使用该参数调节 | Number0-1 | 1 | false |
| decorateImage | 装饰图片对象,包含了四个类型,见下方代码 | Object | {} | false |
| decorateImage.inner | 内饰图片 | Object | {} | false |
| decorateImage.exit | 出口图片 | Object | {} | false |
| decorateImage.button | 按钮图片 | Object | {} | false |
| decorateImage.body | 机身图片 | Object | {} | false |
| separatorOffsetY | 隔板 Y 轴偏差值 | Number0-1 | 0 | false |
| separatorWidth | 隔板宽度 | Number0-∞ | 1000 | false |
| jumpCount | 球弹跳次数 | Number0-∞ | 8 | false |
| jumpInterval | 弹跳时间间隔 | Number0-∞ | 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",
},
}