redpacket-rain

A redpacket rain component based on typescript and vanilla js.

Installing

Using npm:

$ npm install @autots/redpacket -S

Note: cdn is not supported at now, maybe you can deliver the file dist/redpacket.min.js to your own cdn server.

Example

1. Used in modular manner

import RedPacket from '@autots/redpacket';

const redPacket = new RedPacket({
  imgUrl: '//s.autoimg.cn/www/site/livechannel/images/',
  container: 'test',
  countdownTime: 3,
  remainTime: 30,
  rainType: [
    { score: 1, speed: 1, ratio: 7 },
    { score: 2, speed: 1, ratio: 2 },
    { score: 10, speed: 1, useless: 70, ratio: 1 }
  ],
  angle: 0.01,
  onDuration(time, count) {
    console.log(time, count);
  },
  onStart() {
    console.log('game start');
  },
  onEnded(count) {
    console.log(`game over! your score: ${count}`);
  }
})

Used in browser plugin

<script src="dist/redpacket.min.js"></script>

<script>
  const redPacket = new AutoTs.RedPacket(...); // same above
</script>

There is a global variable AutoTs, and RedPacket property is the constructor.

API

const redPacket = new RedPacket(config);

| Name | Type | Default | Optional | Description | |:----------:|:-----------------------------:|:-----------:|:----:|:--------------------------| | imgUrl | string | -- | NO | base URL of images | | container | string | -- | NO | id of the canvas element | | angle | number | 0.3 | YES | drop angle | | boundary | number | 0 | YES | distance from left&right | | countdownTime | number | 0 | YES | count down from ( <= 5 ) | | remainTime | number | 30 | YES | game duration time | | rainType | ({ score: number, speed: number, useless?: number, ratio: number })[] | -- | NO | type of rain 1. if pic has useless content which like glowing shadow, make sure four sides distance equal 2. ratio sum of all type must equal 10 | | onDuration | Function | -- | YES | callback during game remaining countdown ( time, count ) | | onStart | Function | -- | YES | callback when game start | | onEnded | Function | -- | YES | callback when game over ( score ) |

you can stop during the game by using:

redPacket.close();

Rules

config.imgUrl is the base url of images. the names of images can not be changed, there are images you should prepare:

• raindrop${index + 1}.png ( for (let index in config.rainType) )
• bingo.png ( click effect like firework )
• meteor.png ( decoration like meteor )
• countdown-bg.png
• countdown.png ( vertical sprite of 5 4 3 2 1 go )
• count-bg.png