蓝桥杯(Web大学组)2022国赛真题:水果消消乐

news2025/1/19 11:17:15
思路:

记录点击次数,点击次数为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.coloradmin.cn/o/1441855.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

黄金交易策略(EA):三个仓位的设计是确保可以不停息做单

完整EA&#xff1a;Nerve Knife.ex4黄金交易策略_黄金趋势ea-CSDN博客

MacOS 查AirPods 电量技巧:可实现低电量提醒、自动弹窗

要怎么透过macOS 来查询AirPods 电量呢&#xff1f;当AirPods 和Mac 配对后&#xff0c;有的朋友想通过Mac来查询AirPods有多少电量&#xff0c;这个里有几个技巧&#xff0c;下面我们来介绍一下。 透过Mac 查AirPods 电量技巧 技巧1. 利用状态列上音量功能查询 如要使用此功能…

在django中集成markdown文本框

首先需要下载开源组件&#xff1a;http://editor.md.ipandao.com/&#xff0c;可能需要挂梯子。 百度网盘&#xff1a; 链接&#xff1a;https://pan.baidu.com/s/1D9o3P8EQDqSqfhAw10kYkw 提取码&#xff1a;eric 1.在html代码中生成一个div&#xff0c;ideditor <div c…

【玩转408数据结构】线性表——定义和基本操作

考点剖析 线性表是算法题命题的重点&#xff0c;该类题目实现相对容易且代码量不高&#xff0c;但需要最优的性能&#xff08;也就是其时间复杂度以及空间复杂度最优&#xff09;&#xff0c;这样才可以获得满分。所以在考研复习中&#xff0c;我们需要掌握线性表的基本操作&am…

Peter算法小课堂—枚举优化

哈哈哈&#xff0c;新年快乐&#xff01;这一次Peter将要给大家讲一讲轻松、摆烂的算法—枚举&#xff01;咋就是说呀&#xff0c;枚举这个玩意我语法就会了。但大家想想&#xff0c;咱们CSP考试时&#xff08;除了没过初赛的&#xff09;只给1秒&#xff0c;大家想想&#xff…

跟着cherno手搓游戏引擎【23】项目维护、2D引擎之前的一些准备

项目维护&#xff1a; 修改文件结构&#xff1a; 头文件自己改改就好了 创建2DRendererLayer&#xff1a; Sandbox2D.h: #pragma once #include "YOTO.h" class Sandbox2D :public YOTO::Layer {public:Sandbox2D();virtual ~Sandbox2D() default;virtual void O…

【lesson46】进程通信之system V(共享内存)

文章目录 共享内存通信原理用共享内存通信shmServer.ccshmClient.cc 完整通信代码common.hppLog.hppshmServer.ccshmClient.cc通信测试 共享内存借助管道添加访问控制common.hppshmServer.ccshmClient.cc 共享内存通信原理 两个进程将一块system V的物理地址通过页表映射到自己…

JSP编程

JSP编程 您需要理解在JSP API的类和接口中定义的用于创建JSP应用程序的各种方法的用法。此外,还要了解各种JSP组件,如在前一部分中学习的JSP动作、JSP指令及JSP脚本。JSP API中定义的类提供了可借助隐式对象通过JSP页面访问的方法。 1. JSP API的类 JSP API是一个可用于创建…

大模型学习 一

https://www.bilibili.com/video/BV1Kz4y1x7AK/?spm_id_from333.337.search-card.all.click GPU 计算单元多 并行计算能力强 指数更重要 A100 80G V100 A100 海外 100元/时 单卡 多卡并行&#xff1a; 单机多卡 模型并行 有资源的浪费 反向传播 反向传播&#xff08;B…

第6章 智能租房——前期准备

学习目标 了解智能租房项目&#xff0c;能够说出项目中各模块包含的功能 熟悉智能租房项目的开发模式与运行机制&#xff0c;能够复述项目的开发模式与运行机制 掌握智能租房项目的创建&#xff0c;能够独立创建智能租房项目 掌握智能租房项目的配置&#xff0c;能够为智能租…

教师考试,搜题软件哪个好用?大学生必备工具:搜题软件推荐 #微信#学习方法

