基于Jquery实现一个连连看小游戏,我赌你连普通级也过不去

东方睡衣

于 2022-09-20 13:47:19 发布

阅读量1k

点赞数

文章标签： jquery javascript html

本文链接：https://blog.csdn.net/web2022050903/article/details/126951591

版权

本文介绍了如何使用jQuery实现一个连连看小游戏，包括牌面容器的创建、连连看图片的生成、选中逻辑的添加、动效的实现以及趣味性的增强。通过事件代理处理用户交互，结合CSS3实现动态效果，提供不同难度级别的挑战。

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

前言

日更挑战接近尾声，本就不富裕的才思更是日渐枯竭，故写一写小游戏来完成任务，连连看的游戏规则是玩家将2个相同图案连接起来，第一次使用鼠标点击牌池里的图案，该图案此时为“被选中”，图案四周有光环围住，再用鼠标点击你所看到的另一个相同图案，并把这两个图案连起来，而且中间的连线不能超过三根，这样就可以消掉这两个相同的图案。

实现

牌面容器实现

这个很简单，一张背景图，一个水平垂直居中的div，然后flex布局即可。

 <divclass="box"id="box"></div><style> * {margin: 0;padding: 0;list-style: none;box-sizing: border-box;}html,body {width: 100%;height: 100%;overflow: auto;background-image: url('./bg1.jpeg');background-size: cover;}.box {width: 800px;height: 800px;display: flex;justify-content: flex-start;align-content: flex-start;flex-wrap: wrap;position: absolute;top: 0;left: 0;right: 0;bottom: 0;margin: auto;transform-style: preserve-3d;}.box .item {border-radius: 8px;background: #fff;border: 1px solid #f4f4f4;cursor: pointer;color: #333;font-size: 20px;te