位置: 编程技术 - 正文

使用 TypeScript 重新编写的 JavaScript 坦克大战游戏代码(typescript concat)

编辑:rootadmin

推荐整理分享使用 TypeScript 重新编写的 JavaScript 坦克大战游戏代码(typescript concat),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:typescript const,typescript enum,typescript concat,typescript重载,typescript const,typescript重载,typescript重载,typescript contains,内容如对您有帮助,希望把文章链接给更多的朋友!

源码下载

源码我已经上传到 CSDN 了,无需资源分,下载地址: VS +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 版本。

新版本的类型关系图如下:

分层:

使用 TypeScript 重新编写的 JavaScript 坦克大战游戏代码(typescript concat)

精灵:

管理器:

代码层面,主要是把各精灵之间耦合的代码,都移植到了上层的管理器中。同时,为精灵定义事件来解除精灵与管理器的直接耦合。

TS 首次体验中感受的优缺点

优点: Lambda 非常好地解决了 this 指针的问题。 Chrome、IE 都能直接调试 TypeScript! 过程中还发现了弱类型无法发现的错误。因为重命名,还没有修改原来的代码。(SpriteManager.js 行)

缺点: 开发环境-还没有集成代码注释功能,只能手动拷贝。 开发环境-目前还不支持 Code Snippets。 开发环境-不支持关键字代码生成:if、while、swith、括号匹配等。 开发环境-不支持代码区域的定义(Region)。 语法-不支持事件的定义。 语法-暂时还不支持为类定义重载方法。见 SpriteBase.IsCollided 方法。

其它:

编译出的 JS 代码有一定的冗余。命令空间处显得特别明显。 重写基类方法,没有提示。 基类的属性获取器/设置器无法重写。 无法分辨哪些方法是虚方法。 接口中不能定义只读的属性。 还存在 BUG。(SpriteManager.ts line )。 简单定义一个数字类型的字段的话,默认值并不是 0,而是 NaN。

总结

总体说来,经过试用,我感觉 TS 到目前的 1.4 版本,已经可以用于正式的大型 JS 项目开发。但是还有很多地方需要改进!

附 Chrome、IE 调试 TS 截图:

以上所述就是本文的全部内容了,希望能够对大家熟练掌握typescript有所帮助。

TypeScript具有的几个不同特质 今天要讨论的话题是TypeScript。之前在转载过一篇《TheRiseofTypeScript》的文章,今天来谈一下我的感想。很多朋友应该都了解,TypeScript是微软推出的一个

实现前后端数据交互方法汇总 此文章适合前后端协同开发经验不足的新手阅读。HTML赋值输出到Element的value或data-nameinputtype="hidden"value="phpecho$user_avatar;"/divdata-value="phpecho$user_avatar;"/div

JS 作用域与作用域链详解 (1)作用域一个变量的作用域(scope)是程序源代码中定义的这个变量的区域。1.在JS中使用的是词法作用域(lexicalscope)不在任何函数内声明的变量(函

标签: typescript concat

本文链接地址:https://www.jiuchutong.com/biancheng/382842.html 转载请保留说明!

上一篇:ECMAScript5(ES5)中bind方法使用小结

下一篇:TypeScript具有的几个不同特质(typescript的缺点)

  • 个人给单位做事怎么开发票
  • 支付客户劳务费怎么操作
  • 资产负债表固定资产项目包括哪些
  • 持有待售流动资产如果说以历史成本计量的时候怎么弄
  • 存根联给了客户怎么办
  • 社保基数是按税前工资还是税后工资
  • 新会计准则施行
  • 虚开增值税立案标准
  • 销售退回的增值税怎么处理
  • 公司股权买了有什么用
  • 监督审核费用会计入账
  • 未开票确认收入分录怎么做
  • 增值税税收返还政策
  • 公司土地被征收员工该怎么办
  • 支付明年报刊费
  • 民事诉讼的适用范围具体包括哪些案件
  • 所得税汇算清缴时间期限
  • 广告公司可以开服务费吗
  • 自建仓库转让如何计算增值税
  • 委托贷款利息收入怎么开发票
  • 营改增的纳税人
  • 无形资产和长期待摊费用思维导图
  • 罕见病药品进口要求
  • 劳务公司发放农民工工资要开发票吗?
  • 赠与合同任意撤销与法定撤销的区别
  • 库存退回
  • 测网速移动的方法是什么
  • 先付费后收到发票怎么做分录
  • 销售费用的作用
  • 包工包料工程要交哪些税
  • Ant Design Pro(5)-7.高级表格ProTable
  • 2020年外贸企业年终总结
  • 增值税一般纳税人认定标准
  • 小规模纳税人的个人所得税怎么算
  • PHP:mcrypt_module_get_algo_block_size()的用法_Mcrypt函数
  • ai implementation
  • 雷尼尔山位于美国西北部
  • 小米随身wf
  • 多表联动查询
  • overflow常见释义
  • 数据分析利器:pandas库的应用课后答案
  • 可供出售金融资产的会计处理
  • 当月增加的房产 要交房产税吗
  • 个税可以补申报几个月的码
  • 普通发票作废要做账吗
  • 代扣代缴个人所得税账务处理
  • c语言fread函数的用法示例
  • c语言中函数的数据类型是指
  • 资产捐赠账务处理
  • 库存商品和固定资产是单位会计资产核算的两项内容
  • 暂存的凭证是怎么做的
  • 总公司账务处理
  • 外汇是先入帐还是先申报
  • 估价入库怎么记账
  • 存货周转率多少算合理
  • 个体工商户生产经营所得税优惠政策
  • 支付的员工餐费怎么记账
  • 收承兑汇票的利息怎么算
  • 个税多缴了纳税人怎么办
  • 其他债权投资发生减值会影响所有者权益总额吗
  • 建筑发票可以一次性抵扣吗
  • 冲减和冲销的会计分录
  • win10预览版21277
  • windows xp玩游戏
  • autorun.dll
  • 怎么在mac上查找iphone
  • cocos2djs
  • JavaScript_ECMA5数组新特性详解
  • javascript怎么用
  • 下面有关js中call和apply的描述,错误的是
  • linux cz命令
  • 在img标签中的alt属性里添加内容可以告诉
  • jquery选择器的使用
  • angular ...
  • shell脚本实际运用
  • javascript基础编程
  • jquery选择器的作用
  • 小规模纳税人开3%专票怎么交税
  • 保险公司个人所得税扣除标准是多少
  • 安徽省合肥市地震多少级
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设