位置: 编程技术 - 正文

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

  • 城建税多少会减免
  • 收取商标权使用费分录
  • 怎么算毛利润计算公式
  • 城建税 申报表
  • 预付账款借方怎么处理
  • 上一年的收入少做账了该怎么调
  • 每天现金日记账登记完以后应怎么对账
  • 现金收货款要填什么单子
  • 自查补交以前年度增值税怎么做账
  • 专用发票包括增值税吗
  • 什么时候计入其他综合收益什么时候计入投资收益
  • 普票的销项可以抵扣吗?
  • 公司买回来做样衣的服装怎么做会计分录?
  • 出口退税成本核算
  • 17税率改16税率的时间
  • 未分配利润转增股本要交税吗
  • 发票丢失税局怎么罚款
  • 小规模纳税人增值税超过30万怎么纳税
  • 融资租赁增值税优惠政策
  • 处置固定资产简易计税怎么申报
  • 成本的分类有哪些如何分类
  • 移动硬盘通过软件改硬盘容量怎么改
  • exescope是什么软件
  • 刚收到的假发怎么处理
  • 正常损失非正常损失
  • 牛顿地名
  • 乌尤尼盐沼的演化过程
  • 加德满都治安状况如何
  • 个体工商户如何给员工交社保
  • thinkphp count
  • PHP基于国秘s2m加解密的处理方式
  • php使用正则表达式提取abcdef
  • 制造费用的工资怎么结转
  • c#开发入门及项目实战
  • pytorch1.5
  • AttributeError: cannot assign module before Module.__init__() call
  • php_curl.dll
  • 无偿划转法律意见
  • 代收通行费不征消费税
  • 政府扶持资金所得税税率
  • 个税哪种申报不用交个税的
  • 预收账款和预付账款的区别
  • mustn't be allowed
  • db2数据库创建索引语句
  • 增值税扣缴义务发生时间为扣缴义务人扣缴税款的当天
  • 怎么结转未交增值税
  • 购买性支出和转移性支出的区别
  • 预缴企业所得税计算公式
  • 计提生产经营所得
  • 去年未计提费用,今年付怎么做账
  • 分公司是否具有独立承担民事责任的能力
  • 软件购买商城
  • 在建工程的消防要求
  • 出口发票上的汇票是什么
  • 购入商品货款尚未支付
  • 采购自产自销的商品
  • 企业租个人房屋个税代扣代缴
  • sqlserver自定义函数在哪查看
  • 谈一谈有关阅读的
  • centos7 cp命令
  • linux操作系统启动
  • demon.exe是什么
  • win7开机提示音在哪里关闭
  • linux 截屏
  • w7系统如何设置
  • Win10怎么添加游戏
  • 用什么命令最简单
  • JAVAscript操作word
  • Bullet(cocos2dx)学习制作桌球游戏之前期准备
  • messenger api
  • css分页样式
  • 手机gpu过度绘制
  • vue-cli作用
  • jQuery插件开发
  • jquery类型转换
  • settimeout和setinterval在安卓机无效
  • jquery删除数据
  • 国家税务总局张局长
  • 个体户税务注销
  • 如何打印个人所得税明细
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设