$(function () { var $canvas = $("#canvas"),//canvas clientWidth = document.documentElement.clientWidth, canvasWidth = Math.floor(clientWidth * 562 / 750),//canvas宽 = 屏幕宽 * 设计稿里canvas宽 / 750 canvasHeight = Math.floor(clientWidth * 308 / 750),//canvas高 = 屏幕宽 * 设计稿里canvas高 / 750 ctx = $canvas[0].getContext("2d"),//获取canvas的2d绘制对象 $canvasMask = $("#canvas-mask"),//canvas遮罩层 wcancel = $('#w-cancel'),//弹出消耗积分取消按钮 $btn = $("#btn"),//刮奖按钮 explain = $("#explain"),//积分说明框 $change = $("#change"),//剩余次数 data = { count: 0 },//次数 playCreditLimit = '',//是否展示 积分说明框 consumeTotal = '',//消耗积分 empty = false, dataList = [], couponId = null, falglimitType = '', timer,//轮流提示定时器 errorMessge = '', playAble = true, radomData = [], numFalg = false,//有次数=false bool = false;//判断是否按下去,true为按下,false未按下 let baseUrl = 'https://ctest.malls.iformall.com/C'; if (window.location.origin == 'https://gametest.malls.iformall.com') { baseUrl = 'https://ctest.malls.iformall.com/C' } else if (window.location.origin == 'https://game.malls.iformall.com') { baseUrl = 'https://c.malls.iformall.com/C' } else if (window.location.origin == 'https://game.youlane.cn') { baseUrl = 'https://ciformall.youlane.cn/C' } //canvas初始化 init(); function init() { $.ajax({ url: baseUrl + "/api/game/getOneGame",//json文件位置 type: "GET",//请求方式为get dataType: "json", //返回数据格式为json headers: { 'content-type': 'application/json', "token": getQueryString('token') }, data: { id: getQueryString('id'), // id:"215366414771421184" }, success: function (res) {//请求成功完成后要执行的方法 // alert(JSON.stringify(res)) var strHtml = ""; dataList = res.data.couponIdsList; playCreditLimit = res.data.playCreditLimit falglimitType = res.data.limitType if (playCreditLimit >= '0') { explain.show() } id = res.data.id let totalWeight = 0; dataList.forEach((item, index) => { strHtml += '
  • '; strHtml += ''; strHtml += '
  • '; totalWeight += Number(item.gameWeight) for (var i = 0; i < item.gameWeight; i++) { radomData.push(item) } }) let notWinweight = 100 - totalWeight; let b = { id: null } for (var i = 0; i < notWinweight; i++) { radomData.push(b) } $('.swiper-wrapper').html(strHtml); //奖品展示 var show = new Swiper(".swiper-container", { direction: "horizontal",//水平方向滑动。 vertical为垂直方向滑动 loop: false,//是否循环 slidesPerView: 'auto' //自动根据slides的宽度来设定数量 }); getCount(); } }) $canvasMask.show(); // $change.html(data.count);//显示剩余次数 //设置canvas宽高 $canvas.attr('width', canvasWidth); $canvas.attr('height', canvasHeight); //canvas绘图 ctx.beginPath(); ctx.fillStyle = '#999';//刮刮乐图层的填充色 ctx.lineCap = "round";//绘制的线结束时为圆形 ctx.lineJoin = "round";//当两条线交汇时创建圆形边角 ctx.lineWidth = 20;//单次刮开面积 ctx.fillRect(0, 0, canvasWidth, canvasHeight); ctx.closePath(); ctx.globalCompositeOperation = 'destination-out';//新图像和原图像重合部分变透明 //下面3行代码是为了修复部分手机浏览器不支持destination-out $canvas.css("display", "none"); $canvas.outerHeight(); $canvas.css("display", "inherit"); } /** * 获取剩余中奖次数 */ function getCount() { $.ajax({ url: baseUrl + "/api/game/getCount",//json文件位置 type: "GET",//请求方式为get dataType: "json", //返回数据格式为json headers: { 'content-type': 'application/json', // "token":"b49fa2c4-a074-4147-afbe-6913c66705d6", "token": getQueryString('token') }, data: { gameId: getQueryString('id'), // id:"213206254531641344" }, success: function (res) {//请求成功完成后要执行的方法 if (res.code == 200) { if (res.data.playAble) { playAble = true; data.count = res.data.playLimit - res.data.playCount; $('#change').html(data.count); consumeTotal = res.data.playCredit; if (data.count <= '0') { $(integration).html(`${consumeTotal}积分/每次`); } else { $(integration).html(`当前游戏免费次数耗尽后${consumeTotal}积分/次`); } if (falglimitType == '0') { if (data.count == -1) { $('#change-box').hide(); } else { $('#change-box').html('您总共还有' + data.count + '免费刮奖机会') } } else if (falglimitType == '1') { if (data.count == -1) { $('#change-box').hide() } else { $('#change-box').html('您今天还有' + data.count + '免费刮奖机会') } } if (res.data.playLimit < '0' && playCreditLimit >= "0") { return// 不设置能免费次数且设置每次消耗积分 } if (res.data.playLimit < '0') { data.count = 1000000; $('#change-box').hide(); } else { $('#change-box').show(); } } else { playAble = false; if (res.data.playLimit <= '0') { errorMessge = '您的中奖次数已经达到上限!无法继续参加游戏!' data.count = 1000000; $('#change-box').hide(); return; } else { if (res.data.AwardLimit == res.data.AwardCount && res.data.AwardLimit != 0) { errorMessge = '您的中奖次数已经达到上限!无法继续参加游戏!' data.count = res.data.playLimit - res.data.playCount; $('#change').html(data.count); $('#change-box').html('您的中奖次数已经达到上限!无法继续参加游戏!'); $('#change-box').show(); return; } else if (res.data.playLimit == res.data.playCount) { errorMessge = '您的剩余次数为0!无法继续参加游戏!' data.count = 0; $('#change').html(0); $('#change-box').html('您的剩余次数为0!无法继续参加游戏!'); $('#change-box').show(); return; } } } } else { errorMessge = res.message; playAble = false; $('#change').html(0); $('#change-box').hide(); } } }) } /** * 记录游戏次数 */ function reduceCount(paramData) { $.ajax({ url: baseUrl + "/api/game/addActionLog",//json文件位置 type: "POST",//请求方式为get dataType: "json", //返回数据格式为json async: true, headers: { 'content-type': 'application/json;charset=UTF-8', "token": getQueryString('token') }, data: JSON.stringify(paramData), success: function (res) {//请求成功完成后要执行的方法 // alert('成功了!') getCount() } }) } wcancel.click(function () { $("#warnning-box").hide() $("#warnning-box-bg").hide() numFalg = false; }) $("#w-button").click(function () { $("#warnning-box").hide() $("#warnning-box-bg").hide() numFalg = true; let b = Math.floor(Math.random() * radomData.length) console.log(radomData[b]) // couponId = radomData[b].couponId let params = { // couponId:couponId, // couponChannelId:radomData[b].id gameId: getQueryString('id') } //查询中奖结果 $.ajax({ url: baseUrl + "/api/game/freeCridetGameGo",//json文件位置 type: "POST",//请求方式为get dataType: "json", //返回数据格式为json async: true, headers: { 'content-type': 'application/json;charset=UTF-8', "token": getQueryString('token') }, data: JSON.stringify(params), success: function (res) {//请求成功完成后要执行的方法 if (res.code == 200) { getCount() $canvasMask.hide(); if (res.data) { var toemdata = res.data if (res.data.prizeType == 1) { $('#card .win').html('积分增加+' + toemdata.credit); $('.winning .red-body p').html('') $('#card .win').css({ 'font-size': ' 20px', 'text-align': 'center', 'color': '#FF6600', 'line-height': '50px', 'line-height': '50px', "background": 'url(../common/image/prize/prize2.png) no-repeat', 'background-size': '6rem' }) } else { $('#card .win').html('') $canvas.css("background-image", 'url(' + toemdata.coverImg + ')'); $('#card .win').css({ "background": 'url(' + toemdata.coverImg + ') no-repeat', "background-size": "cover" }); $('.winning .red-body p').html(toemdata.title + "(点击“我的”查看奖券)"); } $(".btn").html('再玩一把') } else { $('#card .win').html('') $canvas.css("background-image", 'url(../common/image/redPack/weizhongjiang.png)'); $('#card .win').css({ "background": 'url(../common/image/redPack/weizhongjiang.png) no-repeat', "background-size": "cover" }); $('.winning .red-body p').html('未中奖!(点击“我的”查看奖券)'); $(".btn").html('再玩一把') } } else if (res.code == 13101) { $canvasMask.hide(); // $canvas.css("background-image", 'url(../common/image/redPack/weizhongjiang.png)'); $('#card .win').css({ // "background": 'url(../common/image/redPack/weizhongjiang.png) no-repeat', "background-size": "cover" }); $('.winning .red-body p').css({ "line-height": "1.5rem", "font-size": "0.64rem" }) $('.winning .red-body p').html('积分不足!'); $(".btn").hide() } } }) }) //点击开始刮奖按钮 $btn.click(function () { // data.count--;//设定中奖的图片 let b = Math.floor(Math.random() * radomData.length) console.log(radomData[b]) // couponId = radomData[b].couponId let params = { gameId: getQueryString('id') } if (playAble) { if (data.count > 0) { if (true) { //查询中奖结果 $.ajax({ url: baseUrl + "/api/game/freeGameGo",//json文件位置 type: "POST",//请求方式为get dataType: "json", //返回数据格式为json async: true, headers: { 'content-type': 'application/json;charset=UTF-8', "token": getQueryString('token') }, data: JSON.stringify(params), success: function (res) {//请求成功完成后要执行的方法 if (res.code == 200) { getCount() $canvasMask.hide(); if (res.data) { var toemdata = res.data if (res.data.prizeType == 1) { $('#card .win').html('积分增加+' + toemdata.credit); $('.winning .red-body p').html('') $('#card .win').css({ 'font-size': ' 20px', 'text-align': 'center', 'color': '#FF6600', 'line-height': '50px', "background": 'url(../common/image/prize/prize2.png) no-repeat', 'background-size': '6rem' }) $(".btn").html('再玩一把') } else { $('#card .win').html('') $canvas.css("background-image", 'url(' + toemdata.coverImg + ')'); $('#card .win').css({ "background": 'url(' + toemdata.coverImg + ') no-repeat', "background-size": "cover" }); $('.winning .red-body p').html(toemdata.title + "(点击“我的”查看奖券)"); $(".btn").html('再玩一把') } } else { // reduceCount(paramContData); $('#card .win').html('') $canvas.css("background-image", 'url(../common/image/redPack/weizhongjiang.png)'); $('#card .win').css({ "background": 'url(../common/image/redPack/weizhongjiang.png) no-repeat', "background-size": "cover" }); $('.winning .red-body p').html('未中奖!(点击“我的”查看奖券)'); $(".btn").html('再玩一把') } } else { // reduceCount(paramContData); $('#card .win').html('') $canvasMask.hide(); $canvas.css("background-image", 'url(../common/image/redPack/weizhongjiang.png)'); $('#card .win').css({ "background": 'url(../common/image/redPack/weizhongjiang.png) no-repeat', "background-size": "cover" }); $('.winning .red-body p').html('未中奖!(点击“我的”查看奖券)'); $(".btn").html('再玩一把') } } }) } else { // reduceCount(paramContData); $canvasMask.hide(); $canvas.css("background-image", 'url(../common/image/redPack/weizhongjiang.png)'); $('#card .win').css({ "background": 'url(../common/image/redPack/weizhongjiang.png) no-repeat', "background-size": "cover" }); $('.winning .red-body p').html('未中奖!(点击“我的”查看奖券)'); $(".btn").html('再玩一把') } } else { console.log(numFalg, "??"); if (playCreditLimit >= '0') { //可以使用积分玩 if (!numFalg) {//消耗积分提示框只会弹出一次 $('#warnning-box-bg').show(); $('#warnning-box').show(); if (data.count == -1) { $('#w-title').html("将消耗" + consumeTotal + '积分'); } else { $('#w-title').html("免费次数已耗尽,将消耗" + consumeTotal + '积分'); } } else { numFalg = true; let b = Math.floor(Math.random() * radomData.length) console.log(radomData[b]) // couponId = radomData[b].couponId let params = { // couponId:couponId, // couponChannelId:radomData[b].id gameId: getQueryString('id') } //查询中奖结果 $.ajax({ url: baseUrl + "/api/game/freeCridetGameGo",//json文件位置 type: "POST",//请求方式为get dataType: "json", //返回数据格式为json async: true, headers: { 'content-type': 'application/json;charset=UTF-8', "token": getQueryString('token') }, data: JSON.stringify(params), success: function (res) {//请求成功完成后要执行的方法 if (res.code == 200) { getCount() $canvasMask.hide(); if (res.data) { var toemdata = res.data if (res.data.prizeType == 1) { $('#card .win').html('积分增加+' + toemdata.credit); $('.winning .red-body p').html('') $('#card .win').css({ 'font-size': ' 20px', 'text-align': 'center', 'color': '#FF6600', 'line-height': '50px', "background": 'url(../common/image/prize/prize2.png) no-repeat', 'background-size': '6rem' }) } else { $('#card .win').html('') $canvas.css("background-image", 'url(' + toemdata.coverImg + ')'); $('#card .win').css({ "background": 'url(' + toemdata.coverImg + ') no-repeat', "background-size": "cover" }); $('.winning .red-body p').html(toemdata.title + "(点击“我的”查看奖券)"); } $(".btn").html('再玩一把') } else { $('#card .win').html('') $canvas.css("background-image", 'url(../common/image/redPack/weizhongjiang.png)'); $('#card .win').css({ "background": 'url(../common/image/redPack/weizhongjiang.png) no-repeat', "background-size": "cover" }); $('.winning .red-body p').html('未中奖!(点击“我的”查看奖券)'); $(".btn").html('再玩一把') } } else if (res.code == 13101) { $canvasMask.hide(); // $canvas.css("background-image", 'url(../common/image/redPack/weizhongjiang.png)'); $('#card .win').css({ // "background": 'url(../common/image/redPack/weizhongjiang.png) no-repeat', "background-size": "cover" }); $('.winning .red-body p').css({ "line-height": "1.5rem", "font-size": "0.64rem" }) $('.winning .red-body p').html('积分不足!'); $(".btn").hide() } } }) } } else { $('#warnning-box-bg').show(); $('#warnning-box').show(); $('#w-title').html("当前可用次数已耗尽"); return } } } else { $('#warnning-box-bg').show(); $('#warnning-box').show(); $('#w-title').html(errorMessge); } }); /*canvas事件*/ //pc端 $canvas.on({ //鼠标按下 mousedown: function (e) { e = e || window.event; e.preventDefault(); bool = true; var x = e.pageX - $(this).offset().left,//鼠标距离该页面left的值 - 元素左侧距离文档的left y = e.pageY - $(this).offset().top; ctx.moveTo(x, y); //鼠标移动 $canvas.on('mousemove', function (e) { if (bool) { var x = e.pageX - $(this).offset().left; var y = e.pageY - $(this).offset().top; ctx.lineTo(x, y); ctx.stroke(); clear(); } }); }, //鼠标按键抬起 mouseup: function () { bool = false; } }); //移动端 $canvas.on("touchstart", function (e) { e = e || window.event; e.preventDefault(); if (typeof e.touches !== 'undefined') { e = e.touches[0];//获取触点 } var x = e.pageX - $(this).offset().left, y = e.pageY - $(this).offset().top; ctx.moveTo(x, y); //touchmove事件 $canvas.on('touchmove', eventMove); }); //移动事件 function eventMove(e) { e = e || window.event; e.preventDefault(); if (typeof e.touches !== 'undefined') { e = e.touches[0]; } var x = e.pageX - $(this).offset().left, y = e.pageY - $(this).offset().top; ctx.lineTo(x, y); ctx.stroke(); clear(); } //清除画布 function clear() { if (empty) return; var data = ctx.getImageData(0, 0, canvasWidth, canvasHeight).data,//得到canvas的全部数据 half = 0; //length = canvasWidth * canvasHeight * 4,一个像素块是一个对象rgba四个值,a范围为0~255 for (var i = 3, length = data.length; i < length; i += 4) {//因为有rgba四个值,下标0开始,所以初始i=3 data[i] === 0 && half++;//存在imageData对象时half加1 PS:该像素区域透明即为不存在该对象 } //当刮开的区域大于等于20%时,则可以开始处理结果 if (half >= canvasWidth * canvasHeight * 0.2) { ctx.clearRect(0, 0, canvasWidth, canvasHeight);//清空画布 empty = true; win();//调用中奖信息 //随机生成一个优惠券 } } //点击跳回小程序奖券列表 $('#myWin').click(function () { wx.miniProgram.redirectTo({ url: '/pages/couponorder/index/index' + "?token=" + getQueryString('token') + "&gameId=" + getQueryString('gameId') + "&id=" + getQueryString('id') + '&from=h5' }) }) //中奖信息提示 $("#close,.win,.btn").click(function () { empty = false; init(); }); //奖品展示 var show = new Swiper(".swiper-container", { direction: "horizontal",//水平方向滑动。 vertical为垂直方向滑动 loop: false,//是否循环 slidesPerView: "auto"//自动根据slides的宽度来设定数量 }); //返回首页 $("#gotoindex").click(function () { wx.miniProgram.redirectTo({ url: '/pages/index/index' }) }); });