一、游戏的准备：

开始场景：

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

游戏场景：

返回按钮：
- 作用：返回上一级场景，切换到游戏的关卡场景；
- 素材：需要一张图片；
成语提示图：
- 作用：提示成语的图片，可供玩家猜测答案；
- 素材：需要一张图片。
成语答案区：
- 作用：显示玩家选择而成的成语（答案）；
- 组成：四个相同的放个组件；
- 绑定方法：
  - 点击区域没有文字：无响应；
  - 点击区域有文字：清空该方格，让区域内的文字恢复到选择区。
成语文字选择区：
- 作用：从里面挑选四个文字，组成一个成语；
- 组成：由二十个相同的方格组件：
  - 组件中有 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.游戏开始场景：

在 resource 和 src 目录下新建文件夹 game；
新建 EUI 组件 GameBegin，注意路径要修改成 game；
在 GameBegin.exml 中拖入 image 和 button 组件。其中，image 使用分类属性的快速约束最后一个，可以上下左右填充，充满整个舞台；
资源目录选择 GameBG1.png，拖动到资源名下放开设置背景图；
“设置”按钮背景色，选择资源名 MoneyBG.png 拖到到正常状态下皮肤快捷模板，标签改为“设置”，设置一个 ID 位：btnSetting；
同样的方法设置开始按钮，使用 StartBtn.png 为正常状态图片，StartBtn1.png 为按下的图片，然后利用快速约束的第二个居中状态显示，设置 ID 为：btnBegin；
在 GameBegin.ts 中，新建单例：

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

在 Main.ts 的createGameScene 中：

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

两个 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('打开设置界面');}

成语猜猜看小游戏（一）相关推荐

成语猜猜看小游戏（四）
文章目录七.游戏正解场景: 八.音频管理: 1. 新建设置的 GameSetting.ts 组件: 九.功能优化: 七.游戏正解场景: 在 SceneGame.exml 中,拖入新的布局控件 Gro ...
成语猜猜看小游戏（三）
文章目录五.实现关卡相关内容: 六.游戏场景: 五.实现关卡相关内容: 在 SceneLevel.ts 文件,在 init 方法尾部继续 // 获取游戏存档的最远的关卡 // 当玩到当前关卡或者玩过 ...
成语猜猜看小游戏（二）
文章目录三.游戏关卡场景: 1. 创建 SceneLevnl 组件: 2. 在 SceneLevel 里声明单例: 3. GameBegin.ts 跳转: 4. 设置 SceneLevel.exml ...
android写的猜猜看小游戏
android版猜猜看猜猜看app主要是帮助老师记住学生的一个app,因为是在手机上的应用,所以老师任何时候,只要有一部手机就可以玩,非常方便! 首先分析作业的需求,随机出现三张图片,每张图片一个名 ...
微信小程序--成语猜猜看
原文链接:https://mp.weixin.qq.com/s/p6OMCbTHOYGJsjGOINpYvQ 1 概述微信最近有很多火爆的小程序.成语猜猜看算得上前十火爆的了.今天我们就分享这样的小 ...
微信无法连接服务器501,微信成语猜猜看第501关BUG出现全是英文怎么过解决方法...
近日因为跳一跳许多微信小程序游戏异常火爆,其中就包括了成语猜猜看游戏,但是很多小伙伴向小编反应游戏之中出现了BUG,那么微信成语猜猜看BUG怎么办呢?为了帮助各位小伙伴,小编特意带来了成语猜猜看BUG ...
微信无连接服务器1.104,微信成语猜猜看太子少师答案汇总太子少师1-104关攻略...
本文导航第1页: 太子少师第8页:翰林第2页:学童第9页:侍郎第3页:童生第10页:尚书第4页:秀才第11页:大学士第5页:举人第12页:御史第6页:贡士第13页:丞相第7页: ...
微信小游戏腾讯课堂《白鹭教育 - 成语大挑战小游戏开发》学习笔记
腾讯课堂<白鹭教育 - 成语大挑战小游戏开发>:https://ke.qq.com/course/287266 学习笔记首先这个视频课程简单介绍了一个小游戏的制作,包括新建项目.适配模式 ...
《猜猜看》游戏的开发总结
<猜猜看>游戏的开发总结 1．最终成果 1.1课程设计的目的把软件工程中规范的软件开发方法应用到本次教师认识学生软件"猜猜看"的开发过程中,以经济地开发出高质量的软件 ...

成语猜猜看小游戏（一）

文章目录

一、游戏的准备：

开始场景：

游戏场景：

关卡场景：

需求：

正确场景：

音频页面：

二、开始构建游戏：

1. 创建游戏项目；

2. 添加游戏素材：

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

4. 解析游戏关卡文件：

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

6.游戏开始场景：

成语猜猜看小游戏（一）相关推荐

最新文章

热门文章