位置: 编程技术 - 正文

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

  • 土地增值税扣除成本
  • 工程材料发票备注要求
  • 商誉要摊销和减值吗?
  • 固定资产未付款怎么入账
  • 对公账户卡号是私人账号
  • 个体工商户能否开13的专票
  • 盘盈的固定资产计入什么科目
  • 收到预付款项发票如何入账?
  • 公司更名期间账户可以使用吗?
  • 车辆保险代交车船使用税会计分录怎么写?
  • 收以前年度租金
  • 一般纳税人销售旧货
  • 航天金税服务费怎么做账
  • 企业年薪扣税政策
  • 增值税进项税额是什么意思
  • 原始凭证分割单可以税前扣除吗
  • 兼职教师个人所得税起征点
  • 用于研发的材料进项能否加计抵扣1%
  • 接受捐赠收入要计入企业所得税应纳税所得额吗
  • 小规模销项负数怎么报税
  • 坏账损失怎么核算
  • 企业的低值易耗品主要包括什么等
  • 非税收入票据如何打印
  • 代扣代缴增值税怎么做账
  • 人工装卸怎么办营业执照
  • 收到财政厅的补助怎么办
  • php ftp功能
  • 股票以公允价值计量
  • 转让专利权的会计处理结果
  • 弗洛雷斯岛
  • 西部大开发的主要政策措施是什么?
  • php照片上传
  • 利润表其他综合收益的税后净额计算公式
  • uniapp怎么引入elementui
  • vscode安装python3
  • 消费税减免规定有哪些
  • usermod修改密码
  • emerge命令
  • mysqldump语句
  • 已申报未导入是什么情况
  • 哪些情况进项税不可以抵扣?
  • 主营业务税金及附加包括增值税吗
  • 网购报销需要发票和什么截图
  • 合租物业费按人头还是按房间分
  • 临时工和正式工工资不一样违法吗
  • 幼儿园伙食账目
  • 酒店客房收入如何分配
  • 营业外支出在贷方
  • 员工缴纳工伤保险怎么赔偿
  • 技术服务费可以开专票吗
  • 实收资本增加印花税税目怎么填
  • 税局代开专用发票时交的钱如何记账?
  • 手工现金日记账范本
  • 公司变更地址后需要做哪些事情
  • 内勤会计是不是不算会计
  • win8系统怎么关闭投影
  • 微软补丁修复时出现蓝屏现象
  • 如何系统还原xp
  • 微软推出copilotpro订阅
  • mac苹果电脑如何开4个微信号
  • centos which
  • windows xp无法更改密码
  • linux系统干嘛的
  • qtaet2s.exe - qtaet2s是什么进程 有什么用
  • NkbMonitor.exe - NkbMonitor是什么进程文件 有什么作用
  • w10开机欢迎界面设置
  • 在对linux系统中dir
  • win8怎么修改电脑密码修改
  • opengl基础知识
  • unity描边shader
  • android入门书
  • Python Flask-web表单使用详解
  • Bullet(Cocos2dx)之内存泄露检测
  • androidstudiosdk
  • jquery 插件写法
  • javascript中的getElementById
  • android图库
  • W3C Group的JavaScript1.8 新特性介绍
  • 重庆市电费网上查询
  • 保险机构如何代收车船税
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设