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

时间 2019-11-05

标签 html5 html 游戏开发 3分建立一个 hello world 栏目 HTML5 繁體版

原文原文链接

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

本文的目的很简单，就是让开发者本身可以避免繁杂的项目配置，极速地建立和跑起一个egret实例，提高对egret开发的兴趣。官方那一坨对初学者过重了。webpack

完整的源码请见：github.com/wildfirecod…git

在线访问地址：wildfirecode.com/egret-hello…github

建立入口index.html

在根目录建立index.html文件，这是本地项目访问入口。在body标签内建立class属性值为egret-player的div标签，这是画布canvas的容器。在标签上添加data-entry-class属性，并把它的值设为Main，来指定程序的入口。详细以下：web

<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。chrome

<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引入进来。canvas

<script src="main.js"></script>
复制代码

编写代码

在根目录建立main.js用户代码文件，并在其中建立一个名为Main的class，以后把这个class暴露到window全局对象中。在onAddToStage方法中，咱们建立了一个红色的文本框，文本内容为hello world。post

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尾部来启动引擎。ui

egret.runEgret();
复制代码

运行代码

咱们用chrome来运行index.html即可以看到在画布上出现了红色的hello world字样。运行结果以下图。