egret-初步接触

class HelloTime extends egret.DisplayObjectContainer {
    public constructor() {
        super();
        this.addEventListener(egret.Event.ADDED_TO_STAGE, this.onAddToStage, this);
 
    }
    private spr: egret.Sprite; // 定义变量类型
 
    private async onAddToStage(event: egret.Event) {
        this.spr = new egret.Sprite();
        // spr.graphics.beginFill(0xff0000);
        // spr.graphics.drawRect(0, 0, 100, 100);
        // spr.graphics.endFill();
        // this.addChild(spr);
        this.addChild(this.spr);
        this.spr.width = 480;
        this.spr.height = 800;
        this.drawTxt();
        this.drawContent();
 
        /** --------------调用自己定义的class------------ */
        // let _nCar: Card = new Card();
        // this.addChild(_nCar);
 
        // let _nAddView: AddView = new AddView();
        // this.addChild(_nAddView);
 
        // let _ManagerMent: ManagerMent = new ManagerMent();
        // this.addChild(_ManagerMent);
 
        // let _ChildrenObject: ChildrenObject = new ChildrenObject();
        // this.addChild(_ChildrenObject);
 
        // let _SimpleDate1: SimpleDate1 = new SimpleDate1();
        // this.addChild(_SimpleDate1);
 
        // let _TouchEventTest1: TouchEventTest1 = new TouchEventTest1();
        // this.addChild(_TouchEventTest1);
 
        // let _GraphicsTest: GraphicsTest = new GraphicsTest();
        // this.addChild(_GraphicsTest);
 
        // let _MayTest:MayTest = new MayTest();
        // this.addChild(_MayTest);
 
        // let _MyTweenAnim:MyTweenAnim = new MyTweenAnim()
        // this.addChild(_MyTweenAnim);
 
        // let _MyTimer1:MyTimer1 = new MyTimer1();
        // this.addChild(_MyTimer1);
 
        // let _MyBitMay1:MyBitMay1 = new MyBitMay1();
        // this.addChild(_MyBitMay1);
 
        let _MyBitMay2: MyBitMay2 = new MyBitMay2();
        this.addChild(_MyBitMay2);
 
        // let _MyPic: MyPic = new MyPic()
        // this.addChild(_MyPic);
 
        /** --------------调用自己定义的class------------ */
 
        //加载图片
        RES.addEventListener(RES.ResourceEvent.GROUP_COMPLETE, this.onButtonComp, this);//3-5个参数
        // RES.loadConfig('resource/default.res.json', 'resource/');
        await RES.loadConfig("resource/default.res.json", "resource/");
        RES.loadGroup('button1', 1); // 增加资源组
        //填加定时器
        this.timer = new egret.Timer(1000, 8);// 两个属性分别是 delay 与 repeatCount ,两个属性分别表示每次间隔的时间（以毫秒为单位）和执行的次数
        this.timer.addEventListener(egret.TimerEvent.TIMER, this.timerFunc, this); // 定时器执行时 触发
        this.timer.addEventListener(egret.TimerEvent.TIMER_COMPLETE, this.timerComFunc, this); //定时器 执行完成后 触发
 
    }
    private num: egret.TextField;
    private n: number = 6;
    private con: egret.TextField;
    private timer: egret.Timer; // 声明计时器
    private date: Date;
 
