redpacket-core
Version:
一个基于 canvas 的红包雨插件
93 lines (70 loc) • 2.83 kB
Markdown
# 红包雨插件
> 一个基于 canvas 的红包雨插件
- 游戏引擎般体验
- 基于 umd 打包
- 内置禁用 ios 弹性效果
- 红包雨最小内核，可扩展性强
## [示例](https://codesandbox.io/s/redpacket-coreshi-li-nqjgm?file=/src/components/HelloWorld.vue)
## 使用
```js
import Game from "redpacket-core";
import icon from "redpacket-core/dist/images/fish.png";
import icon1 from "redpacket-core/dist/images/红包1.png";
import icon2 from "redpacket-core/dist/images/红包2.png";
import icon3 from "redpacket-core/dist/images/红包3.png";
import addIcon from "redpacket-core/dist/images/add.png";
import particleIcon from "redpacket-core/dist/images/fire.png";
import tap from "redpacket-core/dist/sounds/hit.wav";
import bg from "redpacket-core/dist/sounds/bg.mp3";
const source = [
{ type: "image", id: "icon", src: [icon, icon2, icon1, icon3] },
{ type: "image", id: "addIcon", src: addIcon },
{ type: "image", id: "particleIcon", src: particleIcon },
{ type: "audio", id: "tap", src: tap },
{ type: "audio", id: "bg", src: bg },
];
const gameObj = new Game({
width: window.innerWidth,
height: window.innerHeight,
target: document.getElementById("content"),
loadSource: source,
});
gameObj.on("clickBox", (e) => {
// 找出第一次点击时间，随机请求接口
});
gameObj.on("gameOver", () => {
// 游戏结束检查结果
});
gameObj.on("coundownTime", (e) => {
// 在随机时间请求接口
});
gameObj.startGame();
gameObj.destory();
```
构造函数：
> Game(opt:object)
opt 参数：
- width:Number - 舞台宽度
- height:Number - 舞台高度
- target:HTMLCanvasElement|HTMLElement - canvas 父容器
- loadSource: Array - 静态资源
- 图片资源 - 红包，点击红包效果图片 id 为： icon addIcon particleIcon
> icon 为必填 可以是字符串或数组，数组时随机出现
- 音频资源 - 背景音乐，点击音效 id 为： tap bg
> 由于浏览器原因，背景音乐必须点击后才能播放
- type:Number - 红包类型 1 喷洒，2 掉落
- gameTime:Number - 时间
实例方法：
> startGame()
开始游戏
> destory()
销毁实例函数，vue 等框架建议在组件销毁时调用
> on(type:string,fn:function)
type 取值：
- clickBox 监听点击红包
- gameOver 监听游戏结束
- coundownTime 监听倒计时
fn：回调函数
创作不易，此插件如果对你有用，就请笔者喝杯咖啡吧！
