2048小游戏

技术栈

• 前端：HTML、CSS、JavaScript
• 后端：Node.js、Express
• 数据库：MongoDB
• 部署：github pages

游戏玩法规则

基本操作

1. 开始游戏

   • 点击"newGame"按钮初始化游戏
   • 初始棋盘随机生成两个数字（2或4）

2. 移动控制

   • 使用键盘方向键 ↑ ↓ ← → 控制方块移动并且额外随机生成一个数字（2或4）
   • 所有方块会朝指定方向滑动直到遇到边界或其他方块

3. 合并规则

   • 相同数字的相邻方块在碰撞时会合并
   • 合并后数字翻倍（例如：2+2=4，4+4=8）
   • 单次移动中每个方块只能合并一次

得分系统

• 每次合并操作获得等同于合并后数字的分数 示例：合并两个4得4分，合并两个8得8分
• 历史最高分自动保存并显示在排行榜
• 当前得分超过历史记录时自动更新

自动结束条件

• 当棋盘填满且无合法移动时游戏结束

遇到的问题

• 代码：
  • 合并规则：在合并方块时，需要判断是否有其他方块可以合并，以及合并的顺序。
  • 动画：移动动画，以及抖动动画
• 首屏性能问题
  • 豆包生成背景图，刚开始图片太大，导致首屏加载缓慢，压缩后解决

后续优化

• 连续合并的bug（偶现）
  • 如果碰到 4 4 8，此时按右方向键，可能会出现连续合并为一个 16，合并的逻辑有点复杂，暂时还没解决
• 给榜单的用户都加上《所在城市》，增加参与感
  • 本身匿名用户是通过 ip地址+uuid 计算出的，可以通过 ip 地址拿到用户所在城市
• 主 JS 文件的代码量比较多，需要进行拆分抽象