自己笔记之抽奖-lottery

lottery是一个抽奖库：game.gtimg.cn/images/js/d…

cdn引入
  <script src="https://ossweb-img.qq.com/images/js/delottery/lottery_v2.js"></script>

项目运用--九宫格抽奖

        <div class="prop-wish-prize">
        //奖励盒子用于抽奖高亮时候选中高亮展示
          <div class="prop-item">
            <div class="prop prop-wish-prize1 "></div>
            <div class="prop prop-wish-prize2 "> </div>
            <div class="prop prop-wish-prize3 "> </div>
            <div class="prop prop-wish-prize4 "> </div>
            <div class="prop prop-wish-prize5 "></div>
            <div class="prop prop-wish-prize6 "></div>
            <div class="prop prop-wish-prize7 "></div>
            <div class="prop prop-wish-prize8 "></div>
          </div>
          <div class="lottery" id="lotterycontent">
           //放的是所有奖励背景图
            <img src="//game.gtimg.cn/images/x5m/cp/a20250607xwnt/lotter-bg.png" id="lottery-img" />
          </div>
          //抽奖按钮
          <a href="javascript:;" class="common_lottery" onclick="callJsToStart()"></a>
        </div>
        
        
js
  var lottery = new Lottery({
    lighturl: "//game.gtimg.cn/images/x5m/cp/a20250607xwnt/lotter-on.png",//选中盒子高亮图片
    total: 8,//奖品数量
    width: 6.83,//整个盒子宽度
    height: 6.81,//整个盒子高度
    sbtnx: 2.41,//抽奖按钮x坐标
    sbtny: 2.36,//抽奖按钮y坐标
    sbtnw: 2.14,//抽奖按钮宽度
    sbtnh: 2.16,//抽奖按钮高度
    boxw: 2.1,//选中，高亮盒子宽度
    boxh: 2.11,//选中，高亮盒子高度
    position: "0_0,2.39_0,4.75_0,0_2.35,4.75_2.36,0_4.71,2.39_4.70,4.75_4.72",//每个奖品坐标
    unit: "rem",//m端转单位
    contentId: "lotterycontent",//盒子id
    onClickRollEvent: callJsToStart,//
    onCompleteRollEvent: callJsToComplete,//
  });
  
  // 抽奖按钮点击事件
function callJsToStart() {
    calllotteryToRoll(2); // 调用抽奖动画函数
}
//开发获得抽奖结果 通知lottery开始播放效果 js->lottery
function calllotteryToRoll(id) {
  console.log("calllotteryToRoll", id);
  if (lottery) lottery.stopRoll(id);
}
//动画完成通知js  lottery->js
function callJsToComplete() {
  console.log("抽奖结束");
}