分享:使用 TypeScript 编写的 JavaScript 游戏代码

上篇博客》我写出了我一直期望的 JavaScript 大型程序的开发模式,以及 TS(TypeScript) 的一些优势。博客完成之后,我又花了一天时间试用 TS,用它来重构之前编写的一个 JS 游戏:《Javascript 坦克游戏》。

源码下载

源码我已经上传了,无需资源分,下载地址:http://download.csdn.net/detail/zgynhqf/8565873

源码使用 VS 2013 +TypeScript 1.4 进行开发。打开后,显示如下图:

JsTankGame 1.0:老的使用 JS 编写的坦克游戏。

JsTankGame 2.0:新的使用 TS 直接翻译过来的游戏。

JsTankGame:在 2.0 的基础上,对类型进行了重构后的新游戏。

重构步骤

由于老的 JS 游戏是采用 MS Ajax Client Library 构建,并且采用了 OOD 的方式来进行设计,再加之 TypeScript 可以兼容 JS 的全部代码。所以使用 TypeScript 来移植的工作也比较简单,主要是替换类型设计的代码:类、继承、接口等。

完成以上工作后,也就得到了使用 TS 编写的 2.0 版本。过程中体会到了强类型语言的诸多好处,当然也有一些 TS 目前并不完善的地方(后面会说)。

得到了强类型的 2.0 版本后,并没有结束。为了体验强类型对于重构的好处,我决定在这个版本之上做代码结构上的重构。

有了强类型编写的代码,我可以很方便地分析出每一个类型、每一个方法,具体在哪些地方被使用。这样,我就能很快地知道类型之间的依赖关系。不看不知道,一看吓一跳。之前一点一点随心写的代码,本以为类型设计得还不错,之间耦合性应该不是很高。但是图画完之后,才发现与想象中差点很远,这就是没有画图直接编写代码的结果,见下面两张图:

可以看出各精灵类型之间的关系是比较乱的,双向依赖随处可见。(其实图中因为把 SpriteManager 画到了另外一张图,所以没有显示出更复杂、更乱的关系。)

据此,我绘制了新的关系图,然后按照此关系来重构了所有的代码。这样就得到了最新的 3.0 版本。

新版本的类型关系图如下:

分层:

精灵:

管理器:

代码层面,主要是把各精灵之间耦合的代码,都移植到了上层的管理器中。同时,为精灵定义事件来解除精灵与管理器的直接耦合。

TS 首次体验中感受的优缺点

  • 优点:
  • Lambda 非常好地解决了 this 指针的问题。
  • Chrome、IE 都能直接调试 TypeScript!
  • 过程中还发现了弱类型无法发现的错误。因为重命名,还没有修改原来的代码。(SpriteManager.js 98 行)
  • 缺点:
  • 开发环境-还没有集成代码注释功能,只能手动拷贝。
  • 开发环境-不支持代码区域的定义(Region,非常重要,便于分区域管理较多代码的类型。没有这个功能,同样导致代码无法写得更多,毕竟每个类的代码量也不少。)。
  • 开发环境-目前还不支持 Code Snippets。
  • 开发环境-不支持关键字代码生成:if、while、swith、括号匹配等。
  • 语法-不支持事件的定义。
  • 语法-暂时还不支持为类定义重载方法。见 SpriteBase.IsCollided 方法。

其它:

  • 编译出的 JS 代码有一定的冗余。命名空间处显得特别明显。
  • 重写基类方法,没有提示。
  • 基类的属性获取器/设置器无法重写。
  • 无法分辨哪些方法是虚方法。
  • 接口中不能定义只读的属性。
  • 还存在 BUG。(SpriteManager.ts line 93)。
  • 简单定义一个数字类型的字段的话,默认值并不是 0,而是 NaN。

总结 

总体说来,经过试用,我感觉 TS 到目前的 1.4 版本,已经可以用于正式的大型 JS 项目开发。但是还有很多地方需要改进!

附 Chrome、IE 调试 TS 截图:

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏微信小程序开发

微信小程序开发常见问题(二)

知晓程序员,专注微信小程序开发的程序员! 今天再给大家分享几个微信小程序开发的常见问题,顺便吐槽一下,武汉的冬天太TM冷了,没有暖气的冬天真的很难过,写文章的心...

4765
来自专栏Linyb极客之路

编码习惯之异常处理

对于大型IT系统,最怕的事情第一是系统出现了异常我不知道,等问题闹大了用户投诉了才知道出问题了。第二就是出了问题之后无法找到出错原因。针对这2个问题,说说我们项...

2989
来自专栏linux驱动个人学习

SPI通讯协议

一、SPI概述 SPI,是英语Serial Peripheral Interface的缩写,顾名思义就是串行外围设备接口。SPI,是一种高速的,全双工,同步的通...

4117
来自专栏架构师之路

计数系统架构实践一次搞定 | 架构师之路

提醒,本文较长,可提前收藏/转发。 一、需求缘起 很多业务都有“计数”需求,以微博为例: ? 微博首页的个人中心部分,有三个重要的计数: 关注了多少人的计数 粉...

4886
来自专栏黑白安全

黑客怎样用谷歌查找信息?

黑客去入侵一个网站的时候往往需要搜集它的很多信息,这其中包括利用网站漏洞,社工,还有就是用搜索引擎进行搜索,而常被我们利用的搜索网站——谷歌就是一个非常好的信息...

2034
来自专栏owent

libcopp v2的第一波优化完成

之前测出来libcopp还有一些列优化点,但是要破坏之前的API,所以整理了一下优化的想法和方案。

2242
来自专栏IT派

厉害!黑客怎样用谷歌查找信息?

IT派 - {技术青年圈} 持续关注互联网、区块链、人工智能领域 黑客去入侵一个网站的时候往往需要搜集它的很多信息,这其中包括利用网站漏洞,社工,还有就是用...

3636
来自专栏WeTest质量开放平台团队的专栏

内存是手游的硬伤——Unity游戏Mono内存管理与泄漏

内存是游戏的硬伤,如果没有做好内存的管理问题,游戏极有可能会出现卡顿,闪退等影响用户体验的现象。本文介绍了在腾讯游戏在Unity游戏开发过程中常见的Mono内存...

772
来自专栏卡少编程之旅

REACT框架学习心得

3487
来自专栏coding for love

在线商城项目12-商品列表页价格筛选实现

之前我们约定前端传startPrice和endPrice来获取价格区间。我们设定如下规则:

1512

扫码关注云+社区

领取腾讯云代金券