L2OFF H5 服务端 wEB组件 - 转轮抽奖系统

kowalski

这是个人开发的一个抽奖系统,目的有两个,
一:增加游戏趣味儿性,
二:消耗玩家金币,
仅适用于L2OFF C++ H5 版本.并且需要扩展相关功能.
关于这个幸运转盘系统

玩家在游戏官网完成抽奖；奖品通过游戏内系统邮件发放。
网页只负责展示与扣费开奖，不直接改角色背包，降低刷物风险，也避免和游戏内交易、仓库冲突。


整体架构（三层）

1. <font face="微软雅黑">玩家浏览器（网页转盘页）
   
2.         ↓
   
3. 网站服务（账号、扣费、开奖、记录）---------选角色、选支付、单抽/连抽、看奖池与历史</font>

复制代码

转盘视觉素材的话,来源于互联网,

1. 做法：
   
2. 
   
3. 底图：CSS background-image 铺满 .lw-machine；蓝色 SPIN 用透明热区按钮叠在球体位置（可点、可禁用态）。
   
4. 
   
5. 
   
6. 
   
7. 抠槽：用图片编辑（或运行时 CSS mask / 预先导出透明 PNG）去掉中间 Life Stone，露出透明矩形视窗；视窗坐标用百分比定位，适配不同宽度。
   
8. 
   
9. 
   
10. 
    
11. 视窗层 .lw-slot：叠在黄框位置；内层 .lw-reel 竖向排列奖池图标（来自 LuckyWheel_Config.icon_url）。
    
12. 
    
13. 
    
14. 
    
15. 动画（JS，结果仍以后端为准）：
    
16. 
    
17. 
    
18. 
    
19. 
    
20. 
    
21. 点击 SPIN → 先 fetch /api/.../spin 拿到 { index, icon, name, amount }（或先播滚动再等返回，返回后对齐停格）
    
22. 
    
23. 
    
24. 
    
25. 滚动：transform: translateY(...) + transition / requestAnimationFrame，先加速后减速
    
26. 
    
27. 
    
28. 
    
29. 停在服务器返回的 index 对应图标居中黄框内
    
30. 
    
31. 
    
32. 
    
33. 禁止用前端随机决定奖励
    
34. 
    
35. 
    
36. 
    
37. 若底图像素槽位难抠：保留底图，用绝对定位的黄框+深色遮罩盖住原 Life Stone，效果等价。

复制代码

GM控制面板的话,

• 动开关、允许提取开关
  
• 三币费用、充值上下限
  
• 奖池 增删改/ 权重
  
• 查询：抽奖史、充提流水、当前冻结总额
  
• 审计日志
  
  

硬性安全约定

• Spin 请求只含 char_id + pay_type + CSRF；禁止奖励字段与自填费用
  
• 费用/概率只在服务器；动画跟 index
  
• 奖励与退币只走 SystemPost；禁止网页直写背包发奖
  
• 禁止网页对在线角色直接改 user_item；在线从背包划走只经 C++ DeleteItemInInventory
  
• 离线仓充值只动 warehouse=1 + item_type=57
  
• 网站余额扣减必须原子：UPDATE … WHERE balance>=cost + @@ROWCOUNT=1
  
• 提取仅当 GM withdraw_enabled=1（建议活动结束后打开）；提取金额以服务器余额为准，客户端不可指定超额
  
• char_id 归属校验；活动 enabled=0 不可抽（提取规则由 GM 单独控制