使用 TypeScript 重新编写的 JavaScript 坦克大战游戏代码


Posted in Javascript onApril 07, 2015

源码下载

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

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

使用 TypeScript 重新编写的 JavaScript 坦克大战游戏代码

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 版本后,并没有结束。为了体验强类型对于重构的好处,我决定在这个版本之上做代码结构上的重构。

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

使用 TypeScript 重新编写的 JavaScript 坦克大战游戏代码使用 TypeScript 重新编写的 JavaScript 坦克大战游戏代码

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

据此,我绘制了新的关系图,然后按照此关系来重构了所有的代码。这样就得到了最新的 3.0 版本。使用 TypeScript 重新编写的 JavaScript 坦克大战游戏代码

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

分层:

使用 TypeScript 重新编写的 JavaScript 坦克大战游戏代码

精灵:

使用 TypeScript 重新编写的 JavaScript 坦克大战游戏代码

管理器:

使用 TypeScript 重新编写的 JavaScript 坦克大战游戏代码

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

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

优点: Lambda 非常好地解决了 this 指针的问题。 Chrome、IE 都能直接调试 TypeScript! 过程中还发现了弱类型无法发现的错误。因为重命名,还没有修改原来的代码。(SpriteManager.js 98 行)

缺点: 开发环境-还没有集成代码注释功能,只能手动拷贝。 开发环境-目前还不支持 Code Snippets。 开发环境-不支持关键字代码生成:if、while、swith、括号匹配等。 开发环境-不支持代码区域的定义(Region)。 语法-不支持事件的定义。 语法-暂时还不支持为类定义重载方法。见 SpriteBase.IsCollided 方法。

其它:

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

总结 

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

附 Chrome、IE 调试 TS 截图:

使用 TypeScript 重新编写的 JavaScript 坦克大战游戏代码

使用 TypeScript 重新编写的 JavaScript 坦克大战游戏代码

以上所述就是本文的全部内容了,希望能够对大家熟练掌握typescript有所帮助。

Javascript 相关文章推荐
发布BlueShow v1.0 图片浏览器(类似lightbox)blueshow.js 打包下载
Jul 21 Javascript
Javascript客户端将指定区域导出到Word、Excel的代码
Oct 22 Javascript
javascript 密码强度验证规则、打分、验证(给出前端代码,后端代码可根据强度规则翻译)
May 18 Javascript
html的DOM中document对象images集合用法实例
Jan 21 Javascript
js运动动画的八个知识点
Mar 12 Javascript
jQuery选择器源码解读(四):tokenize方法的Expr.preFilter
Mar 31 Javascript
JavaScript中操作字符串小结
May 04 Javascript
JavaScript中Object.prototype.toString方法的原理
Feb 24 Javascript
javascript加载xml 并解析各节点的值(实现方法)
Oct 12 Javascript
解决vue中修改export default中脚本报一大堆错的问题
Aug 27 Javascript
vue富文本编辑器组件vue-quill-edit使用教程
Sep 21 Javascript
vue v-on:click传递动态参数的步骤
Sep 11 Javascript
TypeScript具有的几个不同特质
Apr 07 #Javascript
实现前后端数据交互方法汇总
Apr 07 #Javascript
JavaScript使用cookie记录临时访客信息的方法
Apr 07 #Javascript
javascript结合CSS实现苹果开关按钮特效
Apr 07 #Javascript
javascript实现画不相交的圆
Apr 07 #Javascript
JavaScript使用setTimeout实现延迟弹出警告框的方法
Apr 07 #Javascript
JavaScript使用indexOf获得子字符串在字符串中位置的方法
Apr 06 #Javascript
You might like
php实现ping
2006/10/09 PHP
PHP-Fcgi下PHP的执行时间设置方法
2013/08/02 PHP
php使用base64加密解密图片示例分享
2014/01/20 PHP
CodeIgniter辅助之第三方类库third_party用法分析
2016/01/20 PHP
Laravel框架中队列和工作(Queues、Jobs)操作实例详解
2020/04/06 PHP
用javascript父窗口控制只弹出一个子窗口
2007/04/10 Javascript
点击下载链接 弹出页面实现代码
2009/10/01 Javascript
JavaScript浏览器选项卡效果
2010/08/25 Javascript
jQuery实现切换字体大小的方法
2015/03/10 Javascript
JS实现不使用图片仿Windows右键菜单效果代码
2015/10/22 Javascript
Validform+layer实现漂亮的表单验证特效
2016/01/17 Javascript
jQuery实现的鼠标经过时变宽的效果(附demo源码)
2016/04/28 Javascript
JavaScript表单验证的两种实现方法
2017/02/11 Javascript
JS简单实现查看文档创建日期、修改日期和文档大小的方法示例
2018/04/08 Javascript
jQuery实现点击图标div循环放大缩小功能
2018/09/30 jQuery
在angularJs中进行数据遍历的2种方法
2018/10/08 Javascript
JS实现图片拖拽交换效果
2018/11/30 Javascript
Vue+elementui 实现复杂表头和动态增加列的二维表格功能
2019/09/23 Javascript
vue 通过 Prop 向子组件传递数据的实现方法
2020/10/30 Javascript
JavaScript实现鼠标经过表格某行时此行变色
2020/11/20 Javascript
Python连接PostgreSQL数据库的方法
2016/11/28 Python
Python编程实现的简单神经网络算法示例
2018/01/26 Python
python网络应用开发知识点浅析
2019/05/28 Python
python数组循环处理方法
2019/08/26 Python
详解Scrapy Redis入门实战
2020/11/18 Python
恒华伟业笔试面试题
2015/02/26 面试题
入党自我鉴定范文
2013/10/04 职场文书
小学生秋游活动方案
2014/02/23 职场文书
2014年九一八事变演讲稿
2014/09/14 职场文书
师德标兵事迹材料
2014/12/19 职场文书
迎新生欢迎词
2015/01/23 职场文书
实验心得体会范文
2016/01/25 职场文书
合作合同协议书
2016/03/21 职场文书
Python3 类型标注支持操作
2021/06/02 Python
Nginx安装配置详解
2022/06/25 Servers
python热力图实现的完整实例
2022/06/25 Python