成语猜猜看小游戏（一）

一、游戏的准备：

开始场景：

• 设置按钮：
  • 作用：弹出设置页面，主要是音频的设置；
  • 素材：需要一张底图；
  • 绑定方法：响应函数是弹出音频设置页面。
• 开始游戏按钮：
  • 作用：切换到游戏的关卡场景；
  • 素材：需要一张底图；
  • 绑定方法：响应函数是切换场景。
• 背景图：
  • 作用：作为游戏开始场景的背景图；
  • 素材：需要一张大图。

游戏场景：

• 返回按钮：
  • 作用：返回上一级场景，切换到游戏的关卡场景；
  • 素材：需要一张图片；
• 成语提示图：
  • 作用：提示成语的图片，可供玩家猜测答案；
  • 素材：需要一张图片。
• 成语答案区：
  • 作用：显示玩家选择而成的成语（答案）；
  • 组成：四个相同的放个组件；
  • 绑定方法：
    • 点击区域没有文字：无响应；
    • 点击区域有文字：清空该方格，让区域内的文字恢复到选择区。
• 成语文字选择区：
  • 作用：从里面挑选四个文字，组成一个成语；
  • 组成：由二十个相同的方格组件：
    • 组件中有 label；
    • 位置：网格布局。
  • 绑定方法：
    • 把选择的文字显示在成语答案区空白处；
    • 隐藏当前点击的方格；
    • 需要验证答案区成语是否正确：
      • 正确，弹出正确场景；
      • 错误，无响应。

关卡场景：

需求：

• 需要关卡的配置文件；
• 关卡选择的按钮：
  • 作用：进入关卡的游戏场景；
  • 素材：
    • 激活状态图片；
    • 禁用状态图片。
  • 如果是禁用的关卡，则无效果；
  • 如果是激活状态的关卡，并且关卡指示箭头处于当期关卡时，直接进入游戏场景；
  • 如果激活状态的关卡，但是关卡指示箭头不在当前关卡时，移动指示箭头到当前关卡。
  • 位置（布局）：
    • 使用的时正弦曲线来排列。
  • 关卡指示箭头：
    • 作用：指示当前选中的关卡；
    • 素材：需要一张图片。
  • 返回按钮：
    • 作用：切换到游戏开始场景；
    • 素材：需要一张图片。

正确场景：

• 透明的蒙版：
  • 作用：隔开游戏场景。
• 正解显示区：
  • 背景图；
  • 成语解释；
  • 成语出处。
• 下一关按钮：
  • 作用：开启下一关的游戏场景；
  • 素材：需要一张图片；
  • 绑定方法：
    • 隐藏正解场景；
    • 替换下一关的游戏内容。

音频页面：

• 背景框；
• 背景音乐按钮：
  • 作用：开启或关闭背景音乐；
  • 素材：
    • 激活状态；
    • 禁用状态。
  • 绑定方法：
    • 判断是否是激活状态，如果是，切换到禁用状态，同时停止背景音乐的播放；
    • 判断是否是禁用状态，如果是，切换到激活状态，同时开始背景音乐的播放。
• 音效按钮：
  • 作用：开启或关闭交互音效；
  • 素材：
    • 激活状态；
    • 禁用状态。
  • 绑定方法：
    • 判断是否是激活状态，如果是，切换到禁用状态，同时停止音效音乐；
    • 判断是否是禁用状态，如果是，切换到激活状态，同时开启音效音乐。
  • 确定按钮：
    • 作用：确定上诉操作的修改；
    • 素材：需要一张图片。

二、开始构建游戏：

1. 创建游戏项目；

2. 添加游戏素材：

• 由于我们的素材过多，所以希望保留原来的目录结构，因此我们直接在源代码的文件下进行操作；
• 把文件夹拖到源代码 resouce / assets 目录下。

3. 添加一些素材到 preload 组里：

• 把 res 文件目录下的资源添加到 preload 组里；
  • 全选 res 目录下的文件，拖拽到 preload 组里（如果资源管理器中没有文件，可以从 wing 左侧的文件树中拖动到 default.res.json 下的assets 目录下）；
  • 同理，把 sound 目录下的文件也加载到 preload 组里；
  • 把 questions.json 也添加到 preload 组里。

4. 解析游戏关卡文件：

{
     "answer":"食言而肥",     
     "img":"images/174.jpg",     
     "word":"吃胖吞說口人",     
     "tip":"比喻言而無信，說話不守信用。",     
     "content":"明．李開光．水風臥吟樓記：「此予事而掛客懷，何也？不以食言而肥，不因苦吟而瘦，試以數語為記，請覽而教正之如何？」" } 
{
     answe：答案，     
     img：图片，     
     word：混淆文字，     
     tip：正解，     
     content：成语出处 
}

5. 删除 Main.ts 中 cerateGameScanne 方法下所有代码；

6.游戏开始场景：

1. 在 resource 和 src 目录下新建文件夹 game；

2. 新建 EUI 组件 GameBegin，注意路径要修改成 game；

3. 在 GameBegin.exml 中拖入 image 和 button 组件。其中，image 使用分类属性的快速约束最后一个，可以上下左右填充，充满整个舞台；
   

4. 资源目录选择 GameBG1.png，拖动到资源名下放开设置背景图；

5. “设置”按钮背景色，选择资源名 MoneyBG.png 拖到到正常状态下皮肤快捷模板，标签改为“设置”，设置一个 ID 位：btnSetting；

6. 同样的方法设置开始按钮，使用 StartBtn.png 为正常状态图片，StartBtn1.png 为按下的图片，然后利用快速约束的第二个居中状态显示，设置 ID 为：btnBegin；

7. 在 GameBegin.ts 中，新建单例：

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

8. 在 Main.ts 的createGameScene 中：

protected createGameScene(): void {     
	// 进入游戏开始场景     
	this.addChild(GameBegin.Shared()); }

9. 两个 button 组件，复制自定义，粘贴到 GameBegin.ts 里：

protected childrenCreated():void
  {
     super.childrenCreated();
     this.init();
  }  
     
  // 初始化  
  private init() {   
  		// 给按钮添加绑定点击方法   
  		this.btnSetting.addEventListener(    
  			egret.TouchEvent.TOUCH_TAP,    
  			this.settingTap,    
  			this   
  		);  
  		  
  		this.btnBegin.addEventListener(
  		    egret.TouchEvent.TOUCH_TAP,    
  		    this.beginTap,    
  		    this   
  		);
  	}
  	    
  	/**  
  	 * 点按设置按钮的响应函数   
  	 * */  
  	 private settingTap() {   
  	 	// 打开设置界面   
  	 	console.log('打开设置界面');
  	 }

	/**
	* 点按设置按钮的响应函数
	* */  
	private beginTap() {
	   // 打开游戏关卡场景   
	   console.log('打开设置界面');
	}