    private drawTxt(): void {
        this.num = new egret.TextField();
        this.num.text = this.n.toString();
        this.num.size = 100;
        this.num.width = 480;
        this.num.textColor = 0x00ff00;
        this.num.textAlign = egret.HorizontalAlign.CENTER; // 样式居中
        this.spr.addChild(this.num);
    }
    private drawContent(): void {
        this.con = new egret.TextField();
        this.con.text = '默默倒数六秒 迅速点击文字';
        this.con.textColor = 0x00ff00;
        this.con.width = 480;
        this.con.textAlign = egret.HorizontalAlign.CENTER;
        this.con.y = 120;
        this.spr.addChild(this.con);
 
    }
    private img: egret.Bitmap;
    private startTime: number;
    private stopTime: number;
    private finalTime: number;
    private onButtonComp(): void {
        this.img = new egret.Bitmap();
        this.img.texture = RES.getRes('btn1');// 加载图片
        let rect: egret.Rectangle = new egret.Rectangle(10, 10, 15, 15);
        this.img.scale9Grid = rect;
        this.img.y = 200;
        this.img.x = 215;
        this.img.width = 50;
        this.img.height = 50;
        this.spr.addChild(this.img);
        this.img.touchEnabled = true;
        this.img.addEventListener(egret.TouchEvent.TOUCH_TAP, this.onTouch, this);
    }
    private onTouch(evt: egret.TouchEvent) {
        this.date = new Date();
        this.startTime = this.date.getTime();
 
        this.img.alpha = 0;
        this.timer.start(); // 启动 停止 暂停
        this.drawTxt();
        this.spr.touchEnabled = true;
        this.spr.addEventListener(egret.TouchEvent.TOUCH_TAP, this.onToucnSRP, this, true);
    }
 
    private timerFunc() {
        if (this.n <= 3) {
            this.num.text = '?';
        } else {
            this.spr.removeChildren();
            this.drawTxt();
        }
        this.n--;
    }
 
    private timerComFunc() {
        if (this.n <= -2) {
            this.drawContent();
            this.con.text = '别迷糊了快醒醒';
            this.spr.removeEventListener(egret.TouchEvent.TOUCH_TAP, this.onToucnSRP, this, true);
        }
    }
    private onToucnSRP(event: egret.TouchEvent) {
        this.date = new Date();
        this.stopTime = this.date.getTime();
        this.finalTime = this.startTime - this.stopTime;
        this.num.text = (this.finalTime / 1000 + 6).toFixed(3);
        this.timer.stop();
        this.drawContent();// 重新绘制
        this.spr.removeEventListener(egret.TouchEvent.TOUCH_TAP, this.onToucnSRP, this, true);
 
        switch (Math.floor(Math.abs(this.finalTime / 1000 + 6))) {
            case 0:
                this.con.text = '很专注';
                break;
            case 1:
                this.con.text = '一般专注';
                break;
            case 2:
                this.con.text = '不专注';
                break;
        }
    }
 
}
 
class Card extends egret.Sprite {
    public constructor() {
        super();
        this.drawCard();
    }
    private drawCard() {
        this.graphics.beginFill(0x0000ff);
        this.graphics.drawRect(190, 300, 50, 50);
        this.graphics.drawRect(240, 350, 50, 50);
        this.graphics.beginFill(0xff0000);
        this.graphics.drawRect(240, 300, 50, 50);
        this.graphics.drawRect(190, 350, 50, 50);
        this.graphics.endFill();
    }
}
 
// class AddView extends egret.DisplayObjectContainer{
class AddView extends egret.Sprite {
    public constructor() {
        super();
        this.onAddTostage();
    }
    private onAddTostage() {
        let spr: egret.Sprite = new egret.Sprite();
 
        spr.graphics.beginFill(0xff0000);
        spr.graphics.drawRect(215, 420, 50, 50);
        spr.graphics.endFill();
        //该对象以存在
        this.addChild(spr);
        // this.removeChild(spr);// 删除对象
        // 该对象 保存于内存中
        let spr1: egret.Sprite = new egret.Sprite();
        spr1.graphics.beginFill(0x00ff00);
        spr1.graphics.drawRect(215, 420, 25, 25);
        spr1.y = 10;
        spr1.x = 10;
        this.addChild(spr1);
        spr.addChild(spr1);
        console.log(this.numChildren);
 
    }
}
 
