New Year, can not write an annual lottery system to help fun!

background

The annual conference is coming soon, and I am involved in designing the t-T lottery system. When I see the cool page of some big guy on Github, I am itching to do something

Let’s have a rendering

Preview the address to come one

Lottery system preview link

The project address

GitHub project address

Technology stack

This project through native HTML, JS, CSS, Threejs to achieve the whole page effect, through the scene conversion to achieve animation effect

The data source

All simulated data are saved locally through the following configurations for prizes and raffle winners, entry music, award music, background picture replacement, dynamic background replacement, atmosphere group card color replacement…… !

In the Mock

parameter Value types describe
user Array[Info] Prize type, unique identifier, 0 is the default special prize placeholder, other prizes cannot be used
COMPANY string Company name
prizes Array[Gift] Prize information
luckyData {type:Array[Info]} Winning list type indicates the prize type
leftUsers Array[Info] Current pool can draw people
excludeUser Array[Info] Exclusion of prize pool personnel
atmosphereGroupCard String Atmosphere Group card
background String The background image
EACH_COUNT Array[Number] The order of the draw has a hidden order by default
width string It is best to render the raffle wall width in proportion to the original scale
height string It is best to render the raffle wall length in proportion to the original scale
bgVideo string Dynamic renderings can be played (mp4 type) automatically overwrite the background when used, comment or Node this property when not used

Gift details

/** * Prize Settings * type: unique identifier, 0 is the default placeholder for special prize, other prizes cannot be used * count: prize number * title: prize description * text: prize title * img: ROTATE_TIME: the larger the ball speed, the slower it is * circle: the better the number of rotations 8*x multiple * enter: // Music * awards: // award music */ {type: 1, count: 1, text: /img/huawei.png", enter: "1st-Lottery ",// ROTATE_TIME: 20000, circle: 8 * 6},Copy the code

Built-in methods

Insert method before drawing

/** * @description: Untold secret * @param {*} nowItem current prize * @param {*} basicData Current prize pool member * @return {*} * @date: 2022-01-13 15:13:31 */ function setSecret(nowItem,basicData) { if (nowItem.type ! = 4) { const excludeId = excludeUser.map(item => item[0]) basicData.leftUsers = basicData.leftUsers.filter(human => ! excludeId.includes(human[0])) // console.log(basicData.leftUsers); }}Copy the code

Background music description

Method in index.js replaceMusic()

parameter describe
enter-BGM Play music
other-BJ-BGM Raffle award music
other-lottery Music while the raffle is going on
1ts-BJ-BGM Raffle award music
1ts-lottery Music while the raffle is going on
shenchou The standby

Store (cache)

So what happens when the page refreshes, don’t worry about it because we’re caching the page data and everything gets read from the cache first, automatically gets read when the page refreshes, automatically initializes if there’s no cache, okay

Page logic

  • Draw => Draw the current prize for the pool person, save the last draw result to the cache and update luckUser and leftUser when the next draw is made
  • Re-draw => Throw the current person in the draw back to the leftUser (here is different from the original author, the original author directly deleted the person before the re-draw), and re-draw it is still possible to draw the person before the re-draw (the current round).
  • Award mode => Award mode of the current prize
  • Reset => Reset the page regardless of all conditions (different from the original)
  • Each bonus pool reset will disrupt the pool order and optimize the random algorithm

Self-modification (secondary development is required)

  1. Card number and name (index.js)
  2. Select color (index.css)
  3. Card Background (index.css)

thanks

The UI is based on the work of Moshang-XC, thanks to the open source spirit of the big guy.