{"id":28286718,"url":"https://github.com/gatomis/lottery-web","last_synced_at":"2025-07-15T04:35:15.741Z","repository":{"id":63470893,"uuid":"448760113","full_name":"GAtomis/lottery-web","owner":"GAtomis","description":"基于lottery的年会抽奖前端版本,年会大抽奖祝大家龙年吉祥！https://gatomis.github.io/lottery-web/","archived":false,"fork":false,"pushed_at":"2024-02-28T05:59:14.000Z","size":14526,"stargazers_count":176,"open_issues_count":7,"forks_count":70,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-06-18T01:40:20.398Z","etag":null,"topics":["css","h5","html","html5","threejs","web"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/GAtomis.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2022-01-17T05:04:34.000Z","updated_at":"2025-06-13T14:02:59.000Z","dependencies_parsed_at":"2024-01-22T05:22:15.819Z","dependency_job_id":"80e8b60c-40c7-4747-8929-ab69bedf69cd","html_url":"https://github.com/GAtomis/lottery-web","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/GAtomis/lottery-web","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GAtomis%2Flottery-web","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GAtomis%2Flottery-web/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GAtomis%2Flottery-web/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GAtomis%2Flottery-web/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/GAtomis","download_url":"https://codeload.github.com/GAtomis/lottery-web/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GAtomis%2Flottery-web/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265402833,"owners_count":23759237,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","h5","html","html5","threejs","web"],"created_at":"2025-05-21T21:12:24.766Z","updated_at":"2025-07-15T04:35:15.731Z","avatar_url":"https://github.com/GAtomis.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003c!--\n * @Description: 请输入....\n * @Author: Gavin\n * @Date: 2021-05-01 00:48:47\n * @LastEditTime: 2024-02-28 13:59:07\n * @LastEditors: GAtomis 850680822@qq.com\n--\u003e\n\u003ch1 align=\"center\"\u003e年会抽奖系统👋\u003c/h1\u003e\n\n## 项目介绍\n 年会快到了,参与到了设计抽奖系统T-T,本项目基于THREEJS+webpack+HTML实现一个配置化的抽奖页面,所有的配置都是基于JSON配置，喜欢本作品就来个🌟吧。\n\n## 页面预览\n  \u003cimg width=\"400\" src=\"https://gd-filems.dancf.com/mcm79j/mcm79j/50641/19898600-108a-4593-b9b5-afcb1c9d401a734451.png\"\u003e\n\n## 浏览地址\n  [web浏览地址](https://gatomis.github.io/lottery-web/)\n\n## 启动项目\n### 安装依赖\n```\nyarn intall 安装依赖...\n```\n### 启动项目\n```\nyarn dev  启动项目...\n```\n### 项目打包\n```\nyarn build 项目打包..\n```\n\n### node版本\n```\n    //推荐版本  12.11.0\n```\n\n## 目录结构\n\n```\nLottery-web\n  ├── src\n  │   ├── lottery\n  |   |   ├── mock.js\n  │   │   └── index.js\n  │   ├── lib\n  │   ├── img\n  │   ├── css\n  │   └── data\n  ├── package.json\n  └── webpack.config.js\n```\n\n## Mock中\n| 参数  | 值类型 | 描述                                                         |\n| ----- | ------ | ------------------------------------------------------------ |\n| user  | Array[Info] | 奖品类型，唯一标识，0 是默认特别奖的占位符，其它奖品不可使用 |\n| COMPANY | string| 公司名                                                     |\n| prizes  | Array[Gift] | 奖品信息                                                    |\n| luckyData  | {type:Array[Info]} | 中奖名单  type为奖品类型                                                   |\n| leftUsers  | Array[Info]  | 当前奖池可以抽取人员                                                   |\n| excludeUser | Array[Info] | 排除奖池人员述                                                     |\n| atmosphereGroupCard   | String | 气氛组卡片                        |\n| background   | String | 背景图片                        |\n| EACH_COUNT   | Array[Number] | 抽奖次序默认有个隐藏顺序                      |\n| width   | string| 渲染抽奖墙宽度比例        最好按照原比例去做             |\n| height   | string| 渲染抽奖墙长度比例       最好按照原比例去做                |\n| bgVideo   | string| 可以放动态渲染图(mp4类型这种)     使用时会自动覆盖背景不用时请注释或者null该属性               |\n### Gift详情\n```\n/**\n * 奖品设置\n * type: 唯一标识，0是默认特别奖的占位符，其它奖品不可使用\n * count: 奖品数量\n * title: 奖品描述\n * text: 奖品标题\n * img: 图片地址\n * ROTATE_TIME:转的球速度越大越慢\n * circle:旋转圈数最好8*x倍数\n * enter: //抽奖进行时音乐\n * awards: //颁奖音乐\n */\n   {\n    type: 1,\n    count: 1,\n    text: \"一等奖 \",\n    title: \"价值5999元\",\n    img: \"./img/huawei.png\",\n    enter: \"1st-lottery\",//抽奖进行时音乐\n    awards: \"1st-BJ-BGM\",//颁奖音乐\n    ROTATE_TIME: 20000,\n    circle: 8 * 6\n\n  },\n```\n\n### 内置方法\n插入抽奖前的方法\n```\n/**\n * @description: 不能说的秘密\n * @param {*} nowItem 当前奖品\n * @param {*} basicData 当前奖池人员\n * @return {*}\n * @Date: 2022-01-13 15:13:31\n */\nfunction setSecret(nowItem,basicData) {\n  if (nowItem.type != 4) {\n    const excludeId = excludeUser.map(item =\u003e item[0])\n    basicData.leftUsers = basicData.leftUsers.filter(human =\u003e !excludeId.includes(human[0]))\n    // console.log(basicData.leftUsers);\n  }\n}\n```\n### 背景音乐说明\n方法在index.js replaceMusic('enter-BGM')进行场景音乐替换(默认格式为m4a)\n\n| 参数  |  描述    |\n| ----- | ------ |\n| enter-BGM  | 进场音乐 |\n| other-BJ-BGM  | 抽奖颁奖音乐 |\n| other-lottery | 抽奖进行时音乐|\n| 1st-BJ-BGM | 抽奖颁奖音乐 |\n| 1st-lottery | 抽奖进行时音乐|\n| shenchou | 备用|\n\n### 动态壁纸和静态壁纸\n新加入的动态属性会初始化时候判断是否设置了动态壁纸URL,这里推荐在线地址,本地路径请用相对路径去导入,如不适用动态壁纸请把属性设置为null\n\n## Store（缓存）\n当页面刷新了怎么办,别担心这里做了页面数据缓存\n所有数据都优先读取缓存中数据,当页面刷新时自动读取,如果没有缓存自动初始化话数据\n## 页面逻辑\n\n* 抽奖=\u003e对奖池人进行当前奖品抽奖,当再次进行抽奖时会保存上次抽奖结果到缓存中并更新luckUser和leftUser\n* 重新抽奖=\u003e将当前抽中的人员扔回leftUser中(这里和原作者不同,原作者是直接删除了提出了刚才重抽之前人员),进行重新抽奖仍有可能抽中点重抽之前的人(当前轮)\n* 颁奖模式=\u003e进行当前奖品的颁奖模式bgm\n* 重置=\u003e无视一切条件进行页面重置（与原作不同）\n* 奖池每次重置都会被打乱池子顺序,优化随机算法\n\n### 自行修改(需要自己二次开发)\n1. 卡片显示编号和名字(index.js)\n2. 选中颜色（index.css）\n3. 卡片背景 (index.css)\n4. 不能说的秘密逻辑自定义开发(mock.js)\n\n### 更新日志\n* 增加分支feat-manual，用于手动停球，有这个功能需求的小伙伴可以下载该分支开发\n* 删除package中多余的第三方库\n\n## 鸣谢\n本项目是基于[@moshang-xc](https://github.com/moshang-xc/lottery)大佬写的作品很炫酷,于是本人就二次开发了下大佬的作品,实现脱离后台前端mock分离版本,喜欢的可以给@moshang-xc点个Star \n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgatomis%2Flottery-web","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgatomis%2Flottery-web","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgatomis%2Flottery-web/lists"}