《HTML5遊戲開發》系列文章的目的有：一、以最小的成本去入門egret小專案開發，官方的教程一直都是面向中重型；二、egret可以非常輕量；三、egret相比PIXI.js和spritejs文件更成熟、友好；四、學習從0打造高效的開發工作流。
- HTML5遊戲開發(一)：3分鐘建立一個hello world
- HTML5遊戲開發(二)：使用TypeScript編寫程式碼
- HTML5遊戲開發(三)：使用webpack構建TypeScript應用
- HTML5遊戲開發(四)：飛機大戰之顯示場景和元素
- HTML5遊戲開發(五)：飛機大戰之讓所有元素動起來
本文的目的很簡單，就是讓開發者自己能夠避免繁雜的專案配置，極速地建立和跑起一個egret例項，提升對egret開發的興趣。官方那一坨對初學者太重了。
完整的原始碼請見：github.com/wildfirecod…
線上訪問地址：wildfirecode.com/egret-hello…
建立入口index.html
在根目錄建立index.html檔案，這是本地專案訪問入口。
在body標籤內建立class屬性值為egret-player的div標籤，這是畫布canvas的容器。在標籤上新增data-entry-class屬性，並把它的值設為Main，來指定程式的入口。詳細如下：
<div style="margin: auto;width: 100%;height: 100%;"
class="egret-player"
data-entry-class="Main">
</div>
複製程式碼然後，在index.html使用CDN的方式引入Egret的程式碼庫檔案egret.min.js以及egret.web.min.js。
<script src="https://yun.duiba.com.cn/db_games/egret_5.2.9/egret.min.js"></script>
<script src="https://yun.duiba.com.cn/db_games/egret_5.2.9/egret.web.min.js"></script>
複製程式碼之後，我們再把使用者程式碼檔案main.js引入進來。
<script src="main.js"></script>
複製程式碼編寫程式碼
在根目錄建立main.js使用者程式碼檔案，並在其中建立一個名為Main的class，之後把這個class暴露到window全域性物件中。
在onAddToStage方法中，我們建立了一個紅色的文字框，文字內容為hello world。
class Main extends egret.DisplayObjectContainer {
constructor() {
super();
this.addEventListener(egret.Event.ADDED_TO_STAGE, this.onAddToStage, this);
}
onAddToStage(event) {
let textfield = new egret.TextField();
this.addChild(textfield);
textfield.textColor = 0xff0000;
textfield.text = 'hello world';
}
}
window['Main']=Main;
複製程式碼這裡說明一下幾個問題：
egret是引擎的全域性名稱空間。Main類必須要繼承egret.DisplayObjectContainer這個基類。引擎約定入口類必須是一個可顯示的容器物件，容器物件中可以填充其他的可顯示的物件。egret.TextField是引擎中用來顯示文字的一個類，它的例項就是一個可顯示的物件，我們用egret.DisplayObjectContainer類的addChild方法來把建立的文字框新增到顯示容器中去。
最後我們把下面的程式碼放入main.js尾部來啟動引擎。
egret.runEgret();
複製程式碼執行程式碼
我們用chrome來執行index.html便可以看到在畫布上出現了紅色的hello world字樣。執行結果如下圖。
