基于Egret的卡牌游戏开发

一、概括

        本文主要讲述这款游戏从0到1主页面的开发过程，用到了大量的组件和Eui皮肤.

二、视频演示

        

三、开发内容

1.加载页面

这个在原来的LodingUI设置就行

private createView(): void {
        // //加载背景
         let loding_bg1=utils.createBitmapByName('dljm_logo_png');
         let loding_bg2=utils.createBitmapByName('qbbb_baoxiangk_png');
        loding_bg1.anchorOffsetX=loding_bg1.width/2;
        loding_bg1.anchorOffsetY=loding_bg1.height/2;
        loding_bg1.x=Main.stageW/2;
        loding_bg1.y=Main.stageH/2-200;
        
        loding_bg2.width=Main.stageW;
        loding_bg2.height=Main.stageH;
        //加载提示
        this.textField = new egret.TextField();
       
        this.textField.width = 480;
        this.textField.size=60;
        this.textField.height = 100;
        this.textField.textAlign = "center";
        this.textField.anchorOffsetX=this.textField.width/2;
        this.textField.anchorOffsetY=this.textField.height/2;
        this.textField.x=Main.stageW/2;
        this.textField.y=Main.stageH/2;
        
        
        this.addChild(loding_bg2);
        this.addChild(loding_bg1);
        this.addChild(this.textField);
    }

    public onProgress(current: number, total: number): void {
        this.textField.text = `Loading...${current}/${total}`;
    }

2.登录界面

这里有退出按钮可以退出游戏，退出界面如下

3.主页面

主页面主要分四个部分

1）按钮部分：

        跳转页面的主要按钮，需要设置按下时候的交互状态

        *商店按钮：下面讲

        *物品按钮：下面讲

        *设置按钮：这个主要用来控制声音大小

//默认系统声音大小
        this.sys_sound.getChildAt(1).addEventListener(egret.Event.ADDED,function(){
            this.getChildAt(1).value=bgSound._volume*100;
        },this.sys_sound)
        this.music_sound.getChildAt(1).addEventListener(egret.Event.ADDED,function(){
            this.getChildAt(1).value=bgSound._volume*100;
        },this.music_sound)
        //替换系统声音值
        this.sys_sound.getChildAt(1).addEventListener(egret.Event.CHANGE,
            function(){
                this.getChildAt(2).text=this.getChildAt(1).value+'%';
                bgSound.setVolume(this.getChildAt(1).value/100);
            },this.sys_sound)
        this.music_sound.getChildAt(1).addEventListener(egret.Event.CHANGE,
            function(){
                this.getChildAt(2).text=this.getChildAt(1).value+'%';
                bgSound.setVolume(this.getChildAt(1).value/100);
            },this.music_sound)

2）资源部分：

        主要用来购买砖石，其中有充值界面

 

 //充值
        this.Recharge.addEventListener(egret.TouchEvent.TOUCH_TAP,()=>{
            let rect:eui.Rect=new eui.Rect();
            rect.width=this.stage.width;
            rect.height=50;
            rect.y=this.stage.height/2;
            rect.alpha=0.5;

            let text:eui.Label=new eui.Label();
            text.text="您的余额不足！！！";
            text.size=40;
            text.width=rect.width/2;
            text.textAlign='left'
            text.height=50;
            text.x=rect.x+rect.width/2-100;
            text.y=rect.y;
            this.stage.addChild(rect);
            this.stage.addChild(text);

            //设置定时
            let timer:egret.Timer=new egret.Timer(3000,1);
            timer.start();
            timer.addEventListener(egret.TimerEvent.TIMER,()=>{
                console.log(1);
                this.stage.removeChild(rect);
                this.stage.removeChild(text);
            },this)

        },this)

          //监听加减
          this.Recharge_reduce.addEventListener(egret.TouchEvent.TOUCH_TAP,()=>{
            if(parseInt(this.Recharge_number.text)==0) return;
            this.Recharge_number.text=(parseInt(this.Recharge_number.text)-1).toFixed();
          },this)
          this.Recharge_increase.addEventListener(egret.TouchEvent.TOUCH_TAP,()=>{
            
            this.Recharge_number.text=(parseInt(this.Recharge_number.text)+1).toFixed();
          },this)

界面的图标UI的替换接收于点击事件的序号，然后进行图片替换，加减按钮控制中间数值多少。

3）英雄简介部分：

英雄的属性由英雄池List的点击交互得到。

//数据控制
            //默认选中项
         this.hero_list.selectedIndex=0;
         //监听按下键,进行属性替换
         this.hero_list.addEventListener(eui.UIEvent.CHANGE,()=>{
            this.fight.visible=this.hero_list.selectedItem.isfight;
            this.per_image.source=this.hero_list.selectedItem.image; //换图
            this.per_name.text=this.hero_list.selectedItem.name; //换名字
            this.per_attack.value=this.hero_list.selectedItem.attack;//换属性
            this.per_defense.value=this.hero_list.selectedItem.defense;
            this.per_Health_value.value=this.hero_list.selectedItem.Health_value;
            this.per_element.value=this.hero_list.selectedItem.element;
            this.per_strength.value=this.hero_list.selectedItem.strength;
            this.attack_text.text=this.per_attack.value+"/200"; //换文本
            this.defense_text.text=this.per_defense.value+"/500";
            this.Health_value_text.text=this.per_Health_value.value+"/1000";
            this.element_text.text=this.per_element.value+"/1000";
            this.strength_text.text=this.per_strength.value+"/1000";
         },this)

