hxj9102 / rain-game

基于vue、canvas、requestAnimationFrame的高性能红包雨效果

rain-game

基于vue、canvas、requestAnimationFrame的高性能红包雨效果

效果

如何使用

npm i rain-game -S

import RainGame from 'rain-game'

this.rainGame = new RainGame({
    el: '#canvas',
    preload: true,
    rains: [
        {
            image: require('./img/normal.webp'),
            width: 140,
            height: 120,

            clicked: {
                image: require('./img/clicked.webp'),
                width: 178,
                height: 100,
            },
      },
    ],
})

参数

参数	说明	类型	默认值
el	挂载的canvas元素	string|HTMLCanvasElement	-
proload	是否预加载rains中的image图片	boolean	true
interval	生成红包的间隔时间	number	500
speed	红包每帧移动的距离（px）	number	2
horizontalMovement	是否支持横向移动	boolean	false
boundary	点击红包边界距离，为number时表示四边的距离，为array时表示上右下左的距离	number|array	-
rains	红包数组信息	array	-

rains参数说明

参数	说明	类型	默认值
image	红包图片地址	string	-
width	宽度	number	-
height	高度	number	-
ratio	出现的权重	number	1
speed	红包每帧移动的距离（px），优先级更高	number	-
clicked	击中效果	object	-

clicked参数说明

参数	说明	类型	默认值
image	击中红包图片地址	string	-
width	宽度	number	-
height	高度	number	-
translate	相对于红包的x、y轴位移	array	-
speed	红包每帧移动的距离（px），优先级更高	number	-
duration	被点击红包停留时长	number	200

ratio说明

以下面例子，图片1生成的概率为1/3，图片2生成的概率为2/3。

[
  {
    image: require('./img/1.png'),
    width: 140,
    height: 120,
    ratio: 1,
  },
  {
    image: require('./img/2.png'),
    width: 140,
    height: 120,
    ratio: 2,
  }
]

事件

// 红包被击中，被回传红包信息
rainGame.$on('strike', (rain) => {
  console.log(rain)
})

方法

方法名	说明	参数
play	游戏开始	-
pause	游戏暂停	-
clear	游戏停止	-
add	动态添加红包	rain信息
remove	若需移除红包，则传入的rain信息需包含id字段	id