Share: JavaScript game code written using TypeScript

The previous blog I have written about the development patterns of JavaScript large programs that I have been expecting, along with some advantages of TS (TypeScript). After the blog was completed, I spent another day experimenting with TS, which was used to reconstruct a JS game that I wrote before: "Javascript tank game."

Source Download

Source I have been uploaded to the CSDN, no need for resources,: http://download.csdn.net/detail/zgynhqf/8565873.

The source code is developed using the VS 1.4 +typescript. When turned on, displays such as:

Jstankgame 1.0: Old use JS to write a tank game.

Jstankgame 2.0: New use TS direct translation come over the game.

Jstankgame: On the basis of 2.0, the type was reconstructed after the new game.

Refactoring Steps

Because the old JS game is built using the MS Ajax Client Library, and the OOD way to design, coupled with TypeScript can be compatible with all JS code. So the use of TypeScript to transplant the work is also relatively simple, mainly to replace the type design code: Class, inheritance, interface and so on.

Once you have done this, you will also get the 2.0 version written using TS. Many of the benefits of a strong-type language are realized in the process, and there are some areas where TS is not perfect at the moment (it will be said later).

After getting a strong type of 2.0 version, there is no end. To experience the benefits of strong typing for refactoring, I decided to refactor the code structure on top of this version.

with strongly typed code, I can easily parse out each type, each method, and where it is used. in this way, I will be able to quickly know the dependency between types. Do not see, do not know, a look startled. The first 1.1 points to write the code, I thought the type design is also good, the coupling should not be very high. But after the picture, only to realize and imagined almost very far, this is no drawing directly to write code results, see the following two pictures:

It can be seen that the relationship between the various elf types is quite chaotic, and the two-way dependence is everywhere. (In fact, because the Spritemanager is drawn to another picture, so there is no more complicated, more chaotic relationship.) ）

As a result, I draw a new diagram, and then follow this relationship to refactor all the code. This gives you the latest version of 3.0.

The type diagram for the new version is as follows:

Layered:

Elves:

Manager:

The code level, the main is the coupling between the Elves code, are ported to the upper layer of the manager. At the same time, define events for Sprites to remove the wizard's direct coupling with the manager.

The advantages and disadvantages of TS first experience

• Advantages:
• LAMBDA solves the problem of this pointer very well.
• Chrome, IE can be directly debug typescript!
• Errors that are not found by weak types are also found in the process. As a result of renaming, the original code has not been modified. (Spritemanager.js 98 lines)

• Disadvantages:
• Development environment-There is no integrated code commenting function and can only be copied manually.
• Development environment-Code Snippets is not currently supported.
• Development environment-Keyword code generation is not supported: if, while, swith, brace matching, and so on.
• Development environment-the definition (region) of code regions is not supported.
• Syntax-the definition of the event is not supported.
• Syntax-defining an overloaded method for a class is not supported for the time being. See Spritebase.iscollided method.

Other:

• The compiled JS code has some redundancy. Command space is particularly noticeable.
• Overrides the base class method without prompting.
• The Property Picker/setup of the base class cannot be overridden.
• There is no way to tell which methods are virtual methods.
• Read-only properties cannot be defined in an interface.
• There are still bugs. (Spritemanager.ts line 93).
• If you simply define a field of a numeric type, the default value is not 0, but NaN.

Summary

Overall, after the trial, I feel TS to the current 1.4 version, can be used for the formal development of large JS projects. But there are still many places to be improved!

Chrome, IE debug TS:

Share: JavaScript game code written using TypeScript