Redpacket-core NPM

红包雨插件

一个基于 canvas 的红包雨插件

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

示例

效果1 效果2

使用

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 - 时间

实例方法：