|
- $(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 += '<li class="swiper-slide">';
- strHtml += '<img src="' + item.coverImg + '">';
- strHtml += '</li>';
- 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'
- })
- });
- });
|