//深度值
class ManagerMent extends egret.DisplayObjectContainer {
    public constructor() {
        super();
        this.onAddToStage();
    }
    private onAddToStage() {
        let spr: egret.Sprite = new egret.Sprite();
        spr.graphics.beginFill(0xff0000);
        spr.graphics.drawRect(0, 0, 50, 50);
        spr.graphics.endFill();
        spr.x = 215;
        spr.y = 480;
        this.addChild(spr);
        //深度值 z--测序
        console.log(this.numChildren);
        let spr1: egret.Sprite = new egret.Sprite();
        spr1.graphics.beginFill(0x00ff00);
        spr1.graphics.drawRect(0, 0, 50, 50);
        spr1.graphics.endFill();
        spr1.x = 215;
        spr1.y = 540;
        this.addChild(spr1);
        console.log(this.numChildren);
 
        let sprcon: egret.Sprite = new egret.Sprite();
        this.addChild(sprcon);
        sprcon.x = 10;
        for (let i: number = 0; i < 4; i++) {
            let spr: egret.Sprite = new egret.Sprite();
            spr.graphics.beginFill(0xffffff * Math.random());
            spr.graphics.drawRect(0, 0, 40, 20);
            spr.graphics.endFill();
            spr.x = i * 20;
            spr.y = 600;
            sprcon.addChild(spr);
        }
        let sprNew1: egret.Sprite = new egret.Sprite();
        sprNew1.graphics.beginFill(0xff0000);
        sprNew1.graphics.drawRect(0, 0, 40, 30);
        sprNew1.graphics.endFill();
 
        sprNew1.x = 10;
        sprNew1.y = 600;
        // sprcon.addChild(sprNew1);
        sprcon.addChildAt(sprNew1, 1); // 按照下标插入
        //修改指定下标 内的深度
        sprcon.swapChildrenAt(1, 3); //修改指定下标 内的深度
        //修改 深度
        sprcon.setChildIndex(sprNew1, 4);
    }
}
 
//获取子对象 通过深度值
class ChildrenObject extends egret.DisplayObjectContainer {
    public constructor() {
        super();
        this.addEventListener(egret.Event.ADDED_TO_STAGE, this.onAddToStage, this);
    }
    private onAddToStage(event: egret.Event) {
        let spr: egret.Sprite = new egret.Sprite();
        this.addChild(spr);
 
        let spr1: egret.Sprite = new egret.Sprite();
        spr1.graphics.beginFill(0x00ff00);
        spr1.graphics.drawRect(0, 0, 100, 100);
        spr1.graphics.endFill();
        spr1.x = 50;
        spr1.name = 'hello';
        spr.addChild(spr1);
 
        let _spr: egret.DisplayObject = spr.getChildAt(0);// 比较快
        // let _spr: egret.DisplayObject = spr.getChildByName('hello');// 性能低
        _spr.scaleX = 0.5;
    }
}
 
// 7. 事件机制原理及流程
class SimpleDate1 extends egret.DisplayObjectContainer {
    public constructor() {
        super();
        this.addEventListener(egret.Event.ADDED_TO_STAGE, this.onAddToStage, this);
    }
    private onAddToStage(event: egret.Event) {
        //创建一个男
        let boy1: Boy = new Boy();
        boy1.name = 'tong';
 
        let girl1: Girl = new Girl();
        girl1.name = 'xiao xue';
 
        // 注册监听事件 第四个参数是冒泡 ，最后一个参数是优先级 数字越大越优先处理
        boy1.addEventListener(DataEvent.DATE, girl1.getDate, girl1, false, 10);
 
        //检测监听器
        if (boy1.hasEventListener(DataEvent.DATE)) {
            console.log('已经注册');
        }
 
        // 邀请函数
        boy1.order();
        // 移除监听器
        boy1.removeEventListener(DataEvent.DATE, girl1.getDate, girl1);
        if (!boy1.hasEventListener(DataEvent.DATE)) {
            console.log('未注册');
        }
    }
 
}
 
