开源软件名称:tetris
开源软件地址:https://gitee.com/jamesfancy/tetris
开源软件介绍:
Tetris (TypeScript) - 网页版俄罗斯方块思否 (SegmentFault) 专栏:边城客栈作者:边城(James Fan)
采用技术项目结构目录/文件 | 说明 |
---|
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+ 环境下进行。 开发中使用了 TypeScript,需要 TypeScript 语言服务。虽然大多数支持 TypeScript 的编辑器或 IDE 已经内置了 TypeScript 语言服务支持,可能可能不是最新版本。可以通过 npm 安装最新版本的 TypeScript,之后通过 tsc --version 检查安装的版本。 TypeScript 可以全局安装,也可以局部安装,建议采用局部安装方式: tetris/> npm install typescripttetris/> 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 操作快捷键 | 功能 |
---|
[UP] | 方块旋转(顺时针) | [LEFT] | 向左移动 | [RIGHT] | 向右移动 | [DOWN] | 向下移动 | [SPACE] | 直降到底 |
相关阅读:SegmentFault 上的系列博文 |
请发表评论