连连看消除小游戏
当前访问频次受限,请登录后继续访问
🎯 连连看 Lianliankan
一个经典的连连看消除小游戏,纯 HTML/CSS/JavaScript 实现,无需任何依赖,浏览器直接打开即可游玩。
✨ 功能特性
- 经典玩法:点击两个相同图案的方块,若可用不超过2个拐点的折线连接即可消除
- 三档难度:简单(6×8) / 中等(8×10) / 困难(10×12)
- 智能提示:有限次数提示,高亮可消除的方块对
- 一键洗牌:当棋盘无解时自动洗牌,也可手动洗牌
- 计时计分:实时显示用时、得分、剩余方块数
- 路径动画:消除时显示连接路径,视觉效果好
- 响应式布局:自适应不同屏幕宽度
🎮 游戏规则
- 棋盘上布满成对的图案方块
- 点击选中一个方块(红色高亮),再点击另一个相同图案的方块
- 如果两个方块之间可以用一条最多2个拐点的折线连接(且路径上没有其他方块阻挡),则两个方块消除
- 消除所有方块即获胜
🛠️ 技术栈
- 纯 HTML5 + CSS3 + JavaScript(ES6)
- Canvas API 绘制连接路径动画
- 无任何外部依赖、无构建工具
📁 文件结构
lianliankan/
├── index.html # 游戏主文件(包含全部HTML/CSS/JS)
└── README.md # 项目说明
🚀 运行方式
直接用浏览器打开 index.html 即可开始游戏。
🔍 核心算法
寻路算法采用分类枚举法,按拐点数量分三种情况检查:
- 0拐点(直线):两点同行或同列,中间全为空
- 1拐点(L形):两个候选拐点 (r1,c2) 和 (r2,c1),检查是否可达
- 2拐点(U/Z形):遍历所有中间行/列,检查是否存在可行的中转路径
时间复杂度 O(R×C),对于 10×12 的棋盘完全足够。
📄 License
MIT