@autots/redpacket v2.1.2

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);

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