蓝桥杯前端Web赛道-水果消消乐
题目链接：2.水果消消乐 - 蓝桥云课 (lanqiao.cn)
题目要求可查看题目文件夹中的effect.gif文件。
下面开始分析题目需要我们做什么
首先显而易见的是，当点到相同的水果的时候，对于的格子消失；如果翻开的第二个水果和第一个水果不一样，就把水果的图案隐藏掉，成功就加2分并渲染到题目所在的位置是，反之则减两分。
所以总结下来有两点
- 匹配先后点击的水果是否相同
- 相同则加分并消除当前水果所在的方块，不同则减分当前水果恢复原状
观察dom结构我们发现相同水果的图片里的alt内容是相同的，我们可以利用这点来解决匹配先后点击的水果是否相同的问题。
而消除当前的水果方块,水果恢复原状可以使用opacity来控制透明度
题目还会暂时的展示所有的水果，所以我们还需要使用到setTimeout来控制时间。
现在开始写代码，首先我们要控制开始按钮的消失,通过观察dom结构拿到按钮的id
document.querySelector('#start').style.display = 'none'
然后我们再来做暂时显示水果的功能，题目的css文件里把水果使用display:none 隐藏了起来，所以我们需要先设置为block 然后再通过opacity来令他们消失
document.querySelectorAll('.img-box img').forEach((item)=>{
item.style.display = 'block'
setTimeout(()=>{
item.style.opacity = '0'
},500)
})
因为我们需要控制所有的img，就需要用到遍历，使用querySelectorAll找到dom结构，如果不知道该怎么准确的找到元素可以使用console.log大法来进行测试
setTimeout() 全局函数 - Web API 接口参考 | MDN (mozilla.org)
此时达到了我们预期的效果，点击开始按钮消失，并且水果暂时的显示在了屏幕上，题目并没有对css效果做出限制，所以也就可以不用写和gif一样的过渡效果
然后就是进行判断当前点击的两张图片是否是同一个水果的操作。刚刚已经提到我们可以利用alt进行对比，于是我们需要用到监听器来监听到鼠标点击动作，可以直接在现有的循环里直接监听，同样我们也可以使用console.log来确定我们是否找错了元素
item.addEventListener('click',()=>{
if(item.style.opacity=='0') {
arr.push(item)
item.style.opacity = '1'
}
})
这里我们利用判断当前的元素是否已经显示在页面上，来决定要不要将元素放入数组里，记得要在最顶上把数组定义好，然后再将该元素显示出来。
之后我们就应该进行判断了
if (arr.length >= 2) {
if (arr[0].alt === arr[1].alt) {
arr[0].parentElement.style.opacity = "0";
arr[1].parentElement.style.opacity = "0";
arr = [];
} else {
arr[0].style.opacity = "0";
arr[1].style.opacity = "0";
arr = [];
}
}
这里我们先判断数组内的元素是否已经有两个元素，这样我们才能继续对比然后对比这俩元素是否为相同的水果，如果是，我们就把当前元素的父元素透明度设置为0。
观察dom结构我们可以清楚的看到，此时的item也就是img是包裹在img-box里的，所以如果我们想要让方块消失，就必须控制它的父元素显示效果，然后我们再将数组清零，方便下一次操作。那么如果我们已经点击两个方块了，他们的不是一样的水果，就需要将他们再隐藏，同时也需要将数组清零，方便下一次操作
现在就剩下计分的需求了，由于每次判断后，分数就应该相应的发生变化，所以我们将分数的改变放到我们刚刚的判断里然后再渲染上去
if (arr.length >= 2) {
if (arr[0].alt === arr[1].alt) {
arr[0].parentElement.style.opacity = "0";
arr[1].parentElement.style.opacity = "0";
arr = [];
score += 2;
document.querySelector("#score").innerHTML = score;
} else {
arr[0].style.opacity = "0";
arr[1].style.opacity = "0";
arr = [];
score -= 2;
document.querySelector("#score").innerHTML = score;
}
}
至此完成题目所有要求，由于题目没有要求效果必须要和实例一样，所以我并没有留显示水果的时间，所以点击第二个水果的时候会出现看不到它的情况，代码直接就往下走继续判断了，实际上代码也是可以通过的，如果想要达到题目的效果，使用setTimeout() 就可以实现
完整代码如下：
// TODO：请补充代码
function startGame() {
let arr = []
let score = 0
document.querySelector('#start').style.display = 'none'
document.querySelectorAll('.img-box img').forEach((item)=>{
item.style.display = 'block'
setTimeout(()=>{
item.style.opacity = '0'
},500)
item.addEventListener('click',()=>{
if(item.style.opacity=='0') {
arr.push(item)
}
item.style.opacity = '1'
if(arr.length>=2){
if(arr[0].alt===arr[1].alt) {
arr[0].parentElement.style.opacity = '0'
arr[1].parentElement.style.opacity = '0'
arr = []
score+=2
document.querySelector('#score').innerHTML = score
}else {
arr[0].style.opacity = '0'
arr[1].style.opacity = '0'
arr = []
score-=2
document.querySelector('#score').innerHTML = score
}
}
})
})
}
