首頁 > web前端 > js教程 > 使用 TypeScript 重新編寫的 JavaScript 坦克大戰遊戲程式碼_基礎知識

使用 TypeScript 重新編寫的 JavaScript 坦克大戰遊戲程式碼_基礎知識

WBOY
發布: 2016-05-16 16:05:14
原創
1448 人瀏覽過

原始碼下載

原始碼我已經上傳到 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 行)

缺點: 開發環境-還沒有整合程式碼註解功能,只能手動拷貝。 開發環境-目前還不支援 Code Snippets。 開發環境-不支援關鍵字程式碼產生:if、while、swith、括號匹配等。 開發環境-不支援程式碼區域的定義(Region)。 語法-不支援事件的定義。 語法-暫時還不支援為類別定義重載方法。請參閱 SpriteBase.IsCollided 方法。

其它:

編譯出的 JS 程式碼有一定的冗餘。命令空間處顯得特別明顯。 重寫基類方法,沒有提示。 基底類別的屬性取得器/設定器無法重寫。 無法分辨哪些方法是虛方法。 介面中不能定義唯讀的屬性。 還存在 BUG。 (SpriteManager.ts line 93)。 簡單定義一個數字類型的欄位的話,預設值不是 0,而是 NaN。

總結 

總體說來,經過試用,我感覺 TS 到目前的 1.4 版本,已經可以用於正式的大型 JS 專案開發。但是還有很多地方需要改進! 

附 Chrome、IE 偵錯 TS 截圖:

以上がこの記事の全内容です。皆さんが typescript をマスターするのに役立つことを願っています。

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板