【小游戏：顺序击破格子】egret引擎实战(一)

最近因为项目的需要，开始接触egret引擎，现在把第一写的练手小游戏总结一下，方便以后回顾走了什么坑。

egret是基于TypeSc语言和JavaScript语言的2D引擎。该引擎目前功能还比较简单，使用的人感觉还不太多，由于HTML5游戏是流行趋势，所以也开始有比较多的人投入这个开发中。

具体的egret详细介绍可到官网查看。

练手的这个游戏很简单，就是在一定的时间内，每一轮的格子按照某个随机顺序出现，然后用户需要按照格子出现的顺序点击，顺序点对加分，顺序点错没得分。

1.首先创建一个工程，在命令行下输入：

 egret creat SequenceGrid

此处的SequenceGrid是我们的工程名。

2. 使用webStorm这个ide打开我们工程。

首先我关注的是格子的实现问题。

由于游戏比较简单，我们最多创建9个格子。

格子是一个对象，在egret可以继承Sprite。 

格子需要有几个接口，例如点对时候的动画，点错时候的动画，开始出现的时候的动画。

而格子内部显示的对象，我们可以Bitmap来实现。

class Grid extends egret.Sprite {

    public  constructor(width:number, height:number) {
        super();
        this.width = this.fWidth = width;
        this.height = this.fHeight = height;
        this.spaceMargin = 10;
        this.createSubviews();
    }

    private spaceMargin:number;
    private fWidth:number;
    private fHeight:number;
    public grid:egret.Bitmap;

    private createSubviews():void {


        var shape:egret.Bitmap = new egret.Bitmap();
        shape.width = this.fWidth - this.spaceMargin * 2;
        shape.height = this.fHeight - this.spaceMargin * 2;
        shape.x = this.spaceMargin + shape.width / 2;
        shape.y = this.spaceMargin + shape.height / 2;
        shape.anchorX = shape.anchorY = 0.5;
        this.grid = shape;
    }

    /**
     * 填充颜色
     * @param color
     */
    private updateTextureWithName(name:string):void {
        var texture:egret.Texture = RES.getRes(name);
        this.grid.texture = texture;
    }

    /**
     * 填充为粉色
     */
    public fillPinkColor():