4）英雄池

 //加载英雄
        let dataArr:any[]=[
            {image:'resource/image/hero/R_12.png',name:'朵莉亚',attack:50,defense:100,Health_value:200,element:500,strength:500,isfight:false},
            {image:"resource/image/hero/R_1.png",name:"紫萱",attack:100,defense:80,Health_value:150,element:200,strength:600,isfight:false},
            {image:"resource/image/hero/R_2.png",name:"哲也",attack:110,defense:50,Health_value:200,element:500,strength:500,isfight:false},
            {image:"resource/image/hero/R_3.png",name:"魔理沙",attack:120,defense:70,Health_value:200,element:600,strength:300,isfight:false},
            {image:"resource/image/hero/R_4.png",name:"伊蕾娜",attack:140,defense:60,Health_value:200,element:450,strength:600,isfight:false},
            {image:"resource/image/hero/R_5.png",name:"里绫火",attack:160,defense:30,Health_value:100,element:600,strength:400,isfight:false},
            {image:"resource/image/hero/R_6.png",name:"濑时矢",attack:130,defense:90,Health_value:150,element:110,strength:650,isfight:false},
            {image:"resource/image/hero/R_7.png",name:"埃札瓦",attack:150,defense:50,Health_value:150,element:110,strength:500,isfight:false},
            {image:"resource/image/hero/R_8.png",name:"布施翠",attack:90,defense:80,Health_value:150,element:450,strength:700,isfight:false},
            {image:"resource/image/hero/R_9.png",name:"洛琪希",attack:120,defense:90,Health_value:150,element:400,strength:300,isfight:false},
            {image:"resource/image/hero/R_10.png",name:"夏娜",attack:80,defense:150,Health_value:300,element:300,strength:800,isfight:false},
        ]
        //转eui
        let Euiarr:eui.ArrayCollection=new eui.ArrayCollection(dataArr);
        this.hero_list.dataProvider=Euiarr;
        //隐藏进度条
        this.hero_scroller.horizontalScrollBar.autoVisibility=false;

4.商店、物品页面

        

class Shopping_Scene extends eui.Component{
    public Shopping_back:eui.Button;
    public Sp_button1:eui.Group;
    public Sp_button2:eui.Group;
    public Sp_button3:eui.Group;
    public Sp_button4:eui.Group;
    public Shopping_button:eui.Group;
    public top_swich:eui.Group;
    public Grade_1:eui.Group;
    public Grade_2:eui.Group;
    public Grade_3:eui.Group;
    public Grade_4:eui.Group;
    public data_list:eui.List;
    public shopping:eui.Button;



    constructor(){
        super();
        this.skinName="resource/eui_skins/Scene/Shopping_Scene.exml"
    }
    //
    protected createChildren(): void {
        super.createChildren();
        //监听返回
        this.Shopping_back.addEventListener(egret.TouchEvent.TOUCH_END,()=>{
            Main.instance.removeChildren()
            Main.instance.addChild(new Home_Scene);
        },this)
        //界面按钮监听
        for(let i:number=1;i<5;i++){
            this[`Sp_button${i}`].addEventListener(egret.TouchEvent.TOUCH_BEGIN,()=>{
                this.ButtonManager(i);
            },this)
        }
        //等级按钮监听
        for(let i:number=1;i<5;i++){
            this[`Grade_${i}`].addEventListener(egret.TouchEvent.TOUCH_BEGIN,()=>{
                this.ButtonManager(String.fromCharCode(97+i-1));
            },this)
        }
        //设置默认页面
        this.ButtonManager(1);
        this.ButtonManager('a');
    }

