使用 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 相关文章推荐
javascript中最常用的继承模式 组合继承
Aug 12 Javascript
JavaScript代码复用模式实例分析
Dec 02 Javascript
jQuery getJSON()+.ashx 实现分页(改进版)
Mar 28 Javascript
js动态设置鼠标事件示例代码
Oct 30 Javascript
js实现交换运动效果的方法
Apr 10 Javascript
JS+DIV+CSS实现的经典标签切换效果代码
Sep 14 Javascript
IScroll5 中文API参数说明和调用方法
May 21 Javascript
基于d3.js实现实时刷新的折线图
Aug 03 Javascript
jquery对象和DOM对象的相互转换详解
Oct 18 Javascript
详解angular笔记路由之angular-router
Sep 12 Javascript
微信小程序基于slider组件动态修改标签透明度的方法示例
Dec 04 Javascript
webpack4 升级迁移的实现
Sep 12 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
要会喝咖啡也要会知道咖啡豆
2021/03/03 咖啡文化
如何隐藏你的.php文件
2007/01/04 PHP
Thinkphp结合ajaxFileUpload实现异步图片传输示例
2017/03/13 PHP
PHP中的输出echo、print、printf、sprintf、print_r和var_dump的示例代码
2020/12/01 PHP
JavaScript入门教程(5) js Screen屏幕对象
2009/01/31 Javascript
Jquery ui css framework
2010/06/28 Javascript
EasyUi tabs的高度与宽度根据IE窗口的变化自适应代码
2010/10/26 Javascript
jQuery实现动画效果的简单实例
2014/01/27 Javascript
jquery 绑定回车动作扑捉回车键触发的事件
2014/03/26 Javascript
jquery实现公告翻滚效果
2015/02/27 Javascript
第十章之巨幕页头缩略图与警告框组件
2016/04/25 Javascript
webpack独立打包和缓存处理详解
2017/04/03 Javascript
详解Vue使用 vue-cli 搭建项目
2017/04/20 Javascript
JavaScript实现简单的树形菜单效果
2017/06/23 Javascript
AngularJS实用基础知识_入门必备篇(推荐)
2017/07/10 Javascript
基于JavaScript+HTML5 实现打地鼠小游戏逻辑流程图文详解(附完整代码)
2017/11/02 Javascript
微信小程序云开发 生成带参小程序码流程
2019/05/18 Javascript
js刷新页面location.reload()用法详解
2019/12/09 Javascript
python爬虫爬取快手视频多线程下载功能
2018/02/28 Python
Python将DataFrame的某一列作为index的方法
2018/04/08 Python
Django实现分页功能
2018/07/02 Python
Python3中的bytes和str类型详解
2019/05/02 Python
python 读取修改pcap包的例子
2019/07/23 Python
PyCharm2018 安装及破解方法实现步骤
2019/09/09 Python
Python QT组件库qtwidgets的使用
2020/11/02 Python
纯HTML5+CSS3制作图片旋转
2016/01/12 HTML / CSS
CSS3 linear-gradient线性渐变生成加号和减号的方法
2017/11/21 HTML / CSS
购买英国原创艺术:Art Gallery
2018/08/25 全球购物
美国转售二手商品的电子商务平台:BLINQ
2018/12/13 全球购物
法国最大的在线眼镜店:EasyLunettes
2019/08/26 全球购物
《与象共舞》教学反思
2014/02/24 职场文书
政府班子四风问题整改措施思想汇报
2014/10/08 职场文书
2014年助理工程师工作总结
2014/11/14 职场文书
小学生安全教育主题班会
2015/08/12 职场文书
师德培训心得体会2016
2016/01/09 职场文书
导游词之大雁塔景区
2019/09/17 职场文书