使用 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 相关文章推荐
脚本吧 - 幻宇工作室用到js,超强推荐share.js
Dec 23 Javascript
JavaScript 学习笔记 Black.Caffeine 09.11.28
Nov 30 Javascript
JQuery中的html()、text()、val()区别示例介绍
Sep 01 Javascript
js实现楼层效果的简单实例
Jul 15 Javascript
微信小程序 Storage API实例详解
Oct 02 Javascript
vue多级多选菜单组件开发
Sep 08 Javascript
jQuery实现动态生成表格并为行绑定单击变色动作的方法
Apr 17 jQuery
关于Webpack dev server热加载失败的解决方法
Feb 22 Javascript
浅谈在node.js进入文件目录的问题
May 13 Javascript
Vue实现底部侧边工具栏的实例代码
Sep 03 Javascript
JSX在render函数中的应用详解
Sep 04 Javascript
vue 解决异步数据更新问题
Oct 29 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
simplehtmldom Doc api帮助文档
2012/03/26 PHP
Zend Framework教程之模型Model基本规则和使用方法
2016/03/04 PHP
详解PHP安装mysql.so扩展的方法
2016/12/31 PHP
PHP中递归的实现实例详解
2017/11/14 PHP
PHP如何防止用户重复提交表单
2020/12/09 PHP
JS保留小数点(四舍五入、四舍六入)实现思路及实例
2013/04/25 Javascript
js+css实现的简单易用兼容好的分页
2013/12/30 Javascript
基于jQuery实现音乐播放试听列表
2016/04/14 Javascript
js学习阶段总结(必看篇)
2016/06/16 Javascript
jquery实现的回旋滚动效果完整实例【附demo源码下载】
2016/09/20 Javascript
获取jqGrid中选择的行的数据
2016/11/30 Javascript
解析Javascript单例模式概念与实例
2016/12/05 Javascript
Vue 2.0在IE11中打开项目页面空白的问题解决
2017/07/16 Javascript
JSON 数据格式详解
2017/09/13 Javascript
解决layer.open后laydate失效的问题
2019/09/06 Javascript
vue实现简易图片左右旋转,上一张,下一张组件案例
2020/07/31 Javascript
vue组件开发之slider组件使用详解
2020/08/21 Javascript
Python中文编码那些事
2014/06/25 Python
Python实现的简单发送邮件脚本分享
2014/11/07 Python
python如何实现远程控制电脑(结合微信)
2015/12/21 Python
python中的线程threading.Thread()使用详解
2019/12/17 Python
Python timeit模块的使用实践
2020/01/13 Python
python中的 zip函数详解及用法举例
2020/02/16 Python
Python reduce函数作用及实例解析
2020/05/08 Python
Python JSON常用编解码方法代码实例
2020/09/05 Python
详解python模块pychartdir安装及导入问题
2020/10/22 Python
Java如何格式化日期
2012/08/07 面试题
this关键字的作用
2016/01/30 面试题
班级寄语大全
2014/04/10 职场文书
经典毕业生求职信
2014/07/12 职场文书
单方离婚协议书范本(2014版)
2014/09/30 职场文书
群众路线教育实践活动整改落实情况汇报
2014/10/28 职场文书
2014年专项整治工作总结
2014/11/17 职场文书
优秀员工演讲稿
2019/06/21 职场文书
Java SSH 秘钥连接mysql数据库的方法
2021/06/28 Java/Android
python模板入门教程之flask Jinja
2022/04/11 Python