jsTetris - 网页 JavaScript 版俄罗斯方块

SegmentFault 边城客栈 专栏
jamesfancy (jamesfancy@126.com)

采用技术

• HTML5
• LESS
• JavaScript (ES2015)

源码结构

环境搭建

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

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

$ npm install -g typescript
$ tsc --version

命令行看起来像是 Linux，但实际是在 Windows 下使用了 git-bash。

构建

所有前端源码都在 src 目录下，通过 gulp 工具构建。脚本采用 TypeScript 编写，使用了较新的语言特性，需要 glup-typescript 及 gulp-babel 工具来生成最终兼容 ES5 的脚本。样式表使用 LESS 编号，需要 gulp-less 来生成 .css 样式表。

页面中需要引入 jQuery 库。jQuery 库脚本通过 npm 引入，并由 gulp 在构建时拷贝到 js 目录下供页面引用。

$ cd src
$ npm install
$ gulp build

运行

构建完成之后通过浏览器打开 index.html 即可开始游戏。

操作

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

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