蓝桥杯前端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 = 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
              }
            }
          })
    })
}