白鹭小游戏-成语挑战-选关页面-游戏数据管理

白鹭小游戏-成语挑战-整体项目结构

游戏数据管理

创建 关卡数据管理类

/**
 * 关卡数据管理类
 * 
 * 获取关卡数据
 * 获取设置当前游戏进度
*/
class levelDatamanager {

	// 单例
	private static shared:levelDatamanager
	public static Shared(){
		if(!levelDatamanager.shared){
			levelDatamanager.shared = new levelDatamanager()
		}
		return levelDatamanager.shared
	}

	// private items:levelDataItem[] = [];
	// private items:levelDatamanager[] = [];
	private items:levelDatamanager[] = [];//保存所有的关卡数据
	public levNumber:number; //总关卡数

	public constructor() {
		this.items = RES.getRes("questions_json"); 
		this.levNumber = this.items.length
	}


	// 获取对应关卡数据
	public getLevelData(level:number){
		return this.items[level]
	}

	// 获取游戏进度
	public get progress(){
		let gress = egret.localStorage.getItem('progress')
		if(gress == null || gress == ""){
			return 1
		}else{
			return parseInt(gress)
		}
	}

	// 设置游戏进度
	public set progress(level:number){
		console.log('游戏进度 第'+ level +'关');
		egret.localStorage.setItem('progress',level.toString())
	}
}

选关页面

皮肤文件 ChooseLevels.exml

构建皮肤文件 构建方法参照 loading 页面构建方法

<?xml version="1.0" encoding="utf-8"?>
<e:Skin class="ChooseLevelsSkin" width="640" height="1136" xmlns:e="http://ns.egret.com/eui" xmlns:w="http://ns.egret.com/wing" >
	<w:Config id="16e68a31714" ></w:Config>
	<e:Scroller id="scroller" width="640" height="1136" x="0" y="0">
		<e:Group id="lev_group">
			<e:Image id="img_up" source="PageDownBtn_png" x="442" y="814" width="76"/>
		</e:Group>
	</e:Scroller>
	<e:Button id="btn_return" label="" x="529" y="1048">
		<e:skinName>
			<e:Skin states="up,down,disabled">
			<e:Image width="100%" height="100%" source="BackBtn_png" source.down="BackBtn1_png"/>
			<e:Label id="labelDisplay" horizontalCenter="0" verticalCenter="0"/>
			</e:Skin>
		</e:skinName>
	</e:Button>
</e:Skin>

效果图

ChooseLevels.ts

/**
 * 选关卡页
 * */ 
class ChooseLevels extends eui.Component implements  eui.UIComponent {
	public constructor() {
		super();
	}

	public scroller:eui.Scroller;
	public lev_group:eui.Group;
	public img_up:eui.Image;
	public btn_return:eui.Button;


	private IconArr:Object[] = []
	public set_lv:number = 1

	// 单例
	private static shared:ChooseLevels
	public static Shared(){
		if(!ChooseLevels.shared){
			ChooseLevels.shared = new ChooseLevels()
		}
		return ChooseLevels.shared
	}

	protected partAdded(partName:string,instance:any):void
	{
		super.partAdded(partName,instance);
	}


	protected childrenCreated():void
	{
		super.childrenCreated();
		this.init()
	}

