# tetris

**Repository Path**: jamesfancy/tetris

## Basic Information

- **Project Name**: tetris
- **Description**: 网页 JavaScript 版俄罗斯方块
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 35
- **Forks**: 12
- **Created**: 2016-09-15
- **Last Updated**: 2025-02-26

## Categories & Tags

**Categories**: games

**Tags**: None

## README

# Tetris (TypeScript) - 网页版俄罗斯方块

> 思否 (SegmentFault) 专栏：[边城客栈](https://segmentfault.com/blog/jamesfancy) 
> 作者：边城（James Fan）

---


## 采用技术

- HTML5
- [LESS][less]
- [TypeScript][typescript] 4.0+
- JavaScript (ES2015+ with ESM) 

## 项目结构

| 目录/文件 | 说明 |
| ---- | ---- |
| `src/`              |                                  |
| `src/index.html` | 主页面（也是唯一 HTML 页面） |
| `src/less/` | 样式表源码 |
| `src/scripts/` | TypeScript 脚本源码 |
| `docs/` | 文档 |
| `dist/` | 构建结果（未构建前不存在此目录） |
| `dist/index.html` | 发布页面，直接从 `src/index.html` 拷贝过来 |
| `dist/css/` | 从 `src/less/` 构建出来的样式表 |
| `dist/js/` | 从 `src/scripts/` 构建出来的脚本，需要浏览器支持 `type="module"` |
| `dist/libs/` | 页面上引用的第三方库，目前只有 jQuery |

## 环境搭建

开发系统环境（以及 npm scripts 的环境）是 Windows 10，较低 Windows 版本或 Linux 需要对 `package.json` 中 `scripts` 下的脚本进行修改。

虽然是前端，仍然采用了项目构建的思想，目标脚本和样式表通过构建生成。构建在 [NodeJs 14][nodejs]<sup>+</sup> 环境下进行。

开发中使用了 [TypeScript][typescript]，需要 TypeScript 语言服务。虽然大多数支持 TypeScript 的编辑器或 IDE 已经内置了 TypeScript 语言服务支持，可能可能不是最新版本。可以通过 npm 安装最新版本的 TypeScript，之后通过 `tsc --version` 检查安装的版本。

TypeScript  可以全局安装，也可以局部安装，建议采用**局部**安装方式：

```powershell
tetris/> npm install typescript
tetris/> npx tsc --version
```

## 构建

最新重构使用 `<script type="module" ...></script>` 来引用脚本，使用现代 JS 语法，不需要打包，也不需要 Babel 转译，所以去掉了 Babel 和 Gulp，采用最简化的构造方式，由 npm scripts 实现。 

完整构建使用 `npm run build` 命令，注意该命令不包含对旧构建结果的清理工作。

- 构建 TypeScript 直接使用 `tsc` 命令，详见 `package.json` 中的 `compile` 脚本。

    > 由于 TypeScript 对 `type="module"` 支持不够友好，源代码中 `import` 语句需要给脚本文件加上 `.js` 扩展名（特别注意——不是 `.ts`）。

- 构建 LESS 样式表使用 `lessc` 命令，详见 `package.json` 中的 `lessc` 脚本。

- 拷贝 `index.html` 和 `jQuery` 使用系统命令，详见 `package.json` 中的 `copy-html` 和 `copy-jquery` 脚本。

- 清理构建结果使用 [Powershell Core][powershellcore] 的 `rm` 命令，详见 `pckage.json` 中的 `clean` 脚本。

## 运行

由于使用 `type="module"`，不能直接通过浏览器打开本地 `index.html` 来运行，需要将构建结果（`dist` 目录）作为静态 Web 发布运行，通过 HTTP 协议访问。Web 服务容器可选用 Nginx、IIS、Apache 等。

基于 Node 技术栈建议选择 http-server，建议全局安装方便在各种开发环境下使用：

```powershell
/> npm install -g http-server
/> cd d:/workspace/tetris/
/> http-server dist
```

## 操作

| 快捷键 | 功能 |
| ----: | ---- |
| `[UP]` | 方块旋转（顺时针） |
| `[LEFT]` | 向左移动 |
| `[RIGHT]` | 向右移动 |
| `[DOWN]` | 向下移动 |
| `[SPACE]` | 直降到底 |

---

## 相关阅读：SegmentFault 上的系列博文

- [JavaScript 版俄罗斯方块](https://segmentfault.com/a/1190000006919702)
- [JavaScript 版俄罗斯方块 - 重构](https://segmentfault.com/a/1190000007063852)
- [JavaScript 版俄罗斯方块 - 转换为 TypeScript](https://segmentfault.com/a/1190000007074816)

[jquery]: http://jquery.com/
[typescript]: http://www.typescriptlang.org/
[nodejs]: http://nodejs.org/
[less]: http://lesscss.org/
[npm]: https://www.npmjs.com/
[powershellcore]: https://docs.microsoft.com/powershell/scripting/install/installing-powershell