位置: 编程技术 - 正文

使用 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的缺点)

  • 基本户可以直接转账给个人吗
  • 框架合同有合同金额吗
  • 核定征收财务报表
  • 出差补贴计入工资总额吗
  • 个体工商户增值税申报操作流程
  • 个体户开票超30次后如何开票
  • 企业所得税季报是全年累计吗
  • 非正常损失进项税额转出会计分录
  • 跨区域缴纳社保
  • 购入办公楼的入账价值
  • 事业单位财政授权书模板
  • 长期借款产生的利息计入哪个科目
  • 营改增后建筑施工税率调整变化
  • 以下凭证免征印花税的有
  • 包工包料的工程怎么做账
  • 财务费用错记制造费用
  • 折旧是属于公司成本吗
  • 住房补贴计入个人所得税吗
  • 个人补缴公积金需要什么手续
  • 期末调汇会计分录
  • win7安装sqlserver2008
  • 苹果电脑截图快捷键
  • 打样费入什么科目
  • 公司收回货款会计分录
  • linux从入门到什么搞笑
  • 按简易办法征收增值税的行为有
  • 账户验证因姓名验证错误导致失败
  • vben admin框架怎么实现上传文件时拿到文件参数
  • 承租集体土地如何确权
  • 冲销上月计提费用
  • 分公司的股东怎么填
  • yii2项目实战之restful api授权验证详解
  • 浅谈中国式现代化3000字论文
  • 收费公路通行费补费平台 APP
  • 个人所得税累计扣除是什么意思
  • 最多显示2行文字怎么弄
  • 零基础舞蹈培训
  • yolov1 实现
  • sort文件名
  • 增值税期末留抵退税
  • 发票第三联是什么颜色
  • 企业在计提短期借款利息时可能用到的会计科目有
  • 应付账款的平行登记
  • 开基本户一定要法人身份证吗
  • 如何移除白名单的电话号码
  • 一般纳税人简易征收最新政策
  • 一般纳税人购入不动产增值税税率
  • SQLServer2005 XML数据操作代码
  • 赔偿损失费用发票怎么开
  • 企业应纳税额计算直接利息的应纳税额
  • 民间非营利组织会计科目
  • 维修材料分类
  • 抵账协议上可以签字吗
  • 同时知识产权专利,其做账是?
  • 一季度存款
  • 房屋租赁产生的税费叫什么
  • 上年度会计凭证怎么填
  • 无偿租借
  • sqlserver bulkcopy
  • window10系统电脑配置
  • uefi模式怎么装机
  • xp系统怎么修改图标和文字大小
  • mac怎么预览cr3
  • centos安装rz命令
  • windows8触屏功能
  • windows7的word
  • win7怎么设置最佳性能
  • linux dns1
  • node.js使用教程
  • 安卓 unity
  • bat运行完后不退出
  • jquery 字符串以什么开头
  • 如何创建node项目
  • vue+axios登录
  • [置顶]星陨计划
  • android 图片视频轮播框架
  • js实现物体移动
  • 江西省税务局查不到缴费记录
  • 上海地方税务局发票查询
  • 集体产权房产证怎么办
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设