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 クライアント ライブラリを使用して構築され、OOD メソッドを使用して設計されており、TypeScript はすべての JS コードと互換性があるためです。したがって、TypeScript を使用した移植作業は比較的単純で、主にクラス、継承、インターフェイスなどの型設計のコードを置き換えます。

上記の作業を完了すると、TS でバージョン 2.0 が書き込まれます。その過程で、私は強く型付けされた言語の多くの利点を経験しました。もちろん、TS にはいくつかの不完全な点もあります (これについては後で説明します)。

厳密に型指定されたバージョン 2.0 を取得しても、まだ終わりではありません。リファクタリングにおける強い型付けの利点を体験するために、このバージョンに基づいてコード構造をリファクタリングすることにしました。

強く型付けされたコードを使用すると、各型、各メソッド、およびそれが使用されている場所を簡単に分析できます。こうすることで、型間の依存関係をすぐに知ることができます。見ないと分かりませんが、見ると衝撃を受けます。以前少しずつ書いたコードでは、型はうまく設計されており、型間の結合はそれほど高くないはずだと考えていました。しかし、描画を終えてみると、想像していたものとはかけ離れていたことがわかりました。これは、描画せずに直接コードを書いた結果です。

さまざまなタイプのエルフ間の関係は非常に混沌としており、双方向の依存関係が随所に見られることがわかります。 (実際にはSpriteManagerは別の絵で描いているので、もっと複雑でごちゃごちゃした関係は図には写っていません。)

これに従って、新しい関係図を描き、この関係に従ってすべてのコードをリファクタリングしました。これにより、最新バージョン 3.0 が得られます。

新バージョンの型関係図は以下のとおりです。

レイヤリング:

エルフ:

マネージャー:

コードレベルでは、主にエルフ間の結合コードを上位管理者に移植します。同時に、エルフをマネージャーから直接切り離すためのイベントがエルフ用に定義されます。

TS の初体験のメリットとデメリット

利点: Lambda はこのポインターの問題を非常にうまく解決します。 Chrome と IE は TypeScript を直接デバッグできます。 その過程で、弱い型では発見できないエラーも発見されました。名前変更のため、元のコードは変更されていません。 (SpriteManager.js 98行目)

欠点: 開発環境 - 統合されたコード コメント機能がなく、手動でしかコピーできません。 開発環境 - コード スニペットは現在サポートされていません。 開発環境 - if、while、switch、ブラケット マッチングなどのキーワード コード生成はサポートされていません。 開発環境 - コード領域 (リージョン) の定義はサポートされていません。 構文 - イベントの定義はサポートされていません。 構文 - クラスのオーバーロードされたメソッドの定義はまだサポートされていません。 SpriteBase.IsCollided メソッドを参照してください。

その他:

コンパイルされた JS コードには一定の冗長性があります。コマンドスペースは特に明らかです。 プロンプトを表示せずに基本クラスのメソッドをオーバーライドします。 基本クラスのプロパティのゲッター/セッターはオーバーライドできません。 どのメソッドが仮想であるかを知る方法はありません。 読み取り専用プロパティはインターフェイスで定義できません。 まだバグがあります。 (SpriteManager.ts 93 行目)。 単純に数値フィールドを定義する場合、デフォルト値は 0 ではなく NaN になります。

概要

一般的に、試用後、現在のバージョン 1.4 までの TS は正式な大規模 JS プロジェクト開発に使用できると感じています。しかし、改善すべき点はまだたくさんあります。

Chrome と IE のデバッグ TS スクリーンショットを添付します:

Di atas adalah keseluruhan kandungan artikel ini saya harap ia akan membantu semua orang menguasai skrip taip.