图 1 添加canvas、按钮和文本

第2节：CSS - 美化游戏界面

什么是CSS

CSS（层叠样式表）是一种强大的样式语言，专门用于精确描述和控制网页内容的视觉呈现方式，包括元素的布局、颜色、字体、间距以及其他外观属性，从而实现丰富的视觉效果。CSS与HTML紧密协作，HTML负责定义网页的结构和内容，而CSS则专注于定义视觉样式，实现内容与表现的分离，提高代码的可维护性和灵活性。通过将样式信息写在独立的CSS文件中或直接内联在HTML文档中，开发者可以高效地管理和修改网页的外观，确保样式的一致性和可扩展性。

引入CSS方式

使用标签在中引入外部CSS文件，或在

CSS交互学习

①可以复制这段代码到文本文档中，将文本文档的扩展名修改为.html，用浏览器打开即可看到样式效果。

②可以依照提示的“尝试修改”意见，用你喜欢的文本编辑器打开修改，然后刷新浏览器页面观察效果。

图 2 css交互学习样例

布局利器：Flexbox是什么？

Flexbox一种强大的CSS布局模式，轻松实现元素的排列、对齐和分布。

基础概念：容器 (display: flex;)：包裹需要布局的子元素。

①主轴 (main axis) 和交叉轴 (cross axis)：定义排列方向。

②常用属性：flex-direction (排列方向), justify-content (主轴对齐), align-items (交叉轴对齐), flex-wrap (换行)。

回顾：我们再第1节的练习中，用Flexbox将canvas、按钮、计分板等元素整齐地排列在页面上。只需要在style中添加如下代码，body中的元素就按照flexbox布局自动布置。

练习： 给游戏容器添加一个漂亮的渐变背景，给按钮添加阴影和圆角。

①视觉效果提升渐变背景 (background: linear-gradient(...))：创建平滑的颜色过渡。

示例：background: linear-gradient(to bottom, #1a2a6c, #b21f1f, #fdbb2d); (深蓝到红到黄)

②阴影效果 (box-shadow)：给元素添加阴影，增加立体感。（让按钮、面板看起来更立体）

示例：box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3); (右偏移5px, 下偏移5px, 模糊10px, 半透明黑色)

③圆角 (border-radius)：让元素的角变圆润。（让按钮、卡片更友好）

示例：border-radius: 10px; (所有角) 或 border-radius: 50%; (圆形按钮)

在第1节“6文本显示”的样例中可以直接修改

图 3 增加颜色渐变、圆角和阴影

第3节：JavaScript - 赋予游戏生命

基础构建块变量 (let, const)

存储游戏数据（如分数 score、蛇的位置 snake、方块数组 grid）。

数据类型： 数字、字符串、布尔值、数组（存储蛇身坐标、俄罗斯方块形状）、对象（表示一个方块的状态）。

函数 (function)： 封装可重用的代码块（如 drawSnake(), moveSnake(), checkCollision(), rotateTetromino()）。

交互核心：事件监听addEventListener

让代码“监听”用户或浏览器发生的事件（点击、按键、鼠标移动等）。

①键盘事件 (keydown, keyup)： （贪吃蛇的方向控制！） 监听上下左右键改变蛇的方向，监听空格键暂停/开始。

②鼠标事件 (click)： （扫雷的点击！） 监听按钮点击开始游戏，监听扫雷格子的点击（左键翻开，右键标记）。

练习： 给按钮添加点击事件监听器，点击时在网页内输出信息。监听键盘方向键，在网页内输出按下的键。

图 4 事件监听

游戏循环的心脏：定时器setInterval(function, milliseconds)：

每隔指定的毫秒数重复执行一个函数。

为什么是核心？ （游戏循环！） 它驱动着游戏的更新和重绘。例如： 每隔200毫秒调用一次gameLoop()函数。

在gameLoop()里：更新蛇的位置 -> 检查碰撞 -> 重绘canvas。

