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

思否 (SegmentFault) 专栏：边城客栈 作者：边城（James Fan）

采用技术

• HTML5
• LESS
• TypeScript 4.0+
• JavaScript (ES2015+ with ESM)

项目结构

环境搭建

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

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

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

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

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 的 rm 命令，详见 pckage.json 中的 clean 脚本。

运行

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

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

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

操作

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

• JavaScript 版俄罗斯方块
• JavaScript 版俄罗斯方块 - 重构
• JavaScript 版俄罗斯方块 - 转换为 TypeScript