项目结构

即使项目不大，将代码拆分到不同文件中也是良好的实践：

• constants.js 用于存放游戏的配置和规则。
• board.js 用于处理棋盘逻辑。
• piece.js 用于处理方块逻辑。
• main.js 包含初始化游戏和整体游戏逻辑的代码。
• 在 index.html 文件末尾添加脚本的顺序至关重要。
• styles.css 包含所有美化样式。
• README.md 是 Markdown 格式的说明文件，作为仓库的首页内容。

现代化样式

与现代 JavaScript 一样，近年来网页样式的领域也取得了进步。首先出现的是 Flexbox，它旨在提供一种更高效的方式来布局、对齐和分配容器中项目之间的空间，是一种主要的一维系统。

随后出现了 CSS Grid，这是一种二维系统，能够同时处理列和行。它们可以很好地协同工作；一个网格项可以是一个 Flexbox 容器。由于这是 JavaScript 课程，我们不会深入探讨，但请注意布局中使用了 CSS Grid 和 Flexbox：

1.grid {
2  display: grid;
3  grid-template-columns: 320px 200px;
4}
5
6.right-column {
7  display: flex;
8  flex-direction: column;
9  justify-content: space-between;
10}

1<div class="grid">
2  <canvas id="board" class="game-board"></canvas>
3  <div class="right-column">
4    <div>
5      <h1>TETRIS</h1>
6      <p>得分: <span id="score">0</span></p>
7      <p>行数: <span id="lines">0</span></p>
8      <p>等级: <span id="level">0</span></p>
9      <canvas id="next" class="next"></canvas>
10    </div>
11    <button onclick="play()" class="play-button">开始游戏</button>
12  </div>
13</div>

我们可以通过在 <head> 部分添加 link 标签来链接样式文件：

1<link rel="stylesheet" type="text/css" href="styles.css" />

字体

为游戏增添一些 80 年代的感觉非常不错。Press Start 2P 是一种基于 1980 年代南梦宫街机游戏字体设计的位图字体。我们可以在 <head> 部分链接该字体，并将其应用到样式中：

1// index.html
2<link href="https://fonts.googleapis.com/css?family=Press+Start+2P" rel="stylesheet" />
3
4// styles.css
5* {
6  font-family: 'Press Start 2P', cursive;
7}

JavaScript

在 HTML 文件末尾，我们添加对 JavaScript 文件的引用。<script> 元素包含由浏览器执行的 JavaScript 代码。

这里的顺序非常重要。因为我们将在主文件中使用常量，所以必须先引入 constants.js。

1<script type="text/javascript" src="constants.js"></script>
2<script type="text/javascript" src="board.js"></script>
3<script type="text/javascript" src="piece.js"></script>
4<script type="text/javascript" src="main.js"></script>
5</body>
6</html>

如果顺序错误，会报错如下：Uncaught ReferenceError: KEY is not defined

我们先编写一段代码，以正确尺寸绘制棋盘。游戏棋盘由十列二十行组成，我们可以将这些信息以及方块大小添加到 constants.js 中：

1const COLS = 10;
2const ROWS = 20;
3const BLOCK_SIZE = 30;

document 对象提供了对 HTML 文档的编程接口。文档具有树状结构，通常被称为 DOM（文档对象模型）。

我们可以调用 getElementById 方法来访问 DOM 中的元素。这里我们用它获取 <canvas> 元素及其 2D 上下文；这允许我们使用多种方法在画布上绘制线条和形状：

1const canvas = document.getElementById('board');
2const ctx = canvas.getContext('2d');
3
4// 根据常量计算画布大小。
5ctx.canvas.width = COLS * BLOCK_SIZE;
6ctx.canvas.height = ROWS * BLOCK_SIZE;
7
8// 缩放方块
9ctx.scale(BLOCK_SIZE, BLOCK_SIZE);

通过使用 scale，我们可以始终将方块大小设为 1（一），而无需在各处都进行 BLOCK_SIZE 的计算，从而简化代码。

至此，我们的游戏容器已具备样式并准备就绪，等待添加代码。你可以在下方代码组件中查看完整代码。