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

前言

日更挑战接近尾声，本就不富裕的才思更是日渐枯竭，故写一写小游戏来完成任务，连连看的游戏规则是玩家将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