思路:
记录点击次数,点击次数为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;
                }
            }
        })
    }
}


















