成语猜猜看小游戏（三）

五、实现关卡相关内容：

• 在 SceneLevel.ts 文件，在 init 方法尾部继续

// 获取游戏存档的最远的关卡 
// 当玩到当前关卡或者玩过的关卡设置为可玩的状态，未玩的关卡设置为禁用的状态 
var mileStone: number = LevelDataManager.Shared().MileStone;  
// 动态生成关卡按钮 
for(var i: number = 0; i < LevelDataManager.Shared().getLevelsNum(); i++) {
     // 定义一个关卡按钮
     var icon = new LevelIcon();     
     // 添加到group里面去     
     group.addChild(icon);     
     // 设置关卡显示文本  
     icon.Level = i + 1;   
     // 设置x轴的位置  
     icon.x = Math.sin(spanY*i/2/180*Math.PI)*200 + group.width/2;  
     // 设置y轴的位置  
     icon.y = group.height - spanY * i - icon.height;     
     // 给每个关卡按钮绑定点击方法     
     icon.addEventListener(
     	egret.TouchEvent.TOUCH_TAP,         
     	this.icon_tap,         
     	this     
     );      
     // 根据存档来设置关卡按钮的状态  
     icon.enabled = i < mileStone;   
     // 把关卡按钮存放起来  
     this.levelIcon.push(icon); 
}
/**   * 点击关卡按钮的响应事件   */  
private icon_tap() {   }

• 来到 LevelIcon.exml 来设置，调整 up / down / disabled 三种状态的图片 image；
• 目前存在两个问题：1. 不能让用户往下滑到最底，要自动；2. 箭头没有指向当前关卡；
• 解决第一个问题：来到 SceneLevel.ts 中，在 init 方法里：

// 滚动视图默认出现在最底部 
this.group_levels.scrollV = group.height - this.height;

• 第二个问题：箭头的指向问题：

// 指示箭头的位置 
// 修改箭头的锚点位置为底部的尖端点 
this.img_arrow.anchorOffsetX = this.img_arrow.width/2; 
this.img_arrow.anchorOffsetY = this.img_arrow.height; 
this.img_arrow.touchEnabled = false;  

// 游戏初始化的时候，箭头出现在最远关卡的正上方 
// 声明最远关卡 
var currentIcon = group.getChildAt(mileStone - 1); 
this.img_arrow.x = currentIcon.x + currentIcon.width; 
this.img_arrow.y = currentIcon.y; 

// 设置当选中的关卡 
this.sel_level = mileStone; 

// 让箭头显示到最顶层 
this.group_levels.addChild(this.img_arrow);

• 点击关卡按钮的响应事件：

/**  * 点击关卡按钮的响应事件  */ 
private icon_tap(e: egret.TouchEvent) {     
	// 获取被点击的关卡的按钮     
	var icon = <LevelIcon>e.currentTarget;  
	if(this.sel_level != icon.Level) {   
		// 如果指示箭头指向的关卡不是我们点击的关卡，则移动指示箭头到点击关卡处
		this.img_arrow.x = icon.x + icon.width/2;   
		this.img_arrow.y = icon.y;   
		// 记录指示箭头的指向的关卡   
		this.sel_level = icon.Level;  
	}else{   
		// 点击的关卡就是箭头指向的关卡，则直接进入游戏场景并开始游戏  
	} 
}

六、游戏场景：

• 创建游戏场景 EUI 组件：
  

• 声明单例类，在 SceneGame.ts 中：

// 声明单例 
private static shared: SceneGame; 
public static Shared(): SceneGame {  
	if(SceneGame.shared == null) {   
		SceneGame.shared = new SceneGame();  
	}  
	return SceneGame.shared; 
}

• 实现点击按钮进入游戏界面，在 SceneLevel.ts 中：
  

• 要实现不同的关卡按钮打开不同关卡页面，比如说，点击第五关，游戏场景如何知道我点的是第五关？在 SceneGame.ts 中添加方法：

/** * 初始化游戏场景  */ 
public initLevel(level: number) {  }

• 在 SceneLevel.ts 中传入关卡数组下标：
  

• 构建 SceneGame.exml：
  
  

• 构建 Word 组件：可选字体及答案；
  

• 打开 Word.exml，拖入 rect 组件，设置宽高为 80，约束为填充上下左右；
  

• 设置圆角；
  

• text 的 ID 设置为 lb_text;
  

• 复制 label 组件的“复制自定义”到 Word.ts 中：

public lb_text:eui.Label;

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

// 初始化  
private init() {
	this.lb_text.addEventListener(    
		egret.TouchEvent.TOUCH_TAP,    
		this.word_tap,    
		this   
	);  
}   

