HTML5游戏开发(一)：3分钟创建一个hello world

《HTML5游戏开发》系列文章的目的有：一、以最小的成本去入门egret小项目开发，官方的教程一直都是面向中重型；二、egret可以非常轻量；三、egret相比PIXI.js和spritejs文档更成熟、友好；四、学习从0打造高效的开发工作流。

本文的目的很简单，就是让开发者自己能够避免繁杂的项目配置，极速地创建和跑起一个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字样。运行结果如下图。