//8. 事件类
class DataEvent extends egret.Event {
    public static DATE: string = '约会';
    public _year: number = 0;
    public _month: number = 0;
    public _date: number = 0;
    public _where: string = '';
    public _todo: string = '';
 
    //type: string 事件类型
    // bulles: boolean = false :指定是否参与冒泡阶段
    // cancelable: boolean = false : 是否取消掉事件的 event 事件
    public constructor(type: string, bulles: boolean = false, cancelable: boolean = false) {
        super(type, bulles, cancelable);
    }
}
class Boy extends egret.Sprite {
    public constructor() {
        super();
    }
    public order() {
        let daterEvent: DataEvent = new DataEvent(DataEvent.DATE);
        daterEvent._year = 2018;
        daterEvent._month = 7;
        daterEvent._date = 21;
        daterEvent._where = '家里';
        daterEvent._todo = '学习';
        //发送请求事件
        this.dispatchEvent(daterEvent);
    }
}
 
class Girl extends egret.Sprite {
    public constructor() {
        super();
    }
    public getDate(event: DataEvent): void {
        console.log('收到了:' + event.target.name + '的邀请');
        console.log('希望在:' + event.target._year + '年' + event.target._month + '月' + event.target._date + '日' + event.target._where + event.target._todo);
    }
}
 
//9. 事件实例 填加事件 案例
class TouchEventTest1 extends egret.DisplayObjectContainer {
    public constructor() {
        super();
        this.addEventListener(egret.Event.ADDED_TO_STAGE, this.onAddToStage, this);
    }
    public spr: egret.Sprite; // 定义变量类型
 
    private onAddToStage(event: egret.Event) {
 
        this.drawText();
        this.spr = new egret.Sprite();
        this.spr.graphics.beginFill(0x465112);
        this.spr.graphics.drawRect(0, 0, 50, 50);
        this.spr.graphics.endFill();
        this.spr.x = 100;
        this.spr.y = 100;
 
        this.addChild(this.spr);
        // this.drawContent();
        this.spr.touchEnabled = true;//开启点击
        this.spr.addEventListener(egret.TouchEvent.TOUCH_TAP, this.onTouch, this);
    }
    private onTouch(event: egret.Event): void {
        this.txt.text = '点击了小方块';
    }
 
    //绘制文本
    private txt: egret.TextField;
    private drawText(): void {
        this.txt = new egret.TextField();
        this.txt.text = '点击';
        this.txt.width = 200;
        this.txt.height = 200;
        this.txt.size = 12;
        this.txt.textColor = 0x00ff00;
        this.txt.textAlign = egret.HorizontalAlign.CENTER;
        this.txt.x = 100;
        this.txt.y = 100;
        this.addChild(this.txt);
 
    }
}
 
//10. 绘图
 
class GraphicsTest extends egret.DisplayObjectContainer {
    public constructor() {
        super();
        this.addEventListener(egret.Event.ADDED_TO_STAGE, this.onAddToStage, this);
    }
    private onAddToStage(event: egret.Event) {
        let shp: egret.Shape = new egret.Shape();
        shp.graphics.beginFill(0x123212, 0.8); //可设置透明度
        shp.graphics.lineStyle(10, 0x455333);
        shp.graphics.drawRect(150, 150, 50, 50); //绘制矩形
        // shp.graphics.drawCircle(0, 0, 50);// 绘制圆形
        shp.graphics.endFill();
        this.addChild(shp);
        this.drawLine();
        this.drawCurve();
    }
    //lineStyle 设置当前区域的外边框 
 
    // 绘制直线
    private drawLine(): void {
        let shp1: egret.Shape = new egret.Shape();
        shp1.graphics.lineStyle(1, 0x00ff00);
        shp1.graphics.moveTo(0, 0);//起点
        shp1.graphics.lineTo(50, 50);//终点
        shp1.graphics.lineTo(30, 25);//终点
        shp1.graphics.lineTo(10, 55);//终点
        shp1.graphics.lineTo(11, 55);//终点
        shp1.graphics.lineTo(99, 0);//终点
 
        shp1.graphics.endFill();
        this.addChild(shp1);
    }
 