/*
*点击选择区域的文字的响应方法,   
* protected 修饰的方法，可以被子类调用，   
*不能被外部类调用   
*/  
protected word_tap() {   
	// 点击文字，让游戏场景去处理自己   
	SceneGame.Shared().word_click(this);  
}     

// 设置文本内容  
public setWordText(val: string) {   
	this.lb_text.text = val;  
}  

// 获取文本内容 
public getWordText(): string {
	return this.lb_text.text; 
}

• 在 SceneGame.exml 中 拖入Group 布局 设置宽高：
  

• 在自定义组件库里面拖入 word 组件，复制 19 个出来，设置布局为网格布局：
  

• 设置间隙和对齐方式：
  

• 设置 ID 为：group_words
  

• 添加一个答案区域的 group 组件；

• 设置宽高，并设置 ID 为 group_answer；

• 在 group 组件中添加一个 answerword 自定义组件，设置如下;
  

• 复制三个，宽高即 y 不变，x 分别为18，103，189，277；
  

• 编写游戏场景，在 SceneGame.exml 选中复制自定义到 SceneGame.ts，声明一个变量，用来表示所处的关卡

// 返回按钮 
public btnBack:eui.Button; 

// 成语提示图片 
public imgQuestion:eui.Image; 

// 选择区域组 
public group_words:eui.Group; 

// 答案区域组 
public group_answer:eui.Group;  

// 声明一个变量，用来表示所处的关卡 
private levelIndex: number = 0;

• 初始化游戏场景

/**
*初始化游戏场景 
*/ 
public initLevel(level: number) {   
  
	// 记录当前关卡     
	this.levelIndex = level;     
	
	// 获取关卡的内容     
	var levelData = LevelDataManager.Shared().getLevel(level); 
	    
	// 先拿到自己关卡的成语（四个字）和混淆字（六个字）拼接起来     
	var words = levelData.answer + levelData.word;     
	
	// 随机一个关卡，把随机关卡的成语和混淆字也拼接到 words 后面     
	while(words.length == 10) {        
		var i = Math.floor(Math.random()*LevelDataManager.Shared().getLevelsNum());
		if(i != level) {             
			var temp = LevelDataManager.Shared().getLevel(i);        
		}       
		      
		// 把随机关卡的成语和混淆字添加进来             
		words += temp.answer + temp.word;     
	}      

	// 把 words 变成数组     
	var wordList: string[] = [];  
	for(var i: number = 0; i < words.length; i++) {
		wordList.push(words.charAt(i));  
	}   
	
	// 重新排序  
	wordList = this.randomList(wordList); 
	  
	// 把 wordList 里面的文字渲染出来  
	for(var i: number = 0; i < this.group_words.numChildren; i++) {   
		// 获取到选择区域的 word 组件   
		var word = <Word>this.group_words.getChildAt(i);   
		
		// 设置 word 的显示内容   
		word.setWordText(wordList[i]);  
		 
		// 设置 word 可视   
		word.visible = true;  
	}      

	/********************对答案区进行初始化*************************/     
	for(var i: number = 0; i < this.group_answer.numChildren; i++) {   
		var answer = <AnswerWord>this.group_answer.getChildAt(i);
		answer.SetSelectWord(null);   
		answer.visible = true;   
		answer.SelectWord = null;  
	}   
	
	// 显示提示图片  
	this.imgQuestion.source = "resource/assets/" + levelData.img; 
}  

/**
 * 对一个数组进行随机排列 
 * */ 
private randomList(arr: string[]):string[] {  
	var array = [];  
	while(arr.length > 0) {   
		var i = Math.floor(Math.random()*arr.length);   
		array.push(arr[i]);  
		arr.splice(i,1);  
	}   
	return array; 
}

• 实现点按选择区域文字后的操作

/*
*点击选择区域的文本后的响应函数 
*/ 
public word_click(word: Word) {  
	var sel: AnswerWord = null;  
	for(var i: number = 0; i < this.group_answer.numChildren; i++) {   
		var answer = <AnswerWord>this.group_answer.getChildAt(i);
		if(answer.SelectWord == null) {   
			sel = answer;    
			break;   
		}  
	}   
	
	// 如果存在空白区，则把点击的文字上传到答案区  
	if(sel) {   
		sel.SetSelectWord(word);   
		 
		// 胜利判断   
		var check_str : string = '';   
		for(var i: number = 0; i < this.group_answer.numChildren; i++) {    
			var answer = <AnswerWord>this.group_answer.getChildAt(i);    
			check_str += answer.getWordText();   
		}   
		
		// 如果答案区的拼接成语等于关卡的答案，则弹出正解场景界面   
		if(check_str == LevelDataManager.Shared().getLevel(this.levelIndex).answer) {
			// 显示答案正确    
			this.showWin();  
		}  
	} 
}  

/*
*显示正解答案 
*/ 
private showWin() {  
	console.log('答案正确!'); 
}