分享:使用 TypeScript 编写的 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 截图:

时间: 2024-12-09 19:20:59

分享:使用 TypeScript 编写的 JavaScript 游戏代码的相关文章

shell脚本编写的俄罗斯方块游戏代码_linux shell

粘贴以下代码到一个空的Shell脚本文件中,并在Bash 中运行即可! 复制代码 代码如下: #!/bin/bash # Tetris Game# 10.21.2003 xhchen<[email]xhchen@winbond.com.tw[/email]> #APP declarationAPP_NAME="${0##*[\\/]}"APP_VERSION="1.0"  #颜色定义cRed=1cGreen=2cYellow=3cBlue=4cFuchs

使用 TypeScript 重新编写的 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

JavaScript游戏中使用OOP和设计模式让代码变得更智能

学习如何在 http://www.aliyun.com/zixun/aggregation/33906.html">JavaScript 中使用基于经典继承的库从 OOP 中获得更多的好处.本文还将介绍架构式设计模式,来展示了如何使用游戏循环.状态机和事件冒泡 (event bubbling) 示例来编写更整洁的代码. 在本文中,您将了解 JavaScript 中的 OOP,来探索原型继承模型和经典继承模型.举例说明游戏中能够从 OOP 设计的结构和可维护性中获得极大利益的模式.我们的最终

javascript编写贪吃蛇游戏_javascript技巧

代码很简单,这里就不多BB了,小伙伴们直接看示例吧 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta

java编写的简单移动方块小游戏代码_java

本文实例讲述了java编写的简单移动方块小游戏代码.分享给大家供大家参考,具体如下: 运行效果截图如下: 第一次用java编写图形化的界面,还是有些青涩..以后继续努力!!具体代码如下: //Little Box Game by AlexYui //Game.java By 1093710210@ HIT import javax.swing.*; import java.awt.event.*; import java.awt.geom.*; import java.awt.*; import

游戏开发-用vb.net编写五子棋游戏代码详解

问题描述 用vb.net编写五子棋游戏代码详解 vb.net初学者,求五子棋游戏编写步骤详解代码解释还有ai算法的构建 解决方案 http://download.csdn.net/detail/winter_ling/2469095http://download.csdn.net/detail/jinsenianhua2012/4286183http://download.csdn.net/detail/qwciyuan/3362601 解决方案二: 五子棋的核心算法 五子棋是一种受大众广泛喜爱

javascript 蛇小游戏代码

javascript 蛇小游戏代码 <style> .Food{background-color:red} .Snake{background-color:blue} </style> <script> var Rows=20 var Cells=30 var Num=15 var BorderWidth=5 var SpeedUp=5000 //创建地图 function CreateMap(){ BW=eval(Cells*Num+2*BorderWidth) BH

java代码-用java如何编写翻牌小游戏

问题描述 用java如何编写翻牌小游戏 用java编写翻牌小游戏,点击一张牌,它周围的牌都会翻过来,直到完全翻过来,求源代码 解决方案 http://download.csdn.net/detail/qq_21543697/8595769 解决方案二: 如何用java编写小游戏如何用java编写小游戏用JAVA编写小游戏连连看

C语言实现的猜拳游戏代码分享_C 语言

这是一个简单的猜拳游戏(剪子包子锤),让你与电脑对决.你出的拳头由你自己决定,电脑则随机出拳,最后判断胜负. 下面的代码会实现一个猜拳游戏,让你与电脑对决.你出的拳头由你自己决定,电脑则随机出拳,最后判断胜负. 启动程序后,让用户出拳,截图: 用户出拳,显示对决结果:截图: 代码实现: #include <stdio.h> #include <stdlib.h> #include <time.h> int main() { char gamer; // 玩家出拳 int