【蓝桥杯web】2022年第十三届web大学组国赛：水果消消乐(真题解析)

    题目介绍：

消消乐是一款益智类休闲游戏，在排队等待做核酸的时候可以打开手机玩一会，陪你度过这漫长且无聊的等待期。

题目要求：

本题需要实现一款水果消消乐的游戏，在 4 X 4 的格子上，消除相同的水果得两分，否则扣两分，考验一下大家的记忆力，看看最后谁的分数最多。

准备：

开始答题前，需要先打开本题的项目文件夹，目录结构如下：

├── css
│   └── style.css
├── images
│   ├── apple.png
│   ├── cherry.png
│   ├── grape.png
│   ├── peach.png
│   ├── pear.png
│   ├── strawberry.png
│   ├── tangerine.png
│   └── watermelon.png
├── js
│   ├── index.js
│   └── jquery-3.6.0.min.js
├── effect.gif
└── index.html

其中：

• css/style.css 是样式文件。
• images 是图片文件夹。
• js/index.js 是实现游戏功能的 js 文件。
• js/jquery-3.6.0.min.js 是 jQuery 文件。
• effect.gif 是最终实现的效果动图。
• index.html 是主页面。

运行项目如下所示： 

当前出现的问题是：

1. 点击开始按钮未正常开始。
2. 点击方框内容无反馈。
3. 顶部分数并未变化。

目标：

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

1. 点击开始按钮后，该按钮被隐藏，方格上的图片显示后又隐藏。
2. 点击方格，方格中的图片显示，页面显示两张图片后，比较图片是否相同。
3. 如果图片上的水果相同，方格即可消除，并得 2 分；如果图片上的水果不相同，图片隐藏，并扣 2 分（分数可以为负数）。
4. 在文本 “当前分数为：” 的冒号后面会实时统计当前的得分情况。

解题思路：

隐藏开始按钮后，展示出所有img图片(使用1秒的延迟)，获取点击每个方块(class="img-box")对应的子项(也就是图片dom),当点击的方块内的图片是隐藏时，添加dom元素进imgs数组。

之后对imgs数组进行判断，如果长度大于2，则触发判断：

• 图片的alt相同，则判胜，分数+2，将父元素透明度置0，最后清空imgs数组；
• 图片的alt不相同，则判负，分数-2，隐藏当前图片，最后清空imgs数组；

JScript代码如下：

// TODO：请补充代码
var imgs=[]  //记录点击的2个dom
var score=0  //记录当前分数
function startGame() {
    $("#start").hide()
    $(".img-box img").show(1000)
    $(".img-box img").hide(1000)
    
    $(".img-box").bind("click",function(){
        let img=$(this.children[0])
        $("#"+img[0].id).show()

        if(!$(img).is(":hidden"))  //确保只有点击隐藏的img块才可操作
        {
            imgs.push(img[0])
        }
        if(imgs.length>=2)    //当前展示img数量大于2时，进行判断清除
        {
            if(imgs[0].alt==imgs[1].alt)  //如果2个img相同
            {
                setTimeout(()=>{
                    $("#"+imgs[0].id).parent().css("opacity","0")   //作透明处理，实为达到消除方块效果
                    $("#"+imgs[1].id).parent().css("opacity","0")   
                    imgs=[]      //清空dom记录
                    score+=2     //分数+2
                    $("#score").text(score)
                },500)
            }
            else                          //2个img不同
            {
                setTimeout(()=>{
                    $("#"+imgs[0].id).hide()         //隐藏
                    $("#"+imgs[1].id).hide()
                    imgs=[]
                    score-=2
                    $("#score").text(score)
                },500)
            }
            
        }
    })
}

第二种解法（思路一样，仅仅获取dom方式不同）

// TODO：请补充代码
var imgs=[]
var score=0
function startGame() {
    $("#start").hide()
    $(".img-box img").show(1000)
    $(".img-box img").hide(1000)

    $(".img-box").bind("click",(e)=>{
        let img=e.target
        $(`#${img.children[0].id}`).show()
        imgs.push(img.children[0].id)  //把图片id Push进去
        if(imgs.length>=2)
        {
            if($(`#${imgs[0]}`)[0].alt==$(`#${imgs[1]}`)[0].alt)
            {
                setTimeout(()=>{
                    $(`#${imgs[0]}`).parent().css("opacity","0")
                    $(`#${imgs[1]}`).parent().css("opacity","0")
                    imgs=[]
                    score+=2
                    $("#score").text(score)
                },500)
            }
            else
            {
                setTimeout(()=>{
                    $(`#${imgs[0]}`).hide()
                    $(`#${imgs[1]}`).hide()
                    imgs=[]
                    score-=2
                    $("#score").text(score)
                },500)
            }
        }
    })
}

大功告成！！

如有不合理的地方，欢迎各位大牛提出指正！

笔芯ღ( ´･ᴗ･` )