第 7 周：DOM、Git 与 2048 网页化

本周目标

本周完成后，应能够：

使用 DOM 查询、修改、创建和删除页面元素
使用事件监听实现点击和键盘交互
解释事件对象、事件冒泡和阻止默认行为
使用 Git 完成暂存、提交、查看历史和推送
将第 6 周的控制台版 2048 迁移为网页界面
将游戏数据、移动逻辑和页面渲染分离
复用已完成的四向移动、合并和状态判断逻辑，并补充计分与重新开始

学习资料

JavaScript 参考视频待定。DOM 相关视频范围将在课程确定后补充；Git 使用基础命令完成本周项目管理。

需要掌握的知识点

DOM 操作

DOM 树及 HTML 与节点的关系
querySelector、querySelectorAll
文本内容、HTML 内容和表单值
元素属性、自定义属性、样式和 classList
创建、追加、插入和删除节点
遍历节点集合并批量更新页面

事件

addEventListener 和事件处理函数
点击、输入和键盘事件
事件对象及按键判断
事件冒泡和事件委托的基本概念
阻止默认行为
避免重复绑定事件

Git 与 GitHub

仓库、工作区、暂存区和提交历史
git init、git status、git add、git commit、git log
.gitignore 的用途
创建 GitHub 仓库、关联远程仓库和推送代码
使用清晰提交信息描述已完成的功能
每完成一个独立功能进行一次提交

2048 状态建模

复用第 6 周控制台版的 4×4 棋盘和初始化逻辑
根据棋盘数据渲染 DOM
页面只负责显示，JavaScript 数据作为游戏状态来源
复用第 6 周的棋盘比较函数，判断移动是否有效

移动与合并算法

复用第 6 周的 compactLine() 和 mergeLineLeft()
扩展单行合并结果，将合并产生的数字计入当前分数
使用反转、行列转换等方法处理不同移动方向
将单行算法扩展到左、右、上、下四个方向

随机数字生成

复用第 6 周的空位查找和随机数字函数
在固定生成数字 2 的基础上，增加小概率生成数字 4
仅在棋盘发生有效变化后生成新数字
棋盘无空位时不执行生成操作

必做练习

实现点击切换内容的标签页。
实现支持添加、完成和删除的待办事项列表。
实现方向键控制页面方块移动。
创建 2048 Git 仓库和 GitHub 远程仓库。
将第 6 周的棋盘状态接入数据驱动的 DOM 渲染。
复用控制台版的移动、合并和胜负判断函数，并增加计分。
使用键盘事件替换 prompt() 指令输入。
增加重新开始按钮及游戏状态重置。
增加小概率生成数字 4，并保证核心合并规则不变。

核心规则测试

[2, 2, 2, 2] 左移得到 [4, 4, 0, 0]
[2, 2, 4, 0] 左移得到 [4, 4, 0, 0]
[4, 0, 4, 4] 左移得到 [8, 4, 0, 0]
[0, 0, 0, 0] 左移后保持不变
只有位置变化但没有合并时，分数不增加
棋盘没有变化时，不生成新数字

Git 提交要求

本周至少通过独立提交体现以下开发步骤：

初始化项目结构和页面
完成棋盘数据与渲染
迁移第 6 周控制台版核心逻辑
完成 DOM 棋盘渲染
使用键盘事件完成四向控制
完成计分、重新开始和数字 4 的随机生成

本周产出

标签页与待办事项 DOM 练习
2048 GitHub 仓库
可以操作的 2048 网页游戏主体
核心移动规则测试记录
一份游戏输入、状态更新和页面渲染流程图

完成检查

能够使用 DOM 和事件实现基础交互
棋盘数据与页面展示保持一致
四个方向均可正常移动和合并
一次移动中每个方块最多参与一次合并
无效移动不会生成新数字
能够正确计分并通过按钮重新开始
Git 提交能够体现主要功能的开发过程
2048 已推送至 GitHub