lianliankan:基于 HTML5 与原生 JavaScript 的消除类小游戏项目

连连看消除小游戏

分支1Tags0

🎯 连连看 Lianliankan

一个经典的连连看消除小游戏,纯 HTML/CSS/JavaScript 实现,无需任何依赖,浏览器直接打开即可游玩。

✨ 功能特性

  • 经典玩法:点击两个相同图案的方块,若可用不超过2个拐点的折线连接即可消除
  • 三档难度:简单(6×8) / 中等(8×10) / 困难(10×12)
  • 智能提示:有限次数提示,高亮可消除的方块对
  • 一键洗牌:当棋盘无解时自动洗牌,也可手动洗牌
  • 计时计分:实时显示用时、得分、剩余方块数
  • 路径动画:消除时显示连接路径,视觉效果好
  • 响应式布局:自适应不同屏幕宽度

🎮 游戏规则

  1. 棋盘上布满成对的图案方块
  2. 点击选中一个方块(红色高亮),再点击另一个相同图案的方块
  3. 如果两个方块之间可以用一条最多2个拐点的折线连接(且路径上没有其他方块阻挡),则两个方块消除
  4. 消除所有方块即获胜

🛠️ 技术栈

  • 纯 HTML5 + CSS3 + JavaScript(ES6)
  • Canvas API 绘制连接路径动画
  • 无任何外部依赖、无构建工具

📁 文件结构

lianliankan/
├── index.html      # 游戏主文件(包含全部HTML/CSS/JS)
└── README.md       # 项目说明

🚀 运行方式

直接用浏览器打开 index.html 即可开始游戏。

🔍 核心算法

寻路算法采用分类枚举法,按拐点数量分三种情况检查:

  1. 0拐点(直线):两点同行或同列,中间全为空
  2. 1拐点(L形):两个候选拐点 (r1,c2) 和 (r2,c1),检查是否可达
  3. 2拐点(U/Z形):遍历所有中间行/列,检查是否存在可行的中转路径

时间复杂度 O(R×C),对于 10×12 的棋盘完全足够。

📄 License

MIT

项目介绍

连连看消除小游戏

定制我的领域