蓝桥杯(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;
                }
            }
        })
    }
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/379234.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

PV、UV、IP

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言1. PV1.1 PV 计算1.2 PV 的影响因素 2. UV2.1 UV 计算2.2UV 的影响因素 3. IP3.1 IP和UV①UV大于IP②UV小于IP 三者的关系PV 和 UV 前言 PV、UV、IP是我们在运…

网络学习:数据链路层VLAN原理和配置

一、简介&#xff1a; VLAN又称为虚拟局域网&#xff0c;它是用来将使用路由器的网络分割成多个虚拟局域网&#xff0c;起到隔离广播域的作用&#xff0c;一个VLAN通常对应一个IP网段&#xff0c;不同VLAN通常规划到不同IP网段。划分VLAN可以提高网络的通讯质量和安全性。 二、…

专业140+总分420+华中科技大学824信号与系统考研经验电子信息与通信工程,真题,大纲,参考书。

今年考研分数自己感觉还是比较满意&#xff0c;专业824信号与系统考的最好140&#xff0c;总分420&#xff0c;如愿上岸华科&#xff0c;回顾自己的这一年的复习&#xff0c;总结一些自己的经验&#xff0c;希望对报考华科的同学有帮助。 专业课&#xff1a; 824信号与系统在…

【高阶数据结构】位图布隆过滤器

文章目录 1. 位图1.1什么是位图1.2为什么会有位图1.3 实现位图1.4 位图的应用 2. 布隆过滤器2.1 什么是布隆过滤器2.2 为什么会有布隆过滤器2.3 布隆过滤器的插入2.4 布隆过滤器的查找2.5 布隆过滤器的模拟实现2.6 布隆过滤器的优点2.7 布隆过滤器缺陷 3. 海量数据面试题3.1 哈…

【C++11】右值引用 | 移动构造赋值 | 万能引用 | 完美转发

文章目录 一、引言二、左值和右值什么是左值什么是右值 三、左值引用和右值引用左值引用右值引用左值引用与右值引用的比较 四、右值引用的使用场景和意义左值引用的使用场景左值引用的短板用右值引用和移动语义解决上述问题移动构造移动赋值 右值引用引用左值 - std::move()ST…

spring boot学习第十二篇:mybatis框架中调用存储过程控制事务性

1、MySQL方面&#xff0c;已经准备好了存储过程&#xff0c;参考&#xff1a;MYSQL存储过程&#xff08;含入参、出参&#xff09;-CSDN博客 2、pom.xml文件内容如下&#xff1a; <?xml version"1.0" encoding"UTF-8"?> <project xmlns"…

3.4-媒资管理之视频处理+xx-job分布式任务

文章目录 媒资管理6 视频处理6.1 需求6.1.1 总体需求6.7.3 FFmpeg 的基本使用6.7.4 视频处理工具类 6.2 分布式任务处理6.2.1 什么是分布式任务调度6.2.2 XXL-JOB介绍6.2.3 搭建XXL-JOB6.2.3.1 调度中心6.2.3.2 执行器6.2.3.3 执行任务 6.2.4 分片广播 6.3 技术方案6.3.1 作业分…

Optimism为 CQT提供价值 20 万美元的生态系统资助,以表彰其支持

Covalent Network&#xff08;CQT&#xff09; 是 Web3 生态系统中关键的“数据可用性”层&#xff0c;在与 Optimism Collective 多年的合作中取得了骄人的成果。Covalent Network&#xff08;CQT&#xff09;对于 Optimism 跨链数据的增长产生了直接的影响&#xff0c;而这一…

Java并发基础:Deque接口和Queue接口的区别?

核心概念 Deque&#xff08;double ended queue&#xff0c;双端队列&#xff09;和Queue&#xff08;队列&#xff09;都是Java集合框架中的接口&#xff0c;它们用于处理元素的排队和出队&#xff0c;但是它们之间存在一些重要的区别&#xff0c;如下&#xff1a; 1、Queue…

C语言——oj刷题——调整数组使奇数全部都位于偶数前面

题目&#xff1a; 输入一个整数数组&#xff0c;实现一个函数&#xff0c;来调整该数组中数字的顺序使得数组中所有的奇数位于数组的前半部分&#xff0c;所有偶数位于数组的后半部分。 一、实现方法&#xff1a; 当我们需要对一个整数数组进行调整&#xff0c;使得奇数位于数…