    // 曲线的形成
    private drawCurve(): void {
        let shp2: egret.Shape = new egret.Shape();
        shp2.graphics.lineStyle(3, 0x00ff00);
        shp2.graphics.moveTo(100, 100);//起点
        shp2.graphics.curveTo(200, 200, 400, 50);// 曲线的形成
        shp2.graphics.endFill();
        this.addChild(shp2);
 
    }
}
 
//11.文本
class MayTest extends egret.DisplayObjectContainer {
    public constructor() {
        super();
        this.addEventListener(egret.Event.ADDED_TO_STAGE, this.onAddToStage, this);
    }
    private onAddToStage(event: egret.Event) {
        let laber: egret.TextField = new egret.TextField();
        laber.text = '这是一个文本域';
        laber.textColor = 0x000000;
        laber.width = 400;//设置宽度
        // laber.height=100;//设置高度
        // laber.fontFamily='KaiTi';//字体
        this.addChild(laber);
        console.log(laber.width + ':' + laber.height);
 
        //文字的布局
        laber.textAlign = egret.HorizontalAlign.RIGHT;
        //设置ziti
        laber.bold = true; //粗体   等等
        laber.italic = true;//斜体  等等
    }
}
//12. 动画
//01.MovieClip 序列帧动画 影片剪辑
 
class MyTweenAnim extends egret.DisplayObjectContainer {
    public constructor() {
        super();
        this.addEventListener(egret.Event.ADDED_TO_STAGE, this.onAddToStage, this);
    }
    private onAddToStage(event: egret.Event) {
        let shp: egret.Shape = new egret.Shape();
        shp.graphics.beginFill(0x00ff00);
        shp.graphics.drawRect(0, 0, 100, 100);
        shp.graphics.endFill();
        this.addChild(shp);
 
        //动画处理 类 egret.Tween
        let tweeen = egret.Tween.get(shp);
        tweeen.to({
            x: 300,//x坐标
            y: 300 //y 坐标
        }, 2000);
    }
}
 
//13 计时器
class MyTimer1 extends egret.DisplayObjectContainer {
    public constructor() {
        super();
        this.addEventListener(egret.Event.ADDED_TO_STAGE, this.onAddToStage, this);
    }
 
    /**
     * 2个属性 delay, repeatCount
     * 3个方法 start, reset, stop
     * 2个事件 TimerEvent.TIMER, TimerEvent.TIMER_COMPLETE
     */
    private onAddToStage(event: egret.Event) {
        let timer: egret.Timer = new egret.Timer(1000, 5);//间隔1000 执行5次
        //注册监听事件
        timer.addEventListener(egret.TimerEvent.TIMER, this.timerFunc, this);
        timer.addEventListener(egret.TimerEvent.TIMER_COMPLETE, this.timerComFunc, this);
        timer.start();
        // timer.stop();
    }
    private timerFunc() {
        console.log('计时开始')
    }
    private timerComFunc() {
        console.log('计时结束')
    }
}
 
// 14.位图纹理
class MyBitMay1 extends egret.DisplayObjectContainer {
    public constructor() {
        super()
        this.addEventListener(egret.Event.ADDED_TO_STAGE, this.onAddToStage, this);
    }
    private onAddToStage(event: egret.Event) {
        //完成 预加载
        RES.addEventListener(RES.ResourceEvent.GROUP_COMPLETE, this.configEvent, this);
        // 预加载
        // RES.addEventListener(RES.ResourceEvent.GROUP_PROGRESS,this.addImage,this);
        RES.loadConfig('resource/default.res.json', 'resource/');// 具体路径 补充
 
    }
    private configEvent(event: egret.Event) {
        RES.removeEventListener(RES.ResourceEvent.GROUP_COMPLETE, this.configEvent, this);
        RES.addEventListener(RES.ResourceEvent.GROUP_COMPLETE, this.addImage, this);
        RES.loadGroup('button');
    }
    private addImage() {
        let img1: egret.Bitmap = new egret.Bitmap();
        img1.texture = RES.getRes('btn1');//获取资源 同步获取资源
        this.addChild(img1);//设置优先级
    }
    /**获取资源
     * getRes() 同步获取
     * getResAsync() 从缓存加载 如果没有则通过网络获取
     * getResByUrl() 网络获取
     */
 
}
//资源 加载
//资源加载模块 RES 模块是一套完善的资源加载模块
//资源加载配置 可以配置资源组
 
