第五单元 俄罗斯方块
第19课 封存与 CSS：先能玩再打扮
前端工作流：先封存能玩的一版，再只改 CSS 美化；结构与 JS 逻辑别弄丢。
下面工具里已经放好上一课「可玩方块 + 提示助手」——先玩两把确认还在，再动手。
能玩的版本先封存（复制退路），再只改 CSS 打扮。
好看很加分，但弄坏下落就前功尽弃；本课不是再写说明页。
一、这一课怎么学
- 开始前你要会：会打开浏览器，会打字。
- 怎样算做完：完成「轮到你做」，并在嵌入工具里留下可预览文件。
- 建议：先读「弄懂这件事」，再做练习。
二、学完你能做到
- 会复制封存。
- 美化后仍可玩。
- 能说明改了哪些外观。
三、弄懂这件事
这一课就这几小步：
1．封存
能演示的版本先复制一份封存，再放心美化。
不要边改边丢唯一份——弄坏下落就前功尽弃。
今天留下的这一版，是前端改坏时能退回的退路。
2．美化边界
美化要设边界：只动外观，或极少改 class 名字。
禁止让 AI 重写下落、旋转、消行这些逻辑。
好看很加分，但不能牺牲「还能玩」。
3．对照
美化前后各玩大约 20 秒，对照有没有坏规则。
分数、下落、消行和美化前一致，才算打扮成功。
功能坏了就回退到封存版，再小步重来。
四、先跟着做
对照例子想清楚
用自己的话重述本课成功标准。
做对了会怎样你写出来的标准，别人打开页面点几下就能核对是不是做到了，而不是只有形容词。
指出哪一步必须自己点，不能听 AI 口头说完成。
做对了会怎样你明确写出：必须自己打开页面点一遍；AI 口头说「完成了」不能算数。
五、轮到你做
封存已有方块 + 只改 CSS
封存到 versions/tetris-v1/。
做对了会怎样改之前留了副本，坏了还能退回。
做不出来怎么办复制整个文件夹作为 v0/v1，再改副本。
只改外观两处。
做对了会怎样结构或文案改完后，主逻辑还在、还能点。
做不出来怎么办先调背景色和按钮大小，一次改一处。
写下改动列表。
做对了会怎样一次反馈以两条以内为主，避免清单爆炸。
做不出来怎么办改动列表里记下改了哪些颜色或间距。
用下面嵌着的氛围编程工具（已放入上一课可玩方块）。在此基础上封存并只改 CSS，文件是
games/tetris/tips.html。做对了会怎样在嵌着的工具预览里，你能亲眼看见本课要求的按钮、分数或流程文字，而不是只有说明。
做不出来怎么办先在预览里自己点一遍；文件名必须和例子上写的完全一样，改完再刷新预览。
本节例子
工具打开时会把上一课成果放进「代码」和「效果」。下面提示词请整段发送，在已有方块上小步改，不要整页重写。文件是 games/tetris/tips.html。
在当前「方块 + 提示助手」完整页面上继续（已有可玩 script，禁止删掉游戏逻辑）： 1）在页面或 HTML 注释里写清：如何复制封存到 versions/tetris-v1/； 2）只改两处 CSS 外观（例如 body 背景色、#tips 圆角或字号）； 3）必须保留 canvas、下落循环、提示按钮。 重要：回复必须是完整 HTML 文件（```html games/tetris/tips.html），不要只给 CSS。 输出要求：即使只改外观，也必须用 ```html 文件名 输出完整 HTML 全文（保留原有 script 与结构），禁止只输出 ```css 片段。页面打开后游戏/交互仍要能用。
正在打开氛围编程工具…若长时间空白请强制刷新。
六、小心这些错
美化时重写 JS 导致不能消行。
没有副本。
七、带走这几句
- 先封存能玩的版本，再放心改好看。
- 美化之后必须自己再玩验一遍，确认还能过关。
八、打勾再往下
- 有 versions 副本。
- 美化后可玩。
小测验
对照上面「学完你能做到」选一个答案，再点「检查」。
封存时机？
美化优先改？
美化后？