1. 项目概述与核心思路最近在整理自己的前端项目集翻到了一个几年前用 Next.js 和 TypeScript 重构的 2048 游戏。这个项目虽然不大但麻雀虽小五脏俱全从状态管理、动画交互到性能优化都踩过不少坑也积累了一些挺实用的心得。今天就来聊聊这个“two-thousand-forty-eight”项目它本质上是一个基于现代前端技术栈实现的经典益智游戏核心目标是通过键盘方向键移动方块合并相同数字最终尝试合成“2048”这个数字。这个项目特别适合两类朋友一是刚接触 Next.js 或 React 状态管理想找个有趣又不复杂的练手项目的前端新手二是对游戏逻辑实现、Canvas 绘图或交互动画感兴趣想看看具体怎么落地的开发者。别看游戏规则简单真要自己从头实现一套流畅的移动、合并动画并处理好复杂的棋盘状态里面有不少细节值得琢磨。我当初选择用 Next.js一方面是看中了它的服务端渲染能力可以为页面加载速度兜底另一方面也是想在一个相对完整的项目里实践 TypeScript 的严格类型约束这对于管理游戏状态这种复杂数据结构来说帮助巨大。2. 技术栈选型与项目架构解析2.1 为什么是 Next.js 而不是纯 React很多初学者可能会问一个单机游戏用 Create React App 不就够了吗为什么还要上 Next.js这里主要有几个考量。首先开发体验与约定优于配置。Next.js 开箱即用的路由系统基于文件系统、API Routes、以及内置的 Webpack 配置优化让我能更专注于游戏逻辑本身而不是没完没了地折腾构建配置。比如项目里用到的静态图片资源如游戏截图1.png直接放在public目录或者通过next/image组件引入Next.js 会自动处理优化和缓存省心不少。其次为可能的扩展留有余地。虽然当前版本是纯前端游戏但万一将来我想加入用户登录、保存最高分记录、甚至多人在线对战当然2048对战有点怪的功能Next.js 的 API Routes 可以让我在同一个项目里无缝开发后端逻辑而无需额外起一个 Express 或 Koa 服务。这种全栈能力在项目初期可能用不上但它提供了良好的架构弹性。最后性能与 SEO 的先天优势。即使是一个游戏初始 HTML 的快速加载和渲染SSR/SSG也能提升用户体验。Next.js 的静态导出功能next export能轻松生成纯静态文件部署到任何 CDN 上访问速度极快。这对于展示型项目或个人作品集来说是个很实际的优点。2.2 状态管理用 React Hooks 驾驭复杂游戏状态游戏的核心是状态一个 4x4 的棋盘每个格子可能为空也可能有一个带有数字如 2, 4, 8...的方块。此外还需要记录当前分数、历史最高分、游戏是否结束等状态。我放弃了 Redux 或 MobX 这类重型状态管理库选择纯粹使用React Hooks特别是useState和useReducer。为什么复杂度可控2048 的游戏状态虽然交互复杂但数据模型本身并不庞大。一个useReducer完全可以集中管理所有核心状态棋盘、分数、游戏状态其 reducer 函数正好对应了“移动”、“合并”、“添加新方块”、“重置游戏”等离散的“动作”逻辑清晰。性能优化直接对于棋盘这个核心状态我会使用useMemo来缓存派生数据例如“是否还有可移动的步数”的计算结果避免每次渲染都进行昂贵的遍历计算。动画相关的状态如方块滑动的起始和结束位置则可能使用useState或useRef单独管理与核心游戏状态解耦。TypeScript 绝配为useReducer定义明确的State类型和Action类型联合能让 TypeScript 在开发阶段就揪出潜在的状态更新错误比如尝试合并两个数字不同的方块。具体的状态结构设计大致如下interface Tile { id: string; value: number; // 2, 4, 8, 16... row: number; col: number; mergedFrom?: [string, string]; // 记录由哪两个方块合并而来用于动画 } interface GameState { board: (Tile | null)[][]; // 4x4 的二维数组 score: number; bestScore: number; isGameOver: boolean; hasWon: boolean; }2.3 工具链Cursor 编辑器与开发效率项目 README 里提到了cursor这个关键词。这并非一个前端库而是一款新兴的、集成了 AI 辅助编程功能的代码编辑器。我在后期维护和重构这个项目时确实尝试使用了 Cursor。它的AI 自动补全和代码理解能力在处理这种逻辑清晰的算法类代码时表现不错。例如当我在编写“向左移动”这个核心函数时只需要打出函数名和简要注释它就能基于上下文已有的状态接口、其他方向的移动函数生成大致的循环和合并逻辑框架我只需要微调边界条件和合并规则即可。这大大减少了重复性编码劳动。更重要的是它的“Chat with Workspace”功能。我可以直接向 AI 提问“这个moveTilesLeft函数的时间复杂度是多少有没有优化空间” 或者 “我想在方块合并时添加一个缩放动画用 CSS 怎么实现比较好”。AI 能基于我项目中的所有文件来回答给出的建议往往很具体、可操作。这对于独立开发者或者在小团队中快速探索解决方案非常有帮助。当然工具只是辅助最终的游戏逻辑严谨性、动画流畅度和代码结构还是需要开发者自己把控。但不可否认像 Cursor 这样的工具正在改变我们编写和思考代码的方式。3. 核心游戏逻辑实现详解3.1 棋盘初始化与随机方块生成游戏开始时棋盘上有两个随机位置的方块数字为 2 或 44 的出现概率较低例如10%。这个逻辑看似简单但实现时有几个关键点随机空位选择需要先找出所有为null的格子然后随机选取一个。这里要注意随机数的均匀分布避免使用有偏的随机方法。数字生成概率通常设定为 90% 概率生成 210% 概率生成 4。这直接影响了游戏初期的难度曲线。不可变性在 React 中更新状态时必须创建新的数组或对象。所以初始化不是直接修改board而是生成一个全新的 4x4 数组并在两个随机位置插入新的Tile对象。const initializeBoard (): GameState { const board: (Tile | null)[][] Array.from({ length: 4 }, () Array(4).fill(null)); const newState: GameState { board, score: 0, bestScore: 0, isGameOver: false, hasWon: false }; // 添加两个初始方块 return addRandomTile(addRandomTile(newState)); }; const addRandomTile (state: GameState): GameState { const emptyCells: [number, number][] []; state.board.forEach((row, r) { row.forEach((cell, c) { if (!cell) emptyCells.push([r, c]); }); }); if (emptyCells.length 0) return state; const [randRow, randCol] emptyCells[Math.floor(Math.random() * emptyCells.length)]; const value Math.random() 0.9 ? 2 : 4; const newTile: Tile { id: uuidv4(), value, row: randRow, col: randCol }; const newBoard state.board.map(row [...row]); // 浅拷贝每一行 newBoard[randRow][randCol] newTile; return { ...state, board: newBoard }; };注意这里使用map创建行的浅拷贝再替换特定元素是 React 中更新嵌套状态的常见模式。它保证了状态不可变能正确触发组件重渲染。3.2 移动与合并算法以“向左移动”为例这是游戏最核心的算法部分。以“向左移动”为例我们需要对每一行单独处理。逻辑可以分解为几个步骤过滤取出该行所有非空的方块。合并遍历这些方块如果当前方块与下一个方块数字相同则将它们合并。合并后下一个方块位置置空当前方块值翻倍分数增加。这里需要注意一次移动中一个方块只能被合并一次。例如[2, 2, 2, 2]向左移动应该变成[4, 4, 0, 0]而不是[8, 0, 0, 0]。这需要在合并后立即“跳过”被合并的下一个方块。填充将合并后的方块序列紧凑地排列在行首后面用null填充。生成新位置更新每个方块在棋盘上的新row和col坐标。这个坐标变化信息对于后续的滑动动画至关重要。const moveLeft (state: GameState): GameState { let newBoard state.board.map(row [...row]); // 拷贝棋盘 let scoreDelta 0; let moved false; for (let r 0; r 4; r) { const oldRow newBoard[r].filter(cell cell ! null); const newRow: (Tile | null)[] []; let i 0; while (i oldRow.length) { if (i 1 oldRow.length oldRow[i]!.value oldRow[i 1]!.value) { // 合并 const mergedValue oldRow[i]!.value * 2; scoreDelta mergedValue; newRow.push({ ...oldRow[i]!, id: uuidv4(), // 新合并的方块需要新ID value: mergedValue, mergedFrom: [oldRow[i]!.id, oldRow[i 1]!.id], // 记录合并来源 }); i 2; // 跳过被合并的方块 moved true; } else { // 不合并直接移动 newRow.push({ ...oldRow[i]!, mergedFrom: undefined }); if (oldRow[i]!.col ! newRow.length - 1) moved true; // 判断位置是否变化 i 1; } } // 填充剩余位置为 null while (newRow.length 4) { newRow.push(null); } // 更新方块的 col 坐标 newRow.forEach((cell, c) { if (cell) cell.col c; }); newBoard[r] newRow; } if (!moved) return state; // 如果没有发生任何移动或合并直接返回原状态 const newScore state.score scoreDelta; const newBestScore Math.max(newScore, state.bestScore); let newState { ...state, board: newBoard, score: newScore, bestScore: newBestScore }; // 移动后添加一个新的随机方块 newState addRandomTile(newState); // 检查游戏是否结束 newState checkGameOver(newState); return newState; };其他三个方向的移动原理类似只是遍历和填充的方向不同。向上移动相当于将棋盘转置后向左移动然后再转置回来。这是一种代码复用的技巧。3.3 游戏结束判定游戏结束的条件是棋盘已满没有空格子且任意相邻的两个方块上下左右数字都不相同。实现时需要遍历整个棋盘const checkGameOver (state: GameState): GameState { const { board } state; // 1. 检查是否有空格子 for (let r 0; r 4; r) { for (let c 0; c 4; c) { if (!board[r][c]) return { ...state, isGameOver: false }; // 有空位游戏继续 } } // 2. 检查相邻格子是否可合并 const directions [ [0, 1], // 右 [1, 0], // 下 ]; for (let r 0; r 4; r) { for (let c 0; c 4; c) { const current board[r][c]; for (const [dr, dc] of directions) { const nr r dr; const nc c dc; if (nr 4 nc 4 board[nr][nc] board[nr][nc]!.value current!.value) { return { ...state, isGameOver: false }; // 有可合并的相邻方块游戏继续 } } } } // 3. 以上都不满足游戏结束 return { ...state, isGameOver: true }; };实操心得游戏结束判定是一个相对耗时的操作O(n^2)不应该在每次渲染时都进行。我通常会在useReducer的move动作处理完之后调用一次或者使用useEffect依赖棋盘状态来执行避免阻塞主线程影响动画流畅度。4. 动画与交互实现的关键细节4.1 方块滑动动画CSS Transition 与 FLIP 策略让方块平滑地从一个格子移动到另一个格子是提升游戏体验的关键。我采用了CSS Transition结合FLIP 动画策略来实现。FLIP是 First, Last, Invert, Play 的缩写是一种高性能的动画技术。First记录方块移动前的位置初始位置。Last执行状态更新如moveLeft让 React 渲染出方块移动后的新位置最终位置。Invert计算初始位置和最终位置的差值例如向左移动了2格每格宽80px则差值deltaX -160px。然后在动画开始前通过transform: translate(-160px, 0)将方块“拉回”到初始位置。此时视觉上方块还在老地方。Play移除这个transform属性并为其添加transition: transform 0.15s ease。浏览器会自动计算将方块从“拉回”的位置视觉上的老位置平滑地过渡到实际的新位置transform: none从而产生滑动效果。在 React 中实现需要借助useRef来保存每个方块 DOM 元素的引用并在useEffect或useLayoutEffect中执行“Invert”和“Play”的逻辑。为了简化我使用了react-spring或framer-motion这类动画库它们内部封装了 FLIP 逻辑声明式 API 用起来更方便。// 使用 framer-motion 的简化示例 import { motion } from framer-motion; const TileComponent ({ tile }: { tile: Tile }) { // 根据 tile.row 和 tile.col 计算网格位置 const x tile.col * TILE_SIZE; const y tile.row * TILE_SIZE; return ( motion.div classNametile initial{{ x, y, scale: 0 }} // 初始位置对于新生成的方块scale从0开始 animate{{ x, y, scale: 1 }} // 目标位置 transition{{ type: spring, stiffness: 300, damping: 25 }} // 弹簧动画效果更生动 style{{ position: absolute, // ... 其他样式如根据 tile.value 设置背景色和字体颜色 }} {tile.value} /motion.div ); };4.2 合并动画缩放与渐隐当两个方块合并时视觉上应该有一个“砰”一下变大的效果然后新方块出现旧方块消失。这里可以用两个动画叠加被合并的方块添加一个scale(0)并opacity: 0的动画持续约 0.1 秒快速缩小并消失。新生成的方块从scale(0)到scale(1)的动画持续约 0.15 秒有弹性效果更好。同时可以短暂地改变背景色例如闪一下白色或金色强调合并事件。在代码中需要根据tile.mergedFrom属性来判断哪些方块需要播放消失动画。新生成的方块无论是随机生成还是合并产生都播放出现动画。4.3 键盘与触摸事件处理为了良好的跨平台体验需要同时处理键盘事件和触摸事件。键盘事件监听keydown事件对应ArrowUp,ArrowDown,ArrowLeft,ArrowRight来触发相应的移动函数。这里务必注意防抖Debounce或节流Throttle。玩家可能快速连按方向键如果不加控制会导致状态更新过快动画队列堆积游戏响应卡顿。我通常使用一个标志位isMoving在移动动画开始前设为true结束后设为false只有isMoving为false时才接受新的键盘输入。触摸事件实现滑动手势。在touchstart时记录起始坐标在touchend时记录结束坐标。计算 X 轴和 Y 轴的移动距离差deltaX,deltaY。如果Math.abs(deltaX) Math.abs(deltaY)则认为是水平滑动否则是垂直滑动。再根据正负值判断左右或上下方向。这里需要一个最小滑动距离阈值如 30px以避免误触。const handleTouchStart (e: React.TouchEvent) { const touch e.touches[0]; startX.current touch.clientX; startY.current touch.clientY; }; const handleTouchEnd (e: React.TouchEvent) { if (!startX.current || !startY.current) return; const touch e.changedTouches[0]; const deltaX touch.clientX - startX.current; const deltaY touch.clientY - startY.current; const minSwipeDistance 30; if (Math.abs(deltaX) Math.abs(deltaY) Math.abs(deltaX) minSwipeDistance) { // 水平滑动 dispatch({ type: deltaX 0 ? MOVE_RIGHT : MOVE_LEFT }); } else if (Math.abs(deltaY) minSwipeDistance) { // 垂直滑动 dispatch({ type: deltaY 0 ? MOVE_DOWN : MOVE_UP }); } // 重置起始点 startX.current null; startY.current null; };5. 性能优化与部署实践5.1 避免不必要的渲染React.memo 与 useMemo棋盘组件Board由 16 个格子Cell和若干个方块Tile组成。每次移动后只有部分Tile的位置和值发生变化很多Cell和未变化的Tile并不需要重新渲染。Tile组件使用React.memo包裹并自定义比较函数只有当其核心属性id,value,row,col发生变化时才重新渲染。Board组件使用useMemo缓存计算出的棋盘网格布局样式。useReducer返回的dispatch函数通常是稳定的可以直接传递给子组件而无需担心引用变化。事件处理函数使用useCallback包裹键盘和触摸事件处理函数避免因函数引用变化导致子组件无意义的重渲染。5.2 状态持久化保存最高分使用localStorage在本地浏览器中保存bestScore。在useEffect中当bestScore更新时将其存入localStorage。在游戏初始化时从localStorage中读取并设置初始的bestScore。注意做好错误处理因为用户可能禁用localStorage。// 读取 const [state, dispatch] useReducer(gameReducer, undefined, () { const savedBestScore typeof window ! undefined ? parseInt(localStorage.getItem(2048-bestScore) || 0, 10) : 0; return { ...initialState, bestScore: savedBestScore }; }); // 写入在 gameReducer 中更新 bestScore 时或在 useEffect 中监听 useEffect(() { if (typeof window ! undefined) { localStorage.setItem(2048-bestScore, state.bestScore.toString()); } }, [state.bestScore]);5.3 使用 Next.js 的静态导出与部署由于这个游戏是完全静态的我们可以使用next export命令来生成纯 HTML、CSS、JS 文件。在next.config.js中确保没有配置target: server。在package.json中添加脚本export: next build next export。运行npm run export。这会在项目根目录生成一个out文件夹。将out文件夹内的所有内容部署到任何静态网站托管服务如Vercel原生支持 Next.js一键部署、GitHub Pages、Netlify或Cloudflare Pages。部署到 Vercel 是最无缝的体验。只需将代码推送到 GitHub然后在 Vercel 中导入仓库它会自动检测为 Next.js 项目并完成构建和部署。每次git push都会触发自动更新。5.4 使用 Cursor 进行代码重构与维护在项目后期我使用 Cursor 进行了一些重构工作。例如代码提问将复杂的moveLeft函数粘贴到 Cursor Chat 中询问“如何将这个函数重构得更易读”。它会建议将过滤、合并、填充等步骤拆分成独立的纯函数并给出示例代码。类型安全增强让 Cursor 检查整个项目的 TypeScript 类型找出不严谨的any类型或潜在的类型冲突并给出修正建议。生成测试用例输入“为checkGameOver函数生成 Jest 测试用例”它能快速生成覆盖棋盘满、棋盘未满但不可移动、棋盘未满且可移动等多种场景的测试代码框架。6. 常见问题与排查技巧实录在开发和调试过程中我遇到了不少典型问题这里记录下排查思路和解决方法。6.1 动画卡顿或闪烁问题现象方块移动时动画不流畅有跳帧或闪烁感。排查与解决检查 CSS 属性确保对动画元素使用的是transform和opacity属性。这两个属性可以由 GPU 加速性能远优于改变top/left或width/height。减少复合层为动画元素添加will-change: transform;提示浏览器。但不要滥用仅对正在动画的元素使用。避免布局抖动在动画进行期间不要进行会导致浏览器重新计算布局Layout的操作。例如不要在动画帧中读取offsetWidth、offsetHeight等属性。我的 FLIP 实现中getBoundingClientRect()的读取First 和 Last 阶段应放在动画开始前一次性完成。使用requestAnimationFrame如果自己控制动画循环务必使用requestAnimationFrame来同步浏览器的重绘周期。简化 DOM 结构检查每个方块的 DOM 结构是否过于复杂嵌套过深或样式过多都会影响渲染性能。6.2 移动后状态未正确更新问题现象按下方向键分数变了但方块没有移动或者移动逻辑错误例如该合并的没合并。排查与解决Reducer 纯函数检查确保gameReducer是纯函数每次都必须返回一个新的状态对象而不是修改原状态。使用扩展运算符...state或Immer库来帮助实现不可变更新。移动有效性判断在moveLeft等函数中必须有moved标志位。只有当一个方块的位置发生变化或发生合并时moved才为true。如果moved为false则不应该添加新方块否则会导致玩家按无效方向键时棋盘被新方块填满。深度对比依赖如果使用了useEffect来触发某些副作用如保存分数其依赖数组[state.board, state.score]要小心。因为每次移动都会生成全新的board数组即使内容可能一样这会导致useEffect频繁执行。可以考虑使用useMemo计算一个更稳定的依赖值或者使用useRef记录上一次的有效状态进行比较。键盘事件冲突检查是否有其他全局事件监听器阻止了键盘事件的默认行为或冒泡。6.3 触摸滑动不灵敏或误触发问题现象在手机上滑动有时没反应有时又过于敏感上下滑动容易误判为左右。排查与解决调整阈值minSwipeDistance这个阈值需要根据实际设备 DPI 和用户习惯调整。30px 是个不错的起点但可以在游戏设置里让用户微调或者根据设备像素比动态计算。防止滚动穿透当在游戏区域触摸时应调用e.preventDefault()来阻止页面的默认滚动行为。但要注意在touchmove事件中调用preventDefault可能会影响后续的滚动通常只在touchstart中根据情况判断是否阻止。使用专业库对于更复杂的手势如长按、双指缩放建议直接使用react-use-gesture这样的手势库它封装了跨平台的手势识别逻辑比自己处理触摸事件更稳健。6.4 部署后静态资源加载失败问题现象本地开发npm run dev一切正常但部署后图片、CSS 或 JS 文件 404。排查与解决路径问题Next.js 项目在导出静态文件时默认假设应用被部署在域名的根路径。如果你的应用部署在子路径如https://yourname.github.io/2048-game/需要在next.config.js中配置basePath。module.exports { basePath: process.env.NODE_ENV production ? /2048-game : , assetPrefix: process.env.NODE_ENV production ? /2048-game : , };public文件夹内容确保所有静态资源如图片都放在public目录下并通过/image.png这样的绝对路径引用。Next.js 在构建时会自动将它们复制到out目录的正确位置。检查构建输出运行npm run build和npm run export后仔细查看终端有无错误或警告。并检查生成的out文件夹看预期的文件是否都存在。服务器配置如果部署到自定义服务器如 Nginx需要确保服务器正确配置了对于out目录下所有文件的 MIME 类型并对index.html设置了正确的缓存策略。这个 2048 项目虽然代码量不大但完整地走了一遍现代前端开发的流程从技术选型、状态设计、核心算法实现到交互动画、性能优化和最终部署。每一个环节都有值得深入思考和优化的地方。