第 8 周：2048 蓝湖设计图还原与验收

本周目标

本周完成后，应能够：

  • 使用第 7 周完成的计分与重新开始功能，完成完整游戏流程
  • 使用本地存储保存并恢复最高分
  • 根据提供的 2048 蓝湖设计图完成游戏界面还原
  • 编写稳定、不因数字和状态变化而错位的游戏界面
  • 为核心规则设计并执行明确的测试用例
  • 根据测试结果定位并修复逻辑问题
  • 整理代码结构、Git 提交和 GitHub 项目说明
  • 独立讲解 2048 的状态、移动算法和渲染流程

需要掌握的知识点

蓝湖设计图分析

  • 确认设计图对应的页面尺寸和目标浏览器宽度
  • 读取棋盘、方块、间距、圆角、颜色、字体和阴影标注
  • 导出设计图中的图片、图标和字体等资源
  • 划分标题区、分数区、操作区、棋盘和状态提示区域
  • 识别默认、胜利、失败和重新开始等界面状态
  • 使用对比截图记录并修复视觉偏差

分数与状态

  • 仅在数字合并时增加当前分数
  • 每次合并增加新方块对应的数值
  • 区分进行中、胜利和失败状态
  • 复用第 6 周的 hasTarget() 进行胜利判断
  • 复用第 6 周的 isGameOver() 进行失败判断
  • 避免游戏结束后继续修改状态

游戏生命周期

  • 初始化棋盘和两个随机数字
  • 处理一次用户输入和完整状态更新
  • 重新开始时清空棋盘、当前分数和提示状态
  • 在合适时机保留或更新最高分
  • 处理连续点击重新开始等重复操作

本地存储

  • localStorage 的读取、写入和删除
  • 字符串与数字之间的转换
  • 首次访问时不存在存储值的处理
  • 存储值异常时使用合理默认值
  • 刷新页面后恢复最高分

界面稳定性

  • 棋盘和方块尺寸、间距、颜色及圆角符合蓝湖标注
  • 不同数字的字体和背景色符合蓝湖设计
  • 当前分数、最高分、状态提示和按钮布局符合设计图
  • 文本不会遮挡棋盘或操作区域
  • 在设计图对应尺寸下无明显错位或溢出
  • 控制台无错误，图片和样式资源无加载失败

测试与调试

  • 为移动函数准备确定的棋盘输入和预期输出
  • 分别测试正常情况、边界情况和无效操作
  • 记录实际结果与预期结果的差异
  • 修复问题后重新执行全部规则测试
  • 临时测试入口在最终提交前移除

代码与项目整理

  • 将状态、移动、渲染、输入和存储逻辑合理拆分
  • 函数和变量名称能够表达实际用途
  • 删除调试日志、重复代码和无用资源
  • README 包含项目介绍、功能、运行方式、操作方法和截图
  • 最终代码推送至 GitHub

必做任务

  1. 分析 2048 蓝湖设计图，整理页面结构、关键标注和资源清单。
  2. 根据设计图调整第 7 周完成的 HTML 结构和页面区域。
  3. 根据蓝湖标注完成标题、分数区、操作区、棋盘、方块、提示和按钮样式。
  4. 检查并完善当前分数、最高分、胜利、失败、重新开始和状态提示。
  5. 使用 localStorage 保存并恢复最高分。
  6. 在设计图对应尺寸下截图对比，并逐项修复视觉偏差。
  7. 执行全部规则测试并记录结果。
  8. 整理核心函数、命名、目录和静态资源。
  9. 编写项目 README 并推送最终代码。
  10. 准备一次 5 分钟项目讲解。

功能验收

  • 使用 HTML、CSS 和原生 JavaScript 开发，未使用游戏框架
  • 使用 4×4 棋盘，通过键盘方向键控制移动
  • 开始游戏时随机生成两个数字方块
  • 仅在有效移动后于空白位置生成新数字
  • 相同数字按照 2048 规则合并并正确累计分数
  • 支持胜利、失败判定和重新开始
  • 使用本地存储保存并恢复最高分

规则测试

  • [2, 2, 2, 2] 向左移动后得到 [4, 4, 0, 0]
  • [4, 4, 8, 0] 向左移动后得到 [8, 8, 0, 0]
  • [2, 2, 4, 0] 向左移动后得到 [4, 4, 0, 0]，不能连续合并为 8
  • [4, 0, 4, 4] 向左移动后得到 [8, 4, 0, 0]
  • 仅移动位置但未合并时，分数不增加
  • 棋盘状态没有变化时，不生成新数字
  • 棋盘填满且不存在可合并的相邻数字时，游戏失败
  • 出现 2048 方块时，显示胜利状态
  • 重新开始后，棋盘和当前分数正确重置
  • 刷新页面后，最高分能够正确恢复

工程验收

  • 使用 Git 管理项目，提交记录能够体现主要开发过程
  • 最终代码已推送至 GitHub
  • 仓库包含项目介绍、运行方式、操作说明和截图
  • HTML、CSS 和 JavaScript 文件职责清晰
  • 核心移动和合并逻辑已拆分为独立函数
  • 页面无明显错位、遮挡或控制台报错
  • 能够独立讲解棋盘状态、移动合并算法和渲染流程

视觉验收

  • 页面结构和区域顺序与 2048 蓝湖设计图一致
  • 棋盘、方块、间距、圆角和阴影符合蓝湖标注
  • 字体、字号、文字颜色和背景颜色符合设计图
  • 分数、按钮和状态提示在内容变化时不会引起布局跳动
  • 页面无明显错位、遮挡、溢出或资源加载失败
  • 已提供设计图与最终页面的对比截图

本周产出

  • 2048 最终验收版本
  • 完整的规则测试记录
  • 蓝湖设计图标注记录和视觉对比截图
  • 包含说明和截图的 GitHub 仓库
  • 一份阶段一知识复盘和待补强清单
  • 两个阶段项目的口头讲解提纲