//15.九宫格的使用
class MyPic extends egret.DisplayObjectContainer {
    public constructor() {
        super();
        // this.addEventListener(egret.Event.ADDED_TO_STAGE,this.onAddToStage,this);
    }
    // private async onAddToStage(event:egret.Event){
    // RES.addEventListener(RES.ResourceEvent.GROUP_COMPLETE,this.addImage,this);
    // await RES.loadConfig('resource/assets/toolt.png','resource/')
    // await RES.loadGroup('toolt2');
    // }
    private addImage() {
        // let img:egret.Bitmap = new egret.Bitmap();
        // img.texture = RES.getRes("toolt");
        // this.addChild(img);
 
        // img.x = 150;
 
        // let img1:egret.Bitmap = new egret.Bitmap();
        // img1.texture = RES.getRes("toolt");
        // //使用九宫格
        // let rect:egret.Rectangle = new egret.Rectangle(30,31,40,41);
        // img1.scale9Grid = rect;
        // // img1.height *= 2; 
 
        // console.log(img1.width);
        // console.log(img1.height);
        // img1.x = 50;
        // img1.y = 200;
        // this.addChild(img1);
    }
 
}
 
// 14.位图纹理
class MyBitMay2 extends egret.DisplayObjectContainer {
    public constructor() {
        console.log('MyBitMay23');
 
        super();
        this.addEventListener(egret.Event.ADDED_TO_STAGE, this.onAddToStage, this);
    }
    private onAddToStage(event: egret.Event) {
        RES.addEventListener(RES.ResourceEvent.GROUP_PROGRESS, this.addImage, this);
 
        try {
            const loadingView = new LoadingUI();
            this.stage.addChild(loadingView);
            RES.loadConfig("resource/default.res.json", "resource/");
            RES.loadGroup("preload", 0, loadingView);
            this.stage.removeChild(loadingView);
        }
        catch (e) {
            console.error(e);
        }
    }
    private addImage() {
        console.log('MyBitMay2');
        let img1: egret.Bitmap = new egret.Bitmap();
        img1.texture = RES.getRes('description_json');//获取资源 同步获取资源
        img1.fillMode = egret.BitmapFillMode.REPEAT;
        this.addChild(img1);//设置优先级
 
    }
 
    /**获取资源
     * getRes() 同步获取
     * getResAsync() 从缓存加载 如果没有则通过网络获取
     * getResByUrl() 网络获取
     */
 
}
// 使用雪碧图
class MyMaps extends egret.DisplayObjectContainer {
    public constructor() {
        super();
        this.addEventListener(egret.Event.ADDED_TO_STAGE, this.onAddToStage, this);
    }
    private onAddToStage(event: egret.Event) {
        RES.addEventListener(RES.ResourceEvent.GROUP_COMPLETE, this.addImg, this);
        RES.loadConfig("resource/default.res.json", "resource/");
        RES.loadGroup("lg");//倒入 纹理集生成的 .json
    }
    private addImg() {
        let imgs: egret.SpriteSheet = RES.getRes("logo");//引入需要的img部分
        let img: egret.Bitmap = new egret.Bitmap();
        img.texture = imgs.getTexture("toolt");
        this.addChild(img);
    }
}