HTML5遊戲開發(一)：3分鐘建立一個hello world

《HTML5遊戲開發》系列文章的目的有：1、以最小的成本去入門egret小項目開發，官方的教程一直都是面向中重型；2、egret能夠很是輕量；3、egret相比PIXI.js和spritejs文檔更成熟、友好；4、學習從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字樣。運行結果以下圖。