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