TapMe - 数字合并消除游戏

一个有趣的数字合并消除类游戏，玩家通过点击格子增加数字，连接相同数字进行消除，获得高分。

游戏规则

• 游戏开始时有一个5x5的棋盘，每个格子包含1-5的随机数字
• 玩家有5次点击机会，每次点击可以使格子中的数字+1
• 当3个或更多相同数字相连时，它们会被消除
  • 消除时，保留一个格子并使其数字+1
  • 其他格子消失，上方的数字会下落填充空位
  • 每次成功消除会奖励1次点击机会（最多5次）
• 游戏结束条件：用完所有点击次数且没有可消除的组合

技术实现

核心数据结构

const gameState = {
    board: [],          // 5x5棋盘数组
    clicksLeft: 5,      // 剩余点击次数
    maxClicks: 5,       // 最大点击次数
    boardSize: 5,       // 棋盘大小
    isAnimating: false, // 动画状态标记
    score: 0,          // 当前得分
    maxNumberInGame: 1  // 本局最大数字
}

主要功能模块

1. 游戏初始化

   • 创建随机棋盘
   • 确保初始状态没有可消除的组合
   • 支持从本地存储加载游戏进度

2. 点击处理

   • 增加被点击格子的数值
   • 检查并处理连通组
   • 更新剩余点击次数
   • 保存游戏状态

3. 消除机制

   • 查找所有连通的相同数字组
   • 处理消除动画效果
   • 计算得分
   • 更新最高记录

4. 重力系统

   • 处理数字下落填充空位
   • 实现平滑的动画效果

特色功能

1. 主题切换

   • 支持亮色/暗色主题
   • 自动检测系统主题偏好
   • 主题选择保存到本地存储

2. 本地存储

   • 保存游戏进度
   • 记录最高分和最大数字
   • 支持游戏状态恢复

3. 动画效果

   • 数字增加高亮效果
   • 消除合并动画
   • 数字下落动画
   • 得分弹出动画

4. 多语言支持

   • 支持中文和英文界面
   • 语言切换无需刷新页面

技术栈

• 原生JavaScript
• HTML5
• CSS3（动画、主题切换）
• LocalStorage（数据持久化）

开发亮点

1. 代码模块化

   • 清晰的功能划分
   • 独立的状态管理
   • 可维护的代码结构

2. 性能优化

   • 使用DocumentFragment优化DOM操作
   • 动画状态管理避免重复触发
   • 高效的连通组查找算法

3. 用户体验

   • 流畅的动画效果
   • 响应式设计
   • 直观的游戏规则说明
   • 实时进度和得分显示

未来展望

1. 添加更多游戏模式
2. 实现在线排行榜
3. 增加更多主题选项
4. 添加音效和背景音乐
5. 优化移动端体验

许可证

本项目基于MIT许可证开源。