Git详细讲解

文章目录 一、Git相关概念二、本地分支中文件的添加 、提交2.1 文件状态2.2 创建Git仓库2.2.1 git init2.2.2 git clone 2.3 添加操作(git add)2.4 提交操作&#xff08;git commit&#xff09;2.5 撤销操作2.5.1 撤销 add操作2.5.2 撤销 commit操作2.5.3 覆盖上一次的commit操…

机器学习系列——(十八)K-means聚类

引言 在众多机器学习技术中&#xff0c;K-means聚类以其简洁高效著称&#xff0c;成为了数据分析师和算法工程师手中的利器。无论是在市场细分、社交网络分析&#xff0c;还是图像处理等领域&#xff0c;K-means都扮演着至关重要的角色。本文旨在深入解析K-means聚类的原理、实…

EF Core 模型优先——根据类对象创建数据表

需要的nuget包&#xff1a; Microsoft.EntityframeworkCore.SqlServer &#xff08;根据自己的数据库类型选择对应的nuget包&#xff09; Microsoft.EntityframeworkCore.Tools Microsoft.VisualStudio.Web.CodeGeneration.Design 说明&#xff1a; &#xff08;1&#xf…

排序算法---插入排序

原创不易&#xff0c;转载请注明出处。欢迎点赞收藏~ 插入排序是一种简单直观的排序算法&#xff0c;它的基本思想是将待排序的元素分为已排序和未排序两部分&#xff0c;每次从未排序部分中选择一个元素插入到已排序部分的合适位置&#xff0c;直到所有元素都插入到已排序部分…

考研数据结构笔记(3)

顺序表存储结构 存储结构顺序结构定义基本操作的实现静态分配问题 动态分配代码功能 顺序表的特点: 顺序表小结顺序表的插入删除插入删除小结 顺序表的查找按位查找按值查找小结 存储结构 顺序结构 定义 线性表是具有相同数据类型的n(n>0)个数据元素的有限序列(每个数据元素…

大数据 - Spark系列《五》- Spark常用算子

Spark系列文章&#xff1a; 大数据 - Spark系列《一》- 从Hadoop到Spark&#xff1a;大数据计算引擎的演进-CSDN博客 大数据 - Spark系列《二》- 关于Spark在Idea中的一些常用配置-CSDN博客 大数据 - Spark系列《三》- 加载各种数据源创建RDD-CSDN博客 大数据 - Spark系列《…

vue3 之 组合式API—模版引用

模版引用的概念 通过ref标识获取真实的dom对象或者组件实例对象 如何使用&#xff08;以获取dom为例 组件同理&#xff09; 1️⃣调用ref函数生成一个ref对象 2️⃣通过ref标识绑定ref对象到标签 dom中使用 父组件中可以看到打印出来proxy里面只有一个属性&#xff0c;其他…

Vue中 常用的修饰符有哪些

Vue是一款建立在JavaScript框架上的开源前端库&#xff0c;已经成为当今前端开发人员最喜爱的选择之一。它的简洁语法和强大的功能使得开发者可以轻松地构建交互性的网页应用程序。在Vue中&#xff0c;修饰符是一个重要的概念&#xff0c;它们可以帮助我们更好地控制和定制DOM元…

wyh的迷宫

涉及知识点&#xff1a;求迷宫能否到达终点的&#xff0c;而不是求路径数的&#xff0c;用bfs时可以不用重置状态数组&#xff08;回溯&#xff09;。 题目描述 给你一个n*m的迷宫&#xff0c;这个迷宫中有以下几个标识&#xff1a; s代表起点 t代表终点 x代表障碍物 .代…

【多模态】27、Vary | 通过扩充图像词汇来提升多模态模型在细粒度感知任务(OCR等)上的效果

文章目录 一、背景二、方法2.1 生成 new vision vocabulary2.1.1 new vocabulary network2.1.2 Data engine in the generating phrase2.1.3 输入的格式 2.2 扩大 vision vocabulary2.2.1 Vary-base 的结构2.2.2 Data engine2.2.3 对话格式 三、效果3.1 数据集3.2 图像细粒度感…