2048 小游戏
纯 HTML/CSS/JavaScript 实现的经典 2048 益智游戏，跟随博客玻璃拟态主题，支持键盘与触屏操作，记录历史最高分。
HTML CSS JavaScript
项目简介
经典益智游戏 2048 的网页复刻版，不依赖任何游戏引擎或第三方库， 用原生 HTML + CSS + JavaScript 从零实现，视觉上完全融入博客的玻璃拟态设计。
玩法
- 用方向键（或 WASD）/ 手指滑动，让所有方块朝一个方向移动
- 两个相同数字的方块相撞时合并为它们之和
- 每次移动后会随机出现一个新方块（90% 是 2，10% 是 4）
- 拼出 2048 即获胜，之后还可以继续挑战更高分
- 棋盘填满且无法合并时游戏结束
功能特性
- 🎯 当前分数 + 历史最高分（localStorage 持久化）
- 🎬 方块滑动、合并弹跳、出现动画
- 📱 桌面键盘 + 移动端滑动双操作
- 🌙 自动适配博客的深色模式
- 🏆 达成 2048 后可选择继续冲更高分
技术实现
- 棋盘定位：CSS 自定义属性（
--r/--c）+transform: translate()定位方块， JS 只改坐标变量，滑动动画由 CSStransition完成 - 合并算法：每条行/列朝移动方向”压紧 + 相邻配对合并”，每个方块每回合最多合并一次
- 状态管理：4×4 二维数组 + 少量标志位（胜利 / 继续 / 结束 / 动画锁）
- 持久化：最高分存
localStorage，带隐私模式降级处理 - 工程细节：适配 Astro 视图过渡（ClientRouter）的脚本生命周期，避免重复绑定事件