使用 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 相关文章推荐
jQuery学习总结之元素的相对定位和选择器(持续更新)
Apr 26 Javascript
JavaScript ECMA-262-3 深入解析.第三章.this
Sep 28 Javascript
javaScript函数中执行C#代码中的函数方法总结
Aug 07 Javascript
JS实现的4种数字千位符格式化方法分享
Mar 02 Javascript
png在IE6 下无法透明的解决方法汇总
May 21 Javascript
javascript创建动态表单的方法
Jul 25 Javascript
简单实现jQuery弹幕效果
May 06 jQuery
Koa 使用小技巧(小结)
Oct 22 Javascript
vue过滤器用法实例分析
Mar 15 Javascript
Node.JS枚举统计当前文件夹和子目录下所有代码文件行数
Aug 23 Javascript
Vue实现购物车实例代码两则
May 30 Javascript
Vue使用路由钩子拦截器beforeEach和afterEach监听路由
Nov 16 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
laravel 5.5 关闭token的3种实现方式
2019/10/24 PHP
关于JavaScript的一些看法
2009/05/27 Javascript
基于jquery的表格排序
2010/09/11 Javascript
JQuery动画和停止动画实例代码
2013/03/01 Javascript
原生Javascript封装的一个AJAX函数分享
2014/10/11 Javascript
javascript中Number对象的toString()方法分析
2014/12/20 Javascript
js时间控件只显示年月
2017/01/08 Javascript
基于jquery的on和click的区别详解
2018/01/15 jQuery
angular学习之动态创建表单的方法
2018/12/07 Javascript
Node使用Selenium进行前端自动化操作的代码实现
2019/10/10 Javascript
[02:31]DOTA2帕克 英雄基础教程
2013/11/26 DOTA
Python提取Linux内核源代码的目录结构实现方法
2016/06/24 Python
python自动化脚本安装指定版本python环境详解
2017/09/14 Python
python最长回文串算法
2018/06/04 Python
解决Tensorflow使用pip安装后没有model目录的问题
2018/06/13 Python
flask入门之文件上传与邮件发送示例
2018/07/18 Python
python程序快速缩进多行代码方法总结
2019/06/23 Python
详解Python3定时器任务代码
2019/09/23 Python
pyspark给dataframe增加新的一列的实现示例
2020/04/24 Python
Html5中的桌面通知Notification的实现
2018/09/25 HTML / CSS
手机配件第一品牌:ZAGG
2017/05/28 全球购物
美国最大的高尔夫发球时间预订网站:TeeOff.com
2018/03/28 全球购物
惠普香港官方商店:HP香港
2019/04/30 全球购物
捷克母婴用品购物网站:Feedo.cz
2020/12/28 全球购物
英语专业应届生求职信范文
2013/11/15 职场文书
安全检查验收制度
2014/01/12 职场文书
基督教婚礼主持词
2014/03/14 职场文书
试用期自我鉴定范文
2014/03/20 职场文书
房产委托公证书样本
2014/04/04 职场文书
大学毕业寄语大全
2014/04/10 职场文书
旅游节目策划方案
2014/05/26 职场文书
2014年教师党员公开承诺书
2014/05/28 职场文书
篮球兴趣小组活动总结
2014/07/07 职场文书
入党团支部推荐意见
2015/06/02 职场文书
2016年5月份红领巾广播稿
2015/12/21 职场文书
教你使用RustDesk 搭建一个自己的远程桌面中继服务器
2022/08/14 Servers