蓝桥杯（Web大学组）2022国赛真题：水果消消乐

思路：

记录点击次数，点击次数为1时，记录点击下标（用于隐藏or消除）、点击种类，点击次数为2时，判断该下标所对应种类与第一次是否相同

相同：两个都visibility:hidden （占位）

不同：两个都display：none

遇到的bug:

一开始移除相同盒子之后会出现这个情况，以为是下标搞错了从而导致删成最后两个，后来转念一想，应该是因为每次删完后面所有盒子都会向前移动，所以不需要把外面盒子元素移除，只需要把外面盒子占位隐藏（使用visibility:hidden）

// TODO：请补充代码
function startGame() {
    //总分
    let score = document.querySelector('#score');   //存放分数的span
    let count = 0;  //分数

    let btn = document.querySelector('.btn');
    btn.style.opacity='0'//按钮隐藏
    
    let imgBox = document.querySelectorAll('.img-box');//装图片的盒子
    let img = document.querySelectorAll('img');//图片

    //题目的目标是图片出现后隐藏，一开始以为还要实现淡出淡入还有变大变小的效果，，(后面花太多时间没实现，去看了题目才发现。。。
    // img.forEach((item,index) => {
    //     item.style.transform = `transform: scale(${0})`
    //     item.style.transition = 'all 1s'
    // })
    img.forEach((item,index) => {
        
        item.style.display = 'block'
        // item.style.transform = `transform: scale(${1})`
        // item.style.opacity = 1
        //图片一开始出现后隐藏
        setTimeout(() =>{
            // item.style.transform = `transform: scale(${0})`
            item.style.display = 'none'
        },1000)
        // item.style.display = 'none'
        // item.style.transform = `transform: scale(${1})`
        
    })

    let cli = 0 //点击次数
    let preIndex = null  //上一次点击下标

    //遍历所有盒子
    for(let i = 0;i<imgBox.length;i++){
        let k = i   //记录所点击下标
        imgBox[i].addEventListener('click',()=>{
            img[i].style.display = 'block'  //图片出现
            cli++   //点击次数+1

            //判断点击次数，实现相应操作
            if(cli === 1){
                //记录第一次点击下标
                preIndex = k
            }
            if(cli === 2){
                //第二次判断是否相同
                if(img[i].alt === img[preIndex].alt){
                    setTimeout(() =>{
                        //相同：移除（×）
                        // container.removeChild(imgBox[preIndex])
                        // container.removeChild(imgBox[k])

                        //这里如果直接移除dom元素，会导致后面所有盒子都向前移动
                        //所以只需把外面盒子隐藏（占位）
                        imgBox[preIndex].style.visibility = 'hidden'
                        imgBox[k].style.visibility = 'hidden'
                    },1000)


                    //点击次数复原
                    cli = 0

                    //加2分
                    count+=2
                    score.innerHTML = count;
                }
                else{
                    setTimeout(() =>{
                        img[k].style.display = 'none';
                        img[preIndex].style.display = 'none'
                    },1000)
                    //点击次数复原
                    cli = 0

                    //减2分
                    count-=2
                    score.innerHTML = count;
                }
            }
        })
    }
}