$(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'
})
});
});