使用 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内核之基本概念
Oct 21 Javascript
jquery在Chrome下获取图片的长宽问题解决
Mar 20 Javascript
让复选框只能选择一项的方法
Oct 08 Javascript
jQuery菜单插件用法实例
Jul 25 Javascript
jQuery fancybox在ie浏览器下无法显示关闭按钮的解决办法
Feb 19 Javascript
javascript对象的创建和访问
Mar 08 Javascript
jQuery AJAX timeout 超时问题详解
Jun 21 Javascript
Javascript打印局部页面实例
Jun 21 Javascript
jQuery学习笔记之回调函数
Aug 15 Javascript
原生javascript上传图片带进度条【实例分享】
Apr 06 Javascript
10分钟彻底搞懂Http的强制缓存和协商缓存(小结)
Aug 30 Javascript
使用异步controller与jQuery实现卷帘式分页
Jun 18 jQuery
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语法速查表
2006/12/06 PHP
打造超酷的PHP数据饼图效果实现代码
2011/11/23 PHP
php网上商城购物车设计代码分享
2012/02/15 PHP
解析php php_openssl.dll的作用
2013/07/01 PHP
php 读取输出其他文件的实现方法
2016/07/26 PHP
PHP 极验验证码实例讲解
2016/09/29 PHP
php app支付宝回调(异步通知)详解
2018/07/25 PHP
Javascript 读后台cookie代码
2008/09/15 Javascript
JavaScript 撑出页面文字换行
2009/06/15 Javascript
ASP 过滤数组重复数据函数(加强版)
2010/05/31 Javascript
使用jquery hover事件实现表格的隔行换色功能示例
2013/09/03 Javascript
jQuery取id有.的值的方法
2014/05/21 Javascript
js style动态设置table高度
2014/10/21 Javascript
基于jQuery实现交互体验社会化分享代码附源码下载
2016/01/04 Javascript
Vuejs第六篇之Vuejs与form元素实例解析
2016/09/05 Javascript
深入理解vue.js中$watch的oldvalue与newValue
2017/08/07 Javascript
使用element-ui table expand展开行实现手风琴效果
2019/03/15 Javascript
vue双向绑定及观察者模式详解
2019/03/19 Javascript
python连接mongodb操作数据示例(mongodb数据库配置类)
2013/12/31 Python
Python实现Windows和Linux之间互相传输文件(文件夹)的方法
2017/05/08 Python
基于Python数据可视化利器Matplotlib,绘图入门篇,Pyplot详解
2017/10/13 Python
python利用pandas将excel文件转换为txt文件的方法
2018/10/23 Python
Python生成指定数量的优惠码实操内容
2019/06/18 Python
pyhton中__pycache__文件夹的产生与作用详解
2019/11/24 Python
Python 3.8 新功能来一波(大部分人都不知道)
2020/03/11 Python
python异步Web框架sanic的实现
2020/04/27 Python
Python 实现将某一列设置为str类型
2020/07/14 Python
如何让pre和textarea等HTML元素去掉滚动条自动换行自适应文本内容高度
2019/08/01 HTML / CSS
德国在线订购鲜花:Fleurop
2018/08/25 全球购物
英国的一家创新礼品和小工具零售商:Menkind
2019/08/24 全球购物
我的五年职业生涯规划
2014/01/23 职场文书
《母亲的恩情》教学反思
2014/02/13 职场文书
高考备战决心书
2014/03/11 职场文书
团日活动总结模板
2014/06/25 职场文书
灵山大佛导游词
2015/02/04 职场文书
JavaScript继承的三种方法实例
2021/05/12 Javascript