蓝桥杯前端Web赛道-水果消消乐-编程知识

蓝桥杯前端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 = 0document.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+=2document.querySelector('#score').innerHTML = score}else {arr[0].style.opacity = '0'arr[1].style.opacity = '0'arr = []score-=2document.querySelector('#score').innerHTML = score}}})})
}