蓝桥杯前端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',