	public init(){
		this.btn_return.addEventListener(egret.TouchEvent.TOUCH_TAP,this.returnClick,this)
		this.scroller.scrollPolicyH = eui.ScrollPolicy.OFF; //设置不允许横向滚动
		let len = levelDatamanager.Shared().levNumber;
		let progress = levelDatamanager.Shared().progress;
		
		let col = 10
		let row = 20
		let icon_w = this.width/col
		let icon_h = this.height/row

		let group:eui.Group = new eui.Group();
		this.lev_group.addChild(group);
		group.width = this.width;
		group.height = len * icon_h;

		// 填充背景图
		for(let i:number = 0; i < (group.height) / this.height ; i++){
			let img:eui.Image = new eui.Image("resource/assets/data/res/GameBG2.jpg");
			img.y = i*this.height;
			img.width = this.width;
			this.lev_group.addChildAt(img,0);//  img_up会显示 猜测第二个参数是设置层级
		}

	
		// let Icon:btnIcon = new btnIcon()
		// Icon.x = 100
		// Icon.y = 100
		// console.log("Icon:",Icon)
		
		// group.addChild(Icon)
		// Icon.btn_label = 20
		// console.log(Icon.btn_label)
		
		// 创建关卡图标
		for(let i:number = 0; i < len; i++){
			let Icon:btnIcon = new btnIcon()
			group.addChild(Icon);
			Icon.btn_label = i+1
			Icon.x = Math.sin(icon_h*i/2/180*Math.PI)*200 + group.width/2;
			Icon.y = group.height - icon_h*i - Icon.height
			Icon.enabled = i < progress // 关卡按钮是否可点击
			this.IconArr.push(Icon);
			Icon.addEventListener(egret.TouchEvent.TOUCH_TAP,this.IconClick,this)
		}	

		// 初始滚动位置
		this.lev_group.scrollV = group.height - this.height;

		// 进度位置处于屏幕最上面 （假如玩到 25关，让25关出现在最顶层）
		if(progress>20){
			this.lev_group.scrollV = group.height - progress*icon_h;
		}

		// 指示箭头图片位置 
		this.img_up.anchorOffsetX = this.img_up.width/2
		this.img_up.anchorOffsetY = this.img_up.height

		let curretIcon:any = this.IconArr[progress-1];
		this.img_up.x = curretIcon.x + curretIcon.width/2
		this.img_up.y = curretIcon.y

		// 显示在最上层
		this.lev_group.addChild(this.img_up)
		// 设置当前关卡
		this.set_lv = progress
	}

	private returnClick() {
		musicManager.getMusic().playBtnMusic()
		this.parent.removeChild(this)
	}

	private IconClick(e:egret.TouchEvent){
		musicManager.getMusic().playBtnMusic()
		var icon = <btnIcon>e.currentTarget;
		// 箭头跟随
		this.img_up.x = icon.x + icon.width/2;
		this.img_up.y = icon.y;

		// 设置单前选中关卡
		this.set_lv = icon.btn_label;

		// 跳转页面
		this.parent.addChild(gameScene.getInstance())
		this.parent.removeChild(this);
		gameScene.getInstance().initLvdata(this.set_lv)
	}
	
}

关卡按钮组件

皮肤文件

构建皮肤文件 构建方法参照 loading 页面构建方法

<?xml version="1.0" encoding="utf-8" ?>
<e:Skin class="btnIconSkin" states="up,down,disabled" minHeight="50" minWidth="100" xmlns:e="http://ns.egret.com/eui" xmlns:w="http://ns.egret.com/wing" width="77" height="77">
	<e:Image id="imgTrue" source="gs_select_1_png" x="0" y="0" height="77" includeIn="up,down"/>
	<e:Image id="imgFalse" source="gs_select_dis_png" x="0" y="0" width="77" height="77" includeIn="disabled"/>
	<e:Label id="lev_text" text="100" x="11" y="23.5" width="55" height="30" anchorOffsetX="0" textAlign="center"/>

	<w:Config id="16e6d95360c" ></w:Config>
</e:Skin>

btnIcon.ts

class btnIcon extends eui.Button implements  eui.UIComponent {
	public constructor() {
		super();
	}
	private imgTrue:eui.Image;
	public imgFalse:eui.Image;
	public lev_text:eui.Label;


	protected partAdded(partName:string,instance:any):void
	{
		super.partAdded(partName,instance);
	}


	protected childrenCreated():void
	{
		super.childrenCreated();
	}
	
	public get btn_label(){
		return parseInt(this.lev_text.text);
	}

	public set btn_label(lev:number){
		this.lev_text.text = lev.toString()
	}


}