JavaScript tank battle game code rewritten using TypeScript_Basic knowledge

Source code download

I have uploaded the source code to CSDN. No resource allocation is required. The download address is: http://download.csdn.net/detail/zgynhqf/8565873.

The source code is developed using VS 2013 TypeScript 1.4. After opening, the following picture is displayed:

JsTankGame 1.0: An old tank game written in JS.

JsTankGame 2.0: A new game directly translated using TS.

JsTankGame: Based on 2.0, a new game with a reconstructed type.

Reconstruction steps

Because old JS games are built using MS Ajax Client Library and designed using the OOD method, and TypeScript is compatible with all JS codes. Therefore, the work of porting using TypeScript is relatively simple, mainly replacing the code of type design: classes, inheritance, interfaces, etc.

After completing the above work, you will have version 2.0 written in TS. In the process, I have experienced many benefits of strongly typed languages. Of course, there are also some imperfections in TS (which will be discussed later).

After getting strongly typed version 2.0, it’s not over yet. In order to experience the benefits of strong typing for refactoring, I decided to refactor the code structure based on this version.

With strongly typed code, I can easily analyze each type, each method, and where it is used. This way, I can quickly know the dependencies between types. You won’t know if you don’t look at it, but you will be shocked when you look at it. The code I wrote bit by bit before, I thought the types were well designed and the coupling between them should not be very high. But after finishing the drawing, I found that it was far from what I imagined. This is the result of writing code directly without drawing. See the two pictures below:

It can be seen that the relationship between various elf types is quite chaotic, and two-way dependencies can be seen everywhere. (Actually, because the SpriteManager is drawn in another picture, the more complicated and messy relationship is not shown in the picture.)

According to this, I drew a new relationship diagram, and then refactored all the code according to this relationship. This gives you the latest version 3.0.

The type relationship diagram of the new version is as follows:

Layering:

Elf:

Manager:

At the code level, it mainly transplants the coupling codes between elves to the upper-level manager. At the same time, events are defined for the elves to decouple the elves directly from the manager.

Advantages and disadvantages of TS’s first experience

Advantages: Lambda solves the problem of this pointer very well. Chrome and IE can debug TypeScript directly! In the process, errors that cannot be found by weak types were also discovered. Because of the renaming, the original code has not been modified. (SpriteManager.js line 98)

Disadvantages: Development environment - there is no integrated code comment function, and you can only copy it manually. Development Environment - Code Snippets are not currently supported. Development environment - Keyword code generation is not supported: if, while, switch, bracket matching, etc. Development environment - does not support the definition of code regions (Region). Syntax - Definition of events is not supported. Syntax - Defining overloaded methods for classes is not yet supported. See the SpriteBase.IsCollided method.

Others:

The compiled JS code has certain redundancy. The command space is particularly obvious. Override base class methods without prompt. Base class property getters/setters cannot be overridden. There is no way to tell which methods are virtual. Read-only properties cannot be defined in interfaces. There are still BUGs. (SpriteManager.ts line 93). If you simply define a numeric field, the default value is not 0, but NaN.

Summary

Generally speaking, after trial, I feel that TS to the current 1.4 version can be used for formal large-scale JS project development. But there are still many areas for improvement!

Attached are Chrome and IE debugging TS screenshots:

The above is the entire content of this article. I hope it will help everyone master typescript.