TypeScript_Basic 지식을 사용하여 재작성된 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 클라이언트 라이브러리를 사용하여 빌드하고 OOD 방식으로 설계했으며 TypeScript는 모든 JS 코드와 호환되기 때문입니다. 따라서 TypeScript를 사용한 포팅 작업은 비교적 간단하며 주로 클래스, 상속, 인터페이스 등 유형 디자인의 코드를 대체합니다.

위 작업을 완료하면 TS로 버전 2.0이 작성됩니다. 그 과정에서 나는 강력한 형식의 언어가 주는 많은 이점을 경험했습니다. 물론 TS에도 몇 가지 불완전한 부분이 있습니다(이에 대해서는 나중에 논의하겠습니다).

강력한 형식의 버전 2.0을 받은 후에도 아직 끝나지 않았습니다. 리팩토링을 위한 강력한 타이핑의 이점을 경험하기 위해 이 버전을 기반으로 코드 구조를 리팩터링하기로 결정했습니다.

강력한 유형의 코드를 사용하면 각 유형, 각 방법 및 사용 위치를 쉽게 분석할 수 있습니다. 이렇게 하면 유형 간의 종속성을 빠르게 알 수 있습니다. 안보면 모르겠지만, 보면 깜짝 놀라게 됩니다. 이전에 조금씩 작성한 코드에서는 유형이 잘 설계되었고 유형 간의 결합도가 그리 높지 않아야 한다고 생각했습니다. 그런데 그려보고 나니 상상했던 것과는 거리가 멀다는 것을 알게 되었습니다. 그림을 그리지 않고 직접 코드를 작성한 결과입니다.

다양한 엘프 유형 간의 관계가 상당히 혼란스럽고 양방향 종속성을 곳곳에서 볼 수 있음을 알 수 있습니다. (실제로 SpriteManager는 다른 그림에 그려져 있기 때문에 더 복잡하고 지저분한 관계는 그림에 나오지 않습니다.)

이에 따라 새로운 관계도를 그린 후 이 관계에 따라 모든 코드를 리팩토링했습니다. 그러면 최신 버전 3.0이 제공됩니다.

새 버전의 유형 관계도는 다음과 같습니다.

레이어링:

엘프:

관리자:

코드 레벨에서는 주로 엘프 간의 결합 코드를 상위 관리자에게 이식합니다. 동시에 엘프를 관리자로부터 직접 분리할 수 있는 이벤트가 정의됩니다.

TS 첫 경험의 장점과 단점

장점: Lambda는 이 포인터의 문제를 매우 잘 해결합니다. Chrome과 IE는 TypeScript를 직접 디버깅할 수 있습니다! 이 과정에서 약한 타입에서는 찾을 수 없는 오류도 발견됐다. 이름 변경으로 인해 원래 코드는 수정되지 않았습니다. (SpriteManager.js 라인 98)

단점: 개발환경 - 통합된 코드 주석 기능이 없고, 수동으로 복사만 가능합니다. 개발 환경 - 코드 조각은 현재 지원되지 않습니다. 개발 환경 - 키워드 코드 생성은 지원되지 않습니다: if, while, 스위치, 대괄호 매칭 등. 개발 환경 - 코드 영역(Region) 정의를 지원하지 않습니다. 구문 - 이벤트 정의가 지원되지 않습니다. 구문 - 클래스에 대한 오버로드된 메서드 정의는 아직 지원되지 않습니다. SpriteBase.IsCollided 메서드를 참조하세요.

기타:

컴파일된 JS 코드에는 특정 중복성이 있습니다. 명령 공간은 특히 분명합니다. 프롬프트 없이 기본 클래스 메서드를 재정의합니다. 기본 클래스 속성 getter/setter는 재정의될 수 없습니다. 어떤 메서드가 가상인지 알 수 있는 방법이 없습니다. 인터페이스에서는 읽기 전용 속성을 정의할 수 없습니다. 여전히 버그가 있습니다. (SpriteManager.ts 라인 93). 단순히 숫자 필드를 정의하는 경우 기본값은 0이 아니라 NaN입니다.

요약

일반적으로 테스트를 거친 후 현재 1.4 버전의 TS를 공식적인 대규모 JS 프로젝트 개발에 사용할 수 있다고 생각합니다. 하지만 아직 개선할 부분이 많습니다!

Chrome 및 IE 디버깅 TS 스크린샷이 첨부되어 있습니다.

위 내용은 이 글의 전체 내용입니다. 타이프스크립트를 익히는 데 도움이 되었으면 좋겠습니다.