当先锋百科网

首页 1 2 3 4 5 6 7

本游戏为《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++;
            }
        }
    }
}

效果如图所示:
这里写图片描述