【蓝桥web赛道】水果消消乐

// TODO：请补充代码
function startGame() {
    let arr = []; // 用于存储点击的图片元素
    let score = 0; // 初始化分数为 0

    // 隐藏开始按钮
    document.querySelector('#start').style.display = 'none';

    // 遍历所有图片元素
    const imgElements = document.querySelectorAll('.img-box img');
    imgElements.forEach((item) => {
        item.style.display = 'block'; // 显示图片

        // 设置定时器，500毫秒后将图片透明度设为0
        setTimeout(() => {
            item.style.opacity = '0';
        }, 500);

        // 添加点击事件监听器
        item.addEventListener('click', handleItemClick);
    });

    function handleItemClick(event) {
        const item = event.target;
        if (item.style.opacity === '0') {
            arr.push(item); // 如果图片透明度为0，将其添加到数组中
            item.style.opacity = '1'; // 显示图片

            // 如果数组中已经有两张图片
            if (arr.length >= 2) {
                disableClicks(); // 禁用点击事件

                if (arr[0].alt === arr[1].alt) {
                    // 如果两张图片的alt属性相同，隐藏它们的父元素
                    setTimeout(() => {
                        arr[0].parentElement.style.opacity = '0';
                        arr[1].parentElement.style.opacity = '0';
                        arr = []; // 清空数组
                        score += 2; // 增加分数
                        updateScore(score); // 更新分数显示
                        enableClicks(); // 启用点击事件
                    }, 1000); // 延迟1秒后隐藏图片
                } else {
                    // 如果两张图片的alt属性不同，将它们的透明度设为0
                    setTimeout(() => {
                        arr[0].style.opacity = '0';
                        arr[1].style.opacity = '0';
                        arr = []; // 清空数组
                        score -= 2; // 减少分数
                        updateScore(score); // 更新分数显示
                        enableClicks(); // 启用点击事件
                    }, 1000); // 延迟1秒后隐藏图片
                }
            }
        }
    }

    function disableClicks() {
        imgElements.forEach((item) => {
            item.removeEventListener('click', handleItemClick);
        });
    }

    function enableClicks() {
        imgElements.forEach((item) => {
            item.addEventListener('click', handleItemClick);
        });
    }

    function updateScore(newScore) {
        document.querySelector('#score').innerHTML = newScore;
    }
}