//找茬时的点击quickspot() {if (this.blockFrequent) returnthis.blockFrequent = truelet evt = window.event || evt;let e = document.querySelector("#img")let a = 680 / e.clientWidth //图片原来的长680/图片现在的长，得到一个比例let b = 400 / e.clientHeight //图片原来的宽400/图片现在的宽，得到一个比例let d = evt.offsetX; //当前点击的地方在图片上的偏移量xlet c = evt.offsetY; //当前点击的地方在图片上的偏移量yconsole.log(a, b)//这两个值是相等的let aaX = 0let aaY = 0let rangX = 100 / a //原先的范围是在点击100px内存在不同找茬成功，因为手机不同，图片大小不同所以除以之前算好的比例值，可得到现在的图片大小对应的100px的大小let rangY = 100 / b //同理let zhi=0for (let i = 0; i < this.different_point.length; i++) { //后台给的找茬的坐标（x,y）有多个，用for循环出来aaX = Number(this.different_point[i].x / a) //给的坐标是根据原图大小的，所以要除以之前算好的比例aaY = Number(this.different_point[i].y / b)if ((aaX - rangX < d && d < aaX + rangX) && (aaY - rangY < c && c < aaY + rangY)) {//点击的坐标在指定的范围内this.spotStatus = 2;//代表符合条件zhi=i //是哪个坐标对应的break} else {this.spotStatus = 1}};// console.log(this.spotStatus, '状态')if (this.spotStatus == 2) {// console.log('点中ll')let box = document.getElementById("box");let divparent = document.createElement('div');divparent.style.position = 'absolute'divparent.style.zIndex = 10divparent.style.top = this.different_point[zhi].y / 40 - 2.5 + 'rem'//成功的热区出现的位置divparent.style.left = this.different_point[zhi].x / 40 - 2.5 + 'rem'divparent.style.width = '5rem' //这里的1rem=20px，热区100px=5remdivparent.style.height = '5rem'box.appendChild(divparent)let div = document.createElement("img");div.src = this.tick;div.style.zIndex = 10div.style.width = '3.5rem' //成功的圆圈大小70pxdiv.style.height = '3.5rem'div.style.position = 'absolute'divparent.appendChild(div);div.style.top = '0.75rem' //成功的圆圈在热区中居中显示div.style.left = '0.75rem'//上面是图片1的出现的成功的圈圈，下面是图片2出现的成功的圈圈，她们同时出现在两张图的相同的位置let box1 = document.getElementById("box1");let divparent1 = document.createElement('div');divparent1.style.position = 'absolute'divparent1.style.zIndex = 10divparent1.style.top = this.different_point[zhi].y / 40 - 2.5 + 'rem'divparent1.style.left = this.different_point[zhi].x / 40 - 2.5 + 'rem'divparent1.style.width = '5rem'divparent1.style.height = '5rem'box1.appendChild(divparent1)let div1 = document.createElement("img");div1.src = this.tick;div1.style.zIndex = 10div1.style.width = '3.5rem'div1.style.height = '3.5rem'div1.style.position = 'absolute'divparent1.appendChild(div1);div1.style.top = '0.75rem'div1.style.left = '0.75rem'this.lightUp++this.difficult_level--this.blockFrequent = falseif (this.lightUp == this.different_point.length) {this.isShowCount = falsethis.limit_time = 1this.isShowBtn = true //找茬成功this.gameState = 2this.FindDiffTaskStatus(this.gameState)}} else {// console.log('没点中')this.isShowFork = truesetTimeout(() => {this.isShowFork = falsethis.blockFrequent = false}, 500);if (this.limit_time > 10) {this.limit_time = this.limit_time - 10} else {this.isShowFork = falsethis.isShowCount = falsethis.limit_time = 1if (this.lightUp == this.different_point.length) {this.isShowBtn = true //找茬成功this.gameState = 2this.FindDiffTaskStatus(2)} else {this.isShowBtn = true //找茬失败this.gameState = 3this.FindDiffTaskStatus(1)}}}console.log(d, c)//x,y,a,b,c,d},