蓝桥杯web每日一题------水果叠叠乐(模拟赛第一期)_蓝桥杯web真题水果叠叠乐-CSDN博客

本文链接：https://blog.csdn.net/qq_57174393/article/details/129918050

本文介绍了一个名为‘水果叠叠乐’的益智游戏开发，游戏规则是点击页面上的水果将其添加到下方格子，当格子中有三个相同水果时自动消除。利用jQuery或JavaScript，需实现点击水果元素的动态效果以及消除逻辑，同时处理满格无法再添加的情况。代码示例展示了如何使用jQuery添加和删除元素节点。

摘要由CSDN通过智能技术生成

题目：水果叠叠乐

介绍

消消乐是一款益智类小游戏，最近比较火爆的一种是立体叠叠乐式的，然后小蓝也想开发一个自己练练手，给它起名叫“水果叠叠乐”。

准备

本题已经内置了初始代码，打开实验环境，目录结构如下：
├── css
│ └── style.css
├── images
├── index.html
└── js
└── jquery.min.js
其中：

index.html 是主页面。
js/jquery.min.js 是 jQuery 文件。
images 是图片文件夹。
css/style.css 是样式文件。
选中 index.html 右键启动 Web Server 服务（Open with Live Server），让项目运行起来。

接着，打开环境右侧的【Web 服务】，就可以在浏览器中看到如下效果：
在这里插入图片描述

目标

点击页面上方的水果元素，水果会进入到下方的格子中。当格子中有三个相同水果时会自动消除。格子最多放 7 个水果，当格子中水果为 7 个且无法消除时，点击上方水果元素将不在有任何效果。请使用 jQuery 或者 js ，完成 index.html 文件中的 TODO 部分。

页面上方 id=card 中 DOM 元素中的水果元素点击消失的动画效果已在代码中给出，无需操作。
每次点击页面上方水果元素需要在页面下方的长方格（ id=box ）元素中添加该元素节点，当下面长方格中有三个相同的水果元素时，从盒子元素删除这三个相同的水果元素节点。
当页面下方的长方格（ id=box ）元素中的水果为 7 个且无法消除时，被点击的水果元素节点不在被添加长方格元素中。
完成后，最终页面效果如下：
可消除效果如下：在这里插入图片描述
不可消除效果如下：

判定

禁止以任何形式（除克隆外）修改页面上方（即 id = card )的 DOM 元素及其子节点。
请严格按照考试步骤操作，切勿修改考试默认提供项目中的文件名称、文件夹路径等，以免造成无法判题通过。

本题有很多思路，clone节点，纯js写，jquery选择器等知识可以写，我这次先用js写一下。

下面展示一些 内联代码片。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>水果叠叠乐</title>
    <script src="./js/jquery.min.js"></script>
    <link rel="stylesheet" href="./css/style.css" />
  </head>
  <body>
    <div id="stars"></div>
    <div id="stars2"></div>
    <div id="stars3"></div>
    <ul id="card">
      <li data-id="1" id="fruit-one">
        <img src="./images/pineapple.svg" alt="" />
      </li>
      <li data-id="1" id="fruit-two">
        <img src="./images/pineapple.svg" alt="" />
      </li>
      <li data-id="2" id="fruit-three">
        <img src="./images/apple.svg" alt="" />
      </li>
      <li data-id="2" id="fruit-four">
        <img src="./images/apple.svg" alt="" />
      </li>
      <li data-id="2" id="fruit-five">
        <img src="./images/apple.svg" alt="" />
      </li>
      <li data-id="1" id="fruit-six">
        <img src="./images/pineapple.svg" alt="" />
      </li>
      <li data-id="3" id="fruit-seven">
        <img src="./images/avocado.svg" alt="" />
      </li>
      <li data-id="3" id="fruit-eight">
        <img src="./images/avocado.svg" alt="" />
      </li>
      <li data-id="3" id="fruit-nine">
        <img src="./images/avocado.svg" alt="" />
      </li>
      <li data-id="4" id="fruit-ten">
        <img src="./images/grapes.svg" alt="" />
      </li>
      <li data-id="4" id="fruit-eleven">
        <img src="./images/grapes.svg" alt="" />
      </li>
      <li data-id="4" id="fruit-twelve">
        <img src="./images/grapes.svg" alt="" />
      </li>
    </ul>
    <!-- 图片位置 -->
    <!-- 卡槽位置 -->
    <div class="fixed">
      <div class="gradient-border" id="box"></div>
    </div>
    <script>
      $("#card li").on("click", function (e) {
        // TODO: 待补充代码
    // 先做判断如果卡槽里面的数量小于7执行下面代码
       if(document.querySelectorAll('#box li').length<7){
        // 这里可以先打印一下e，看一下里面的参数
        console.log(e)
        // append方法可以在指定元素后面追加元素,这里的delegateTarget事e的参数
        $('#box').append(e.delegateTarget)
        // 这里打印一下可以看到每次加入的水果信息
        // console.log(document.querySelectorAll('#box li'))
        // 进行一次for循环，通过属性选择器获取下方卡槽所有自定义属性id相同的节点
        for(var i=1;i<=4;i++){
          const lis=document.querySelectorAll(`#box li[data-id='${i}']`)
          // 打印一下，可以看到加入的水果id节点信息
          console.log(lis);
          // 判断如果长度为三个相同的时候
          if(lis.length==3){
            // 进行循环，保证三个item相同，并且相同时执行函数
           lis.forEach(item=>{
            // 调用remove函数进行html上删除这样就可以删除了
            item.remove()
           })

          }
        }

       }
       
       
      });
    </script>
  </body>
</html>