Repository Directory
Back to directory
dashhuang avatar

game-2048

- 键盘控制（桌面端）：使用方向键进行操作 - 触摸手势（移动端）：支持上下左右滑动手势 - 鼠标拖拽：桌面端也可使用鼠标拖拽操作 - 拖动预览（新功能）： - 手指或鼠标拖动时，可移动的砖块会实时跟随移动 - 带有缓动效果的流畅跟随动画 - 拖动过程中有轻微的缩放和旋转效果 - 未移动的砖块会变暗，突出显示正在移动的砖块 - 松开手指/鼠标后，砖块会快速滑动到目标位置. Read more below about its uses, features, and usage.

View on GitHub Visit website

Clone repository

git clone https://github.com/dashhuang/game-2048.git

0

Stars

1

Forks

0

Watchers

MIT

License

README

Read full README on GitHub →

2048游戏

一个优雅精致的2048游戏实现，支持桌面和移动设备，具有流畅的动画效果和直观的操作体验。

功能特性

核心功能

  • 经典2048游戏玩法：通过滑动合并相同数字，目标是创建2048方块
  • 分数系统：实时显示当前分数和历史最高分
  • 增强撤销系统：
    • 支持多步撤销（初始3次）
    • 每合成256的倍数获得额外撤销次数
    • 最多累计10次撤销
    • 撤销按钮显示剩余次数
  • 游戏状态：自动检测游戏胜利或失败状态

操作支持

  • 键盘控制（桌面端）：使用方向键进行操作
  • 触摸手势（移动端）：支持上下左右滑动手势
  • 鼠标拖拽：桌面端也可使用鼠标拖拽操作
  • 拖动预览（新功能）：
    • 手指或鼠标拖动时，可移动的砖块会实时跟随移动
    • 带有缓动效果的流畅跟随动画
    • 拖动过程中有轻微的缩放和旋转效果
    • 未移动的砖块会变暗，突出显示正在移动的砖块
    • 松开手指/鼠标后，砖块会快速滑动到目标位置

界面设计

  • 响应式布局：自适应不同屏幕尺寸
  • 液态玻璃效果（iOS 26风格）：
    • 半透明毛玻璃质感，高饱和度视觉效果
    • SVG滤镜创造真实的液体扭曲效果
    • feTurbulence生成柏林噪声纹理
    • feDisplacementMap实现背景扭曲变形
    • 动态参数控制，创造持续流动的液体效果
    • 合并时触发液态爆发动画
  • 优雅动画：
    • 新方块出现动画（缩放淡入效果）
    • 方块合并动画（弹跳效果 + 液态爆发）
    • 流畅的移动动画：方块从原位置平滑滑动到目标位置
    • 动画时序精确控制，确保视觉连贯性
  • 配色方案：采用经典2048配色，不同数字有独特的颜色标识

技术实现

文件结构

2048/
├── index.html      # 游戏主页面
├── style.css       # 样式文件
├── script.js       # 游戏逻辑
├── README.md       # 项目说明
└── liquid-glass/   # 液态玻璃效果示例代码
    ├── src/        # 源代码
    │   ├── index.html
    │   └── style.css
    └── dist/       # 构建输出

技术栈

  • HTML5：语义化标签，移动端视口优化，SVG滤镜
  • CSS3：
    • CSS Grid布局系统
    • CSS变量动态控制
    • backdrop-filter毛玻璃效果
    • mask-image液态边缘
    • 高级动画与过渡效果
  • 原生JavaScript：ES6类语法，事件监听，DOM操作
  • SVG滤镜：feTurbulence噪声生成，feDisplacementMap位移映射

液态玻璃效果技术解析