另外还有一个函数setTimeout(function, milliseconds)：指定的毫秒数后执行一次函数。可用于实现延迟效果，如游戏结束后的短暂停顿再显示“Game Over”。

练习： 使用setInterval让控制台每秒输出一次当前时间。

图 5 定时器

推荐的学习材料

1. HTML（超文本标记语言）

MDN Web Docs (Mozilla Developer Network) ：这是最权威、最全面的Web技术文档之一。它提供了详细的HTML元素参考、教程和指南。网址：https://developer.mozilla.org/zh-CN/docs/Web/HTML W3C HTML Specification ：万维网联盟（W3C）是制定HTML标准的组织。虽然规范文档可能较为晦涩，但它是了解HTML标准的终极来源。网址：https://www.w3.org/TR/html52/ HTML Living Standard (WHATWG) ：WHATWG（Web Hypertext Application Technology Working Group）维护的HTML实时标准。它比W3C更频繁地更新，反映了最新的浏览器实现。网址：https://html.spec.whatwg.org/multipage/

2. CSS（层叠样式表）

MDN Web Docs ：同样，MDN提供了详尽的CSS参考和教程。网址：https://developer.mozilla.org/zh-CN/docs/Web/CSS W3C CSS Specifications ：W3C制定的CSS规范。这些规范详细描述了每个CSS属性的定义和行为。网址：https://www.w3.org/Style/CSS/ CSS Tricks ：这是一个非常流行的网站，提供CSS技巧、教程和文章，由经验丰富的开发者撰写。网址：https://css-tricks.com/ A List Apart ：这个网站专注于Web标准和最佳实践，有很多关于CSS布局和设计模式的深入文章。网址：https://alistapart.com/

3. JavaScript

MDN Web Docs ：MDN的JavaScript部分是最全面的JavaScript参考之一，包括教程、参考和高级主题。网址：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript ECMAScript Language Specification (ECMA-262) ：这是JavaScript语言的官方标准。最新版本（如ES2024）的规范可以在Ecma International网站上找到。网址：https://www.ecma-international.org/publications-and-standards/standards/ecma-262/ JavaScript.info ：一个现代的、内容详实的JavaScript教程网站，覆盖从基础到高级的主题。网址：https://javascript.info/ You Don't Know JS (book series) ：Kyle Simpson撰写的一系列书籍，深入探讨了JavaScript的核心概念。虽然书籍有些年头，但很多内容仍然适用。可以在GitHub上免费阅读：https://github.com/getify/You-Dont-Know-JS

4. 综合学习平台

freeCodeCamp ：提供互动式编码挑战，涵盖HTML、CSS和JavaScript，以及前端框架等。完成项目后可以获得认证。网址：https://www.freecodecamp.org/ Codecademy ：交互式学习平台，有完整的Web开发路径，包含HTML、CSS和JavaScript。网址：https://www.codecademy.com/ Coursera / edX ：提供由知名大学和公司（如Google）开设的Web开发课程。例如："Web Design for Everybody"（密歇根大学）或Google的Web开发专业课程

5. 专业书籍

《HTML & CSS: The Complete Reference, 2025 Edition》（Powell & Schneider）《JavaScript: The Definitive Guide, 8th Ed》（David Flanagan，含ES2025）《CSS Mastery: Advanced Web Standards Solutions, 5th Ed》（Andy Budd）

学习建议 & 下一步

动手！动手！动手！ 光看不够，每个概念都要写代码尝试。小步快跑： 不要一开始就想做完整游戏。先画一个方块，再让方块动起来，再添加控制…善用调试： 浏览器开发者工具（F12）是你的好朋友，学会用console.log()输出信息，用调试器查看代码执行。

本章《零基础入门》源代码

HTML文档框架

添加Canvas、按钮和文本

CSS交互学习样例

flexbox样式修改样例

监控按钮事件和键盘事件

定时器函数