在大学生的学习过程中&#xff0c;我们经常会遇到各种难题和疑惑。有时候&#xff0c;我们可能会花费大量的时间和精力去寻找答案&#xff0c;但结果却并不尽如人意。为了帮助大家更好地解决这个问题&#xff0c;今天我要向大家介绍几款备受大学生欢迎的搜题软件&#xff0c;它…

【NICN】探索牛客之求阶乘

1.题目描述 递归和非递归分别实现求n的阶乘&#xff08;不考虑溢出的问题&#xff09; 2.代码解题 2.1递归 递归思想&#xff1a; Fac(N) 1*2*3*……*N递归方式实现&#xff1a;1 N < 1 Fac(N)Fac(N-1)*N N > 2 long long Fac(int N) {if(N < 1)return 1;retu…

欢度春节,祝福万家。

值此春节佳节来临之际,新年问候如一道灯光&#xff0c;照亮我们前行的路。在这光芒中&#xff0c;期待与你携手走过新的一年。 春节是中华民族最重要的传统节日,它代表着新的开始和希望。在这个特殊的时刻,让我们放下过去的烦恼和忧虑,迎接新的挑战和机遇。让我们珍惜和家人团…

使用 Elasticsearch 和 OpenAI 构建生成式 AI 应用程序

本笔记本演示了如何&#xff1a; 将 OpenAI Wikipedia 向量数据集索引到 Elasticsearch 中使用 Streamlit 构建一个简单的 Gen AI 应用程序&#xff0c;该应用程序使用 Elasticsearch 检索上下文并使用 OpenAI 制定答案 安装 安装 Elasticsearch 及 Kibana 如果你还没有安装好…

Android性能调优 - 应用安全问题

Android应用安全 1.组件暴露&#xff1a; 像比如ContentProvider,BroadcastReceiver&#xff0c;Activity等组件有android:exported属性&#xff1b; 如果是私有组件 android:exported “false”&#xff1b; 如果是公有组件 android:exported “true” 且进行权限控制&…

Linux 存储管理(磁盘管理、逻辑卷LVM、交换分区swap)

目录 1.磁盘管理 1.1 磁盘简介 1.2 管理磁盘 添加磁盘 管理磁盘流程三步曲 1.查看磁盘信息 2.创建分区 3.创建文件系统 4.挂载mount 5.查看挂载信息 6.MBR扩展分区 7.重启后的影响 2.逻辑卷LVM 2.1 简介 ​​​​​​2.2 创建LVM 2.3 VG管理 2.4 LV管理实战-在…

单片机学习笔记---DS1302实时时钟工作原理

目录 DS1302介绍 学会读芯片手册&#xff08;DS1302芯片手册&#xff09; 封装 引脚定义 电源部分 时钟部分 通信部分 总结列表 内部结构图 电源控制部分 时钟控制部分 寄存器部分 访问部分 寄存器部分的详细定义 命令字 时序的定义 单字节读 单字节写 提前预…

qt/c++实现拓扑排序可视化

&#x1f482; 个人主页:pp不会算法^ v ^ &#x1f91f; 版权: 本文由【pp不会算法v】原创、在CSDN首发、需要转载请联系博主 &#x1f4ac; 如果文章对你有帮助、欢迎关注、点赞、收藏(一键三连)和订阅专栏哦 实现功能 1、选择文件导入初始数据 2、逐步演示 3、排序完成输出…

L1-096 谁管谁叫爹

一、题目 二、解题思路 依据题意判断即可。 三、代码 #include<iostream> using namespace std; #include<cmath> int main() {int n;cin>>n;while(n--){int n1,n2,s10,s20;cin>>n1>>n2;for(int i1;n1/i>0;i*10){s1(n1/i%10);}for(int i1;n…

FastDFS安装并整合Openresty

FastDFS安装 一、环境--centos7二、FastDFS--tracker安装2.1.下载2.2.FastDFS安装环境2.3.安装FastDFS依赖libevent库2.4.安装libfastcommon2.5.安装 libserverframe 网络框架2.6.tracker编译安装2.7.文件安装位置介绍2.8.错误处理2.9.配置FastDFS跟踪器(Tracker)2.10.启动2.11…