项目中的液态玻璃效果是通过SVG滤镜实现的，主要技术点包括：

  1. SVG位移映射（Displacement Mapping）

    <feDisplacementMap in="blur" in2="map" scale="1" 
                   xChannelSelector="R" yChannelSelector="G">
    • 使用位移映射图像的红色和绿色通道来控制像素的水平和垂直偏移
    • scale参数控制扭曲强度，可通过动画动态调整

  2. 高斯模糊预处理

    <feGaussianBlur in="SourceGraphic" stdDeviation="0.02" result="blur"/>
    • 对源图像应用轻微模糊，使扭曲效果更加平滑自然

  3. 动态交互效果

    • 鼠标悬停时通过SVG动画增加scale值（1→1.4）
    • 创造类似液体流动的视觉效果
    • 使用fill="freeze"保持动画结束状态

  4. CSS毛玻璃配合

    backdrop-filter: url(#frosted);
-webkit-backdrop-filter: url(#frosted);
    • 结合CSS的backdrop-filter和SVG滤镜
    • 实现背景扭曲而不影响前景元素

  5. 性能优化策略

    • 使用base64编码的位移映射图像，减少HTTP请求
    • backdrop-filter只影响背景，提高渲染效率
    • 合理的stdDeviation值避免过度计算

核心算法

  1. 移动算法：

    • 记录每个方块的原始位置和目标位置
    • 识别需要合并的方块对
    • 计算移动路径并生成动画序列

  2. 动画系统：

    • 使用CSS transition实现平滑移动（150ms）
    • 方块移动和合并动画分离处理
    • 保持DOM元素引用，避免重复创建和销毁
    • 精确的时序控制确保动画流畅

  3. 游戏状态检测：

    • 胜利条件：出现2048方块
    • 失败条件：无空格且无可合并方块

  4. 手势识别：

    • 计算滑动距离和方向
    • 设置最小滑动阈值（50px）

使用方法

本地运行

  1. 下载项目文件
  2. 在浏览器中打开 index.html
  3. 开始游戏！

游戏操作

  • 桌面端：使用键盘方向键或鼠标拖拽
  • 移动端：在游戏区域内滑动手指
  • 新游戏：点击"新游戏"按钮
  • 撤销：点击"撤销"按钮返回上一步

特色功能

增强撤销系统配置

游戏中的撤销系统可以通过修改以下变量进行自定义：

this.initialUndoCount = 3;      // 初始撤销次数
this.maxUndoCount = 10;         // 最大累计撤销次数
this.undoRewardValue = 256;     // 获得撤销奖励的方块值

数据持久化

  • 使用 localStorage 保存最高分
  • 刷新页面后最高分不会丢失

性能优化

  • 使用 CSS transform 实现动画，避免重排
  • 事件委托减少事件监听器数量
  • 防止触摸设备的默认滚动行为
  • 动画状态管理，防止操作冲突
  • 重复状态检查，优化历史栈存储
  • 液态玻璃效果优化：
    • 使用will-change提示浏览器优化
    • SVG滤镜硬件加速
    • 智能降级策略，不支持的浏览器自动关闭
    • 减少动画模式支持（prefers-reduced-motion）

用户体验

  • 清晰的视觉反馈
  • 流畅的交互动画
  • 直观的操作提示
  • 支持撤销操作，降低操作失误成本

浏览器兼容性

完整液态玻璃效果支持

  • Safari 15+（最佳效果）
  • Chrome 76+ / Edge 79+
  • Firefox 103+（需启用backdrop-filter）

降级支持

  • 旧版浏览器自动降级为经典纯色方块
  • 支持CSS.supports检测，确保游戏正常运行
  • prefers-reduced-motion用户可禁用动画效果

更新历史

v1.0 - 初始版本

  • 核心玩法: 实现经典2048游戏逻辑，包括分数系统、游戏状态检测。
  • 多平台操作: 支持桌面端键盘、鼠标拖拽及移动端触摸手势。
  • 响应式设计: 界面自适应不同屏幕尺寸。

v1.1 - 动画与视觉增强

  • 流畅动画: 优化方块的移动、合并与出现动画，提升视觉连贯性。
  • 液态玻璃效果:
    • 基于SVG滤镜（feTurbulence 和 feDisplacementMap）实现真实的液态扭曲效果。
    • 动态参数控制，创造持续流动的液体质感。
    • 合并方块时触发"液态爆发"动画。
    • 优化模糊与扭曲参数，实现类似iOS的视觉风格。
  • 界面风格统一:
    • 按钮和分数框均采用液态玻璃效果，实现统一的视觉语言。
    • 移除元素外部阴影，采用内部光泽和透明度塑造层次感。

v1.2 - 功能增强与体验优化

  • 增强撤销系统:
    • 支持多步撤销（初始3次，最多10次）。
    • 合成256的倍数时，奖励额外撤销次数。
    • 按钮实时显示剩余次数。
    • 撤销操作附带平滑的逆向动画。
  • 确定性撤销: 引入基于种子的伪随机数生成器，确保撤销后操作结果可重现。
  • 全屏操作:
    • 将触摸和鼠标事件监听扩展至全屏范围。
    • 降低滑动触发阈值，提升移动端操作便捷性。

v1.3 - 布局与兼容性修复

  • 布局修复:
    • 使用CSS Grid重构棋盘格，解决方块对齐问题。
    • 修复因display: flex导致的按钮垂直排列问题。
    • 统一界面元素尺寸，使布局更整洁。
  • 移动端优化:
    • 优化响应式布局，确保在iPhone等小屏幕设备上标题、分数框等元素能正确单行显示。
    • 修复页面滚动问题，实现固定视口。
    • 适配iPhone安全区域（刘海屏），实现真正的沉浸式全屏体验。
  • Bug修复:
    • 修复方块合并时后续方块位置计算错误的逻辑。
    • 解决撤销功能中出现的跳步、无效操作等问题。
    • 修复液态玻璃效果作用范围错误，防止UI元素被扭曲。

v1.4 - 拖动预览交互增强

  • 拖动预览效果:
    • 实现手指/鼠标拖动时砖块的实时跟随效果
    • 添加智能缓动系统，让跟随动作更加自然流畅
    • 拖动时可移动的砖块会有轻微的缩放和旋转动画
    • 未参与移动的砖块会自动变暗，提供清晰的视觉反馈
  • 交互优化:
    • 分离transform和position动画，避免冲突
    • 使用硬件加速优化拖动性能
    • 添加拖动状态管理，防止操作冲突
    • 支持触摸取消事件，提升稳定性
  • 视觉增强:
    • 拖动的砖块添加阴影效果，增强层次感
    • 优化光泽效果，让拖动的砖块更加突出
    • 使用requestAnimationFrame确保60fps的流畅动画

v1.4.1 - 移动端快速滑动优化

  • 快速滑动检测:
    • 添加滑动速度检测，200ms内完成的滑动视为快速滑动
    • 快速滑动时跳过拖动预览，直接执行移动
    • 优化触摸事件节流，减少性能开销
  • 性能优化:
    • 移除requestAnimationFrame在拖动预览中的使用
    • 添加拖动预览开关，可在低端设备上禁用
    • 优化CSS动画，添加will-change属性
    • 移动设备上简化视觉效果，提升响应速度
  • 体验改进:
    • 快速滑动时不再卡手，操作更加流畅
    • 保留慢速拖动的细腻预览效果
    • 平衡了视觉效果和性能表现

v1.5 - 技术研究与文档完善

  • 液态玻璃效果研究:
    • 添加liquid-glass示例代码，展示纯SVG滤镜实现的液态玻璃效果
    • 深入分析SVG位移映射（feDisplacementMap）技术原理
    • 研究高斯模糊与位移映射结合的视觉效果
    • 探索鼠标交互动画的实现方式
  • 技术文档完善:
    • 在README中添加液态玻璃效果的详细技术解析
    • 补充SVG滤镜的代码示例和参数说明
    • 记录性能优化策略和浏览器兼容性考虑
    • 更新项目文件结构说明