    private ButtonManager(Selet:number|string){
       console.log(Selet)
        //全清
        for(let i:number=1;i<5;i++){
            if(typeof(Selet)=="number"){
                if(i==Selet) this[`Sp_button${i}`].getChildAt(1).visible=true;
            else this[`Sp_button${i}`].getChildAt(1).visible=false;
            }
            if(String.fromCharCode(97+i-1)==Selet) this[`Grade_${i}`].getChildAt(1).visible=true;
            else this[`Grade_${i}`].getChildAt(1).visible=false;
            }
        
        switch(Selet){
            case 1:
                this.top_swich.visible=true;
                this.ButtonManager("a");
                this.data_list.dataProvider=this.dataToEui("A")
                break;
            case 2:
                this.top_swich.visible=false;
                this.data_list.dataProvider=this.dataToEui("Weapon")
                break;
            case 3:
                this.top_swich.visible=false;
                this.data_list.dataProvider=this.dataToEui("box")
                break;
            case 4:
                this.top_swich.visible=false;
                this.data_list.dataProvider=this.dataToEui("diamond")
                break;
            case "a":
                this.data_list.dataProvider=this.dataToEui("A")
                break;
            case "b":
                this.data_list.dataProvider=this.dataToEui("R")
                break;
            case "c":
                this.data_list.dataProvider=this.dataToEui("S")
                break;
            case "d":
                this.data_list.dataProvider=this.dataToEui("SSR")
                break

                
        }
        //监听购买
        this.shopping.addEventListener(egret.TouchEvent.TOUCH_TAP,()=>{
            let rect:eui.Rect=new eui.Rect();
            rect.width=this.width;
          
            rect.height=50;
            rect.y=this.height/2;
            rect.alpha=0.5;

            let text:eui.Label=new eui.Label();
            text.text="您的余额不足！！！";
            text.size=40;
            text.width=rect.width/5;
            text.textAlign='left'
            text.height=50;
            text.x=rect.x+rect.width/2-100;
            text.y=rect.y;
            this.addChild(rect);
            this.addChild(text);

            //设置定时
            let timer:egret.Timer=new egret.Timer(3000,1);
            timer.start();
            timer.addEventListener(egret.TimerEvent.TIMER,()=>{
                
                this.removeChild(rect);
                this.removeChild(text);
            },this)

        },this)
        }

        private dataToEui(str:String):eui.ArrayCollection{
        switch(str){
            case "A":{
                //A英雄数据
            let heroArr:any[20]=[]  
            for(let i:number=1,j:number=0;heroArr.length<20;i++,j++){
                heroArr[j]={image:`resource/image/hero/R_${i}.png`,name:`#1000${i}`}
                
                if(i==3)i=0;}
            let Euiarr:eui.ArrayCollection=new eui.ArrayCollection(heroArr);
            return Euiarr;
            };break;
            
            case "R":{
                //R英雄数据
            let heroArr:any[20]=[]  
            for(let i:number=4,j:number=0;heroArr.length<20;i++,j++){
                heroArr[j]={image:`resource/image/hero/R_${i}.png`,name:`#1000${i}`}
                console.log(heroArr[i])
                if(i==6)i=3;}
            let Euiarr:eui.ArrayCollection=new eui.ArrayCollection(heroArr);
            return Euiarr;
            };break;

            case "S":{
                  //SR英雄数据
            let heroArr:any[15]=[]  
            for(let i:number=7,j:number=0;heroArr.length<15;i++,j++){
                heroArr[j]={image:`resource/image/hero/R_${i}.png`,name:`#1000${i}`}
                console.log(heroArr[i])
                if(i==10)i=6;}
            let Euiarr:eui.ArrayCollection=new eui.ArrayCollection(heroArr);
            return Euiarr;
            };break;

            case "SSR":{
                  //SSR英雄数据
            let heroArr:any[10]=[]  
            for(let i:number=11,j:number=0;heroArr.length<10;i++,j++){
                heroArr[j]={image:`resource/image/hero/R_${i}.png`,name:`#1000${i}`}
                
                if(i==12)i=10;}
            let Euiarr:eui.ArrayCollection=new eui.ArrayCollection(heroArr);
            return Euiarr;
            };break;

            case "Weapon":{
                let weaponArr:any[20]=[]  
                for(let i:number=1,j:number=0;weaponArr.length<20;i++,j++){
                    weaponArr[j]={image:`resource/image/weapon/N_${i}.png`,name:`#2000${i}`}
                    if(i==9)i=0;
                }let Euiarr:eui.ArrayCollection=new eui.ArrayCollection(weaponArr);
                    return Euiarr;
                };break;
            case "box":{
                let weaponArr:any[15]=[]  
                for(let i:number=1,j:number=0;weaponArr.length<20;i++,j++){
                    weaponArr[j]={image:`resource/image/icon/qbbb_baoxiang.png`,name:`#3000${i}`}
                    
                }let Euiarr:eui.ArrayCollection=new eui.ArrayCollection(weaponArr);
                    return Euiarr;
            }

            case  "diamond":{
                let weaponArr:any[15]=[]  
                for(let i:number=1,j:number=0;weaponArr.length<20;i++,j++){
                    weaponArr[j]={image:`resource/image/icon/yxbb_zuanshi.png`,name:`#3000${i}`}
                    
                }let Euiarr:eui.ArrayCollection=new eui.ArrayCollection(weaponArr);
                    return Euiarr;
            }
            }
        }
          
        
        }
    

这里通过按钮的到固定标识，然后通过标识往Soller中list中加入英雄数据和装备武器数据，之前设置好list的条目皮肤为需要的模块即可。

四、总结

        难点：英雄池的加载反馈到英雄属性

        这点花了许多时间研究，之后还有一个需要优化的地方，就是通过其他按钮对list英雄池的选中改变的属性不知道如何反馈到监听中去，这点在之后的学习中我也会慢慢想办法优化。