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

最新推荐文章于 2021-02-18 16:01:44 发布

爬行动物脑

最新推荐文章于 2021-02-18 16:01:44 发布

阅读量7.9k

点赞数

分类专栏：无涯契

本文链接：https://blog.csdn.net/mad2man/article/details/38584173

版权

本文介绍了使用egret引擎开发一个简单的顺序点击格子的小游戏过程。egret是一个基于TypeScript和JavaScript的2D游戏引擎，尽管功能相对简单，但随着HTML5游戏的流行，越来越多的开发者开始关注。游戏规则是玩家需按特定顺序点击随机出现的格子，正确顺序得分，错误则不得分。文章详细阐述了创建工程、设计格子对象及其动画效果，以及实现逻辑操作的控制器GridContainer.ts的步骤。

摘要由CSDN通过智能技术生成

最近因为项目的需要，开始接触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():