分享:使用 TypeScript 编写的 JavaScript 游戏代码
《上篇博客》我写出了我一直期望的 JavaScript 大型程序的开发模式,以及 TS(TypeScript) 的一些优势。博客完成之后,我又花了一天时间试用 TS,用它来重构之前编写的一个 JS 游戏:《Javascript 坦克游戏》。
源码下载
源码我已经上传到 CSDN 了,无需资源分,下载地址:http://download.csdn.net/detail/zgynhqf/8565873。
源码使用 VS 2013 +TypeScript 1.4 进行开发。打开后,显示如下图:
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 版本后,并没有结束。为了体验强类型对于重构的好处,我决定在这个版本之上做代码结构上的重构。
有了强类型编写的代码,我可以很方便地分析出每一个类型、每一个方法,具体在哪些地方被使用。这样,我就能很快地知道类型之间的依赖关系。不看不知道,一看吓一跳。之前一点一点随心写的代码,本以为类型设计得还不错,之间耦合性应该不是很高。但是图画完之后,才发现与想象中差点很远,这就是没有画图直接编写代码的结果,见下面两张图:
可以看出各精灵类型之间的关系是比较乱的,双向依赖随处可见。(其实图中因为把 SpriteManager 画到了另外一张图,所以没有显示出更复杂、更乱的关系。)
据此,我绘制了新的关系图,然后按照此关系来重构了所有的代码。这样就得到了最新的 3.0 版本。
新版本的类型关系图如下:
分层:
精灵:
管理器:
代码层面,主要是把各精灵之间耦合的代码,都移植到了上层的管理器中。同时,为精灵定义事件来解除精灵与管理器的直接耦合。
TS 首次体验中感受的优缺点
- 优点:
- Lambda 非常好地解决了 this 指针的问题。
- Chrome、IE 都能直接调试 TypeScript!
- 过程中还发现了弱类型无法发现的错误。因为重命名,还没有修改原来的代码。(SpriteManager.js 98 行)
- 缺点:
- 开发环境-还没有集成代码注释功能,只能手动拷贝。
- 开发环境-不支持代码区域的定义(Region,非常重要,便于分区域管理较多代码的类型。没有这个功能,同样导致代码无法写得更多,毕竟每个类的代码量也不少。)。
- 开发环境-目前还不支持 Code Snippets。
- 开发环境-不支持关键字代码生成:if、while、swith、括号匹配等。
- 语法-不支持事件的定义。
- 语法-暂时还不支持为类定义重载方法。见 SpriteBase.IsCollided 方法。
其它:
- 编译出的 JS 代码有一定的冗余。命名空间处显得特别明显。
- 重写基类方法,没有提示。
- 基类的属性获取器/设置器无法重写。
- 无法分辨哪些方法是虚方法。
- 接口中不能定义只读的属性。
- 还存在 BUG。(SpriteManager.ts line 93)。
- 简单定义一个数字类型的字段的话,默认值并不是 0,而是 NaN。
总结
总体说来,经过试用,我感觉 TS 到目前的 1.4 版本,已经可以用于正式的大型 JS 项目开发。但是还有很多地方需要改进!
附 Chrome、IE 调试 TS 截图:
分享:使用 TypeScript 编写的 JavaScript 游戏代码的更多相关文章
- eval5: TypeScript编写的JavaScript解释器
eval5是基于TypeScript编写的JavaScript解释器,100%支持ES5语法. 项目地址:https://github.com/bplok20010/eval5 使用场景 浏览器环境中 ...
- 分享:使用 TypeScript 编写的游戏代码
<上篇博客>我写出了我一直期望的 JavaScript 大型程序的开发模式,以及 TS(TypeScript) 的一些优势.博客完成之后,我又花了一天时间试用 TS,用它来重构之前编写的一 ...
- 纯JS单页面赛车游戏代码分享
分享一个以前写的小游戏,纯js游戏,代码很简单.欢迎大家来喷呦! 效果图: 代码展示://直接复制到html文件即可 支持IE9+版本 <!DOCTYPE html> <html&g ...
- 20个免费的 JavaScript 游戏引擎分享给开发者
这篇文章收集了20个免费的 JavaScript 游戏引擎分享给开发者.这些游戏引擎能够帮助游戏开发人员更快速高效的开发出各种好玩的游戏. 使用 HTML5.CSS3 和 Javascript 可以帮 ...
- Javascript 俄罗斯方块 游戏代码解释!
俄罗斯方块代码说明 /** 名称:Javascript 俄罗斯方块! 作者:Gloot 邮箱:glootz@gmail.com QQ:345268267 网站:http://www.cnblogs.c ...
- JavaScript手札:《编写高质量JS代码的68个有效方法》(一)(1~5)
编写高质量JS代码的68个有效方法(一) *:first-child { margin-top: 0 !important; } body>*:last-child { margin-botto ...
- RunJS - 在线编辑、展示、分享、交流你的 JavaScript 代码
发现一个很好玩,很强大的网站 RunJS - 在线编辑.展示.分享.交流你的 JavaScript 代码 http://runjs.cn/ 比如: http://runjs.cn/detail/l ...
- 新西达电调初始化代码,使用nodejs ffi技术调用wiringpi,代码使用typescript编写
这是我设计的F450四轴飞行器飞控代码的一部分 运行在orangepi-zero上,操作系统是armbian,思路是使用node-ffi调用wiringpi的so库与GPIO通信,然后控制端逻辑代码使 ...
- 在 Mac OS 上使用 TypeScript 编写 ASP.NET Core 1.0 应用
var appInsights=window.appInsights||function(config){ function r(config){t[config]=function(){var i= ...
随机推荐
- ASP.NET Core应用针对静态文件请求的处理[4]: DirectoryBrowserMiddleware中间件如何呈现目录结构
和StaticFileMiddleware中间件一样,DirectoryBrowserMiddleware中间本质上还是定义了一个请求地址与某个物理目录之间的映射关系,而目标目录体现为一个FilePr ...
- How those spring enable annotations work--转
原文地址:http://blog.fawnanddoug.com/2012/08/how-those-spring-enable-annotations-work.html Spring's Java ...
- AFNetworking 3.0 源码解读(八)之 AFImageDownloader
AFImageDownloader 这个类对写DownloadManager有很大的借鉴意义.在平时的开发中,当我们使用UIImageView加载一个网络上的图片时,其原理就是把图片下载下来,然后再赋 ...
- css样式之border-radius
border-radius 属性设置边框的园角 可能的值:像素,百分比 扩展延伸 html代码 <div></div> css代码 div { height: 200px; w ...
- Flex 布局教程:实例篇
该教程整理自 阮一峰Flexible教程 今天介绍常见布局的Flex写法.你会看到,不管是什么布局,Flex往往都可以几行命令搞定. 我的主要参考资料是Landon Schropp的文章和Solved ...
- xss和sql注入原理学习
8.4 Web跨站脚本攻击 8.4.1 跨站脚本攻击的原理(1) 跨站脚本在英文中称为Cross-Site Scripting,缩写为CSS.但是,由于层叠样式表 (Cascading Style ...
- closure
什么是闭包?百度的答案: 闭包是指可以包含自由(未绑定到特定对象)变量的代码块:这些变量不是在这个代码块内或者任何全局上下文中定义的,而是在定义代码块的环境中定义(局部变量)."闭包&quo ...
- FineReport:关于扩展行列求各种条件下的函数运用
最简单的扩展列,扩展行的求"最大,最小,平均"值的例子 设计图 效果图 相关函数 =MAX(B2:E2) =MIN(B2:E2) =AVERAGE(B2:E2) 这个是(满足条件) ...
- appium+robotframework环境搭建
appium+robotframework环境搭建步骤(Windows系统的appium自动化测试,只适用于测试安卓机:ios机需要在mac搭建appium环境后测试) 搭建步骤,共分为3部分: 一. ...
- No plugin found for prefix ‘jetty’ in the current project and in the plugin groups [org.apache.maven.plugins, org.codehaus.mojo] available from the repositories
maven配置文件(最大的那个)的<pluginGroups></pluginGroups>增加一行如下<pluginGroups><pluginGroup& ...