Egret开发HTML5小游戏代码分享

本游戏为《Egret HTML5游戏开发指南》中的案例。作者将代码在这里做一下分享。案例中有两个主要的代码文件，一个Main.ts，一个Circle.ts。在Circle.ts中使用了egret.Tween，这是用来创建动画缓存的类。需要在egretProperties.json中配置tween模块。如图所示：


下面给出两个主要代码，这是Main.ts：

class Main extends egret.DisplayObjectContainer {

public constructor() {
super();
this.addEventListener(egret.Event.ADDED_TO_STAGE, this.onAddToStage, this);
this.addEventListener(Circle.Event_Click, this.onClickCircle, this);
}

private textCount: egret.TextField;
private textTimer: egret.TextField;
private textDes: egret.TextField;
private timer: egret.Timer;
private color: number;

private onAddToStage(event:egret.Event){
var stageW: number = this.stage.stageWidth;
var stageH: number = this.stage.stageHeight;

var bg = new egret.Shape();
bg.graphics.beginFill(0xffffcc);
//绘制背景，设定背景大小为应用窗口大小
bg.graphics.drawRect(0, 0, stageW, stageH);
bg.graphics.endFill();
this.addChild(bg);

this.textCount = new egret.TextField();
this.textCount.textColor = 0xffffff;
this.textCount.y = 530;
this.textCount.text = "分数：0";

this.textTimer = new egret.TextField();
this.textTimer.textColor = 0xffffff;
this.textTimer.y = 620;
this.textTimer.text = "倒计时";

this.textDes = new egret.TextField();
this.textDes.text = "点击第一个颜色开始";
this.textDes.y = 700;

this.textCount.textAlign = this.textTimer.textAlign = this.textDes.textAlign = egret.HorizontalAlign.CENTER;
this.textCount.width = this.textTimer.width = this.textDes.width = stageW;
this.textCount.textColor = this.textTimer.textColor = this.textDes.textColor = 0x000000;

this.addChild(this.textCount);
this.addChild(this.textTimer);
this.addChild(this.textDes);

this.timer = new egret.Timer(1000,30);
this.timer.addEventListener(egret.TimerEvent.TIMER, this.onTimer, this);
this.timer.addEventListener(egret.TimerEvent.TIMER_COMPLETE, this.onTimerComplete, this);

//初始化4个矢量圆
var radius: number = 50;
for(var i: number = 0; i < 4; i++){
for(var t: number = 0; t < 4; t++){
var tempx: number = 150 + radius * 2 * t;
var tempy: number = 140 + radius * 2 * i;
var circle:Circle = new Circle(tempx, tempy, radius);
this.addChild(circle);
}
}
}

private count: number = 0;
private onClickCircle(e:any): void{
if(this.count == 0){
this.color = e.data;
this.textCount.text = "分数:" + (++this.count);
this.timer.start();
}else if(this.color == e.data){
this.textCount.text = "分数:" + (++this.count);
}
}

private onTimer(e: egret.TimerEvent): void{
this.textTimer.text = "倒计时：" + (this.timer.repeatCount-this.timer.currentCount);
}

private onTimerComplete(e: egret.TimerEvent): void{
this.textDes.text = "这不是极限，刷新再来一次!";
this.removeEventListener(Circle.Event_Click, this.onClickCircle, this);
}
}

这是Circle.ts：

class Circle extends egret.Sprite{
public constructor(cx: number,cy: number,cr:number){
super();
this.init(cx,cy,cr);
}

private shape:egret.Shape;//用来画圆的矢量类
private shapex:number;//记录当前圆X坐标的属性
private shapey:number;//记录当前圆Y坐标的属性
private shaper:number;//记录当前圆半径的属性
private color:number;//记录当前圆的颜色
public static Event_Click:string = "event_click";
private colorList:number[] = [13408665, 16777113, 6710937, 16750848,16776960, 39372, 13421721,
13382553, 10079232, 16737894, 16776960, 3381708, 13395456, 10066329, 13421619,
16750899, 16777164, 39219, 39372, 13421772, 16737894, 16737792, 16777062,
39270, 13395507, 16764057, 13395456, 13369446, 39321,16763955];

//随机函数来实现每次创建圆时，从colorList数组中随机获取颜色值。
private randomColor():number{
return this.colorList[Math.round(Math.random() * this.colorList.length)];
}

//初始化方法
private init(cx: number,cy: number,cr: number):void{
this.color = this.randomColor();
this.shape = new egret.Shape();
this.shape.graphics.beginFill(this.color);
this.shape.graphics.drawCircle(0, 0, cr);
this.shape.graphics.endFill();
//设定矢量圆的位置为父类中心点
this.shape.x = -cr;
this.shape.y = -cr;

this.shapex = cx;
this.shapey = cy;
this.shaper = cr;

this.touchEnabled = !0;//当前显示对象可以被触摸
//侦听用户端移动与触摸事件
this.addEventListener(egret.TouchEvent.TOUCH_TAP, this.onTouch, this, !1);
this.addChild(this.shape);
this.x = cx;
this.y = cy;
}

//触摸事件
private onTouch(e: egret.TouchEvent): void{
var par = this.parent;
par.dispatchEventWith(Circle.Event_Click, false, this.color);

this.touchEnabled = !1;
var tween:egret.Tween = egret.Tween.get(this);
tween.to({alpha:0.1}, 500, egret.Ease.sineOut);
tween.call(function(){
this.visible = !1;
par.removeChild(this);
this.removeEventListener(egret.TouchEvent.TOUCH_TAP, this.onTouch, this);
}, this);

var circleList: Circle[] = [];
var tweenList:egret.Tween[] = [];
var radius: number = this.shaper/2;

var tempx: number;
var tempy: number;
var tempr: number;

var g: number = 0;
for(var i: number = 0; i < 2; i++){
for(var t: number = 0;t < 2;t++){
tempx = this.shapex-this.shaper + radius*2 * t;
tempy = this.shapey-this.shaper + radius*2 * i;
circleList[g] = new Circle(tempx,tempy,radius);
circleList[g].alpha = 0.1;
circleList[g].scaleX = 0.8;
circleList[g].scaleY = 0.8;
par.addChild(circleList[g]);
tweenList[g] = egret.Tween.get(circleList[g]);
tweenList[g].to({ alpha: 1,scaleX:1, scaleY:1},1000, egret.Ease.sineIn);
g++;
}
}
}
}

效果如图所示：