红包雨插件

一个基于 canvas 的红包雨插件

• 游戏引擎般体验
• 基于 umd 打包
• 内置禁用 ios 弹性效果
• 红包雨最小内核，可扩展性强

示例

使用

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：回调函数

创作不易，此插件如果对你有用，就请笔者喝杯咖啡吧！