本游戏为《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();
//绘制背景,设定背景大小为应用窗口大小
bg.graphics.drawRect(, , stageW, stageH);
bg.graphics.endFill();
this.addChild(bg);
this.textCount = new egret.TextField();
this.textCount.textColor = ;
this.textCount.y = ;
this.textCount.text = "分数:0";
this.textTimer = new egret.TextField();
this.textTimer.textColor = ;
this.textTimer.y = ;
this.textTimer.text = "倒计时";
this.textDes = new egret.TextField();
this.textDes.text = "点击第一个颜色开始";
this.textDes.y = ;
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 = ;
this.addChild(this.textCount);
this.addChild(this.textTimer);
this.addChild(this.textDes);
this.timer = new egret.Timer(,);
this.timer.addEventListener(egret.TimerEvent.TIMER, this.onTimer, this);
this.timer.addEventListener(egret.TimerEvent.TIMER_COMPLETE, this.onTimerComplete, this);
//初始化个矢量圆
var radius: number = ;
for(var i: number = ; i < 4; i++){
for(var t: number = ; t < 4; t++){
var tempx: number = + radius * * t;
var tempy: number = + radius * * i;
var circle:Circle = new Circle(tempx, tempy, radius);
this.addChild(circle);
}
}
}
private count: number = ;
private onClickCircle(e:any): void{
if(this.count == ){
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[] = [, , , ,, , ,
, , , , , , , ,
, , , , , , , ,
, , , , , ,];
//随机函数来实现每次创建圆时,从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(, , cr);
this.shape.graphics.endFill();
//设定矢量圆的位置为父类中心点
this.shape.x = -cr;
this.shape.y = -cr;
this.shapex = cx;
this.shapey = cy;
this.shaper = cr;
this.touchEnabled = !;//当前显示对象可以被触摸
//侦听用户端移动与触摸事件
this.addEventListener(egret.TouchEvent.TOUCH_TAP, this.onTouch, this, !);
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 = !;
var tween:egret.Tween = egret.Tween.get(this);
tween.to({alpha:}, , egret.Ease.sineOut);
tween.call(function(){
this.visible = !;
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/;
var tempx: number;
var tempy: number;
var tempr: number;
var g: number = ;
for(var i: number = ; i < ; i++){
for(var t: number = ;t < ;t++){
tempx = this.shapex-this.shaper + radius* * t;
tempy = this.shapey-this.shaper + radius* * i;
circleList[g] = new Circle(tempx,tempy,radius);
circleList[g].alpha = ;
circleList[g].scaleX = ;
circleList[g].scaleY = ;
par.addChild(circleList[g]);
tweenList[g] = egret.Tween.get(circleList[g]);
tweenList[g].to({ alpha: ,scaleX:, scaleY:},, egret.Ease.sineIn);
g++;
}
}
}
}
效果如图所示: