手把手教你如何设计打地鼠游戏（技术教程）

 写在前面：这是一篇冗长而专业的技术教程， 林子费劲功夫想让学习ComputerScience不辣么枯燥，着实花了好多时间呢？不信往下看嘛？！文末有惊喜哟！

        本App设计的功能包括：自带背景音乐；地鼠随机出现；计分计时，分数和剩余时间实时显示在屏幕上。

---

     Step1： 素材准备篇

准备1：萝卜坑背景图一张（这张图是处理过的啦？云朵们看得出来哪里有手术痕迹吗？）

准备2：三种Size地鼠图片各一张（为什么要准备不同Size呢？有图任性嘛？！！哈哈哈！注意是背景透明的png格式）

准备3：准备一份音频文件作为打地鼠背景音乐

      

---

 

Step2:界面设计篇

        

          拖拽一张画布到屏幕上，为画布设置指定的高度和宽度，我这里设置了宽350，高400。接着，拖拽9个图像精灵到画布上 ，将图像精灵分别放在背景图中有坑的位置。将第一排地鼠的图像设置为mouse1.png、第二排设置为mouse2.png,第三排设置为mouse3.png，之所以没有用到同一个图像，是为了获得视觉体验的真实性，第一排地鼠最大，越往后地鼠越小。 各个组件的具体设置详情见下图：

                       

问：组件的名称为什么又设中文又设英文的，好不伦不类啊！

答：呃~~我想说，全部英语你能看懂吗？

---

Step3： 逻辑设计篇（一起来烧脑，哟哟切克闹~~）

       

•  1、初始化全局变量

• mouselist为列表类型变量，用来存放9只地鼠

• play为一个开关逻辑变量，初始化设置为false，当play按钮被按下设置其为true

• score为数据类型变量，初识成绩为为0

• endtime为数据类型变量，初识赋值60，单位为s，用来做游戏倒计时

• music为一个开关逻辑变量，用来控制是否播放音乐
  

•  2、定义过程initialize

• 计时器要等到开始按钮被按下才启用

• 开始按钮未被按下，将play设置为false

• 背景音乐按钮未被按下，将music设置为false

• 初始化score为0

• 为列表变量mouselist初始化，相当于为列表赋值

• 一开始想设置图像精灵全部不显示，因此，这里使用了一个循环，循环取列表中的图像精灵，将其显示状态设置为false，图像精灵通过索引值的方法来获得。而且这里用到了任意组件

• 设置画布的画笔颜色为白色

• 设置画布的线宽

• 在背景图上画字“倒计时”，这里调用了“沿角度画字”这个方法，目的是让画出的字能够很好地显示在我们的背景图中

• 在背景图上画字“分数”

  
  

•  3、设置屏幕初始化动作

问：这里为什么没有解释？

答：这么简单，还要解释？

• 设计随机显示地鼠的过程

• 随机选择要显示的地鼠，这里同样用到了任意组件中的任意精灵的方法

• 任意组件的好处是我们不必为每一个组件设置重复的方法

问：任意精灵到底在辣里吗？我怎么找不到嘞？

答：就知道你们会问这个问题辣，幸好我早有准备，以寻找图像精灵的显示状态这个过程为例

class="video_iframe" height="502.5" width="670" frameborder="0" data-src="https://v.qq.com/iframe/preview.html?vid=i0193ecfw4l&width=500&height=375&auto=0" allowfullscreen="" src="http://v.qq.com/iframe/player.html?vid=i0193ecfw4l&width=670&height=502.5&auto=0" scrolling="no" style="margin: 0px; padding: 0px; max-width: 100%; box-sizing: border-box !important; word-wrap: break-word !important; display: block; z-index: 1; width: 670px !important; height: 502.5px !important; overflow: hidden;">

• 设计地鼠隐藏过程

• 将传值进来的地鼠显示状态设置为false，也就是隐藏该地鼠

• 将分数增加1分

• 调用随机显示地鼠的过程

• 该过程需要接收一个参数number，number为地鼠的序号

• 设置精灵被触碰的动作

• 当精灵被触碰，即调用hidemouse这个过程，并把地鼠的序号作为参数传过去，由于任意精灵中没有精灵触碰事件，因此9个精灵分别要写相应的程序去处理。

• 处理play按钮单击事件

•  将play开关设置为取反，即如果当前play为false，那么按下按钮则为true

        如果play为true，则将play按钮的显示文本设置为“暂停”，启动计时器计时

• 否则，也就是play为false，则将play的显示文本设置为“开始”，停止计时器计时，并且显示警告信息“游戏暂停”，这个过程中play按钮充当了一个开关。

• 处理音乐按钮单击事件

• 这里的music逻辑变量也相当于一个开关，通过判断music的真假来播放音乐。

• 定义过程——“显示结果”

  

• 处理stop按钮单击事件

• 当按下停止按钮，进行判断，如果剩余时间大于0，说明游戏没有结束，因此提醒用户“时间还没到，是否确定退出游戏？”

• 当用户选择退出，则停止计时器计时，停止音乐播放，显示最终成绩

• 设置计时器计时

• 每隔1S,剩余时间-1

• 如果剩余时间为0，停止计时器计时，显示“时间到，游戏结束！”对话框；显示最后的结果，显示结果为一个单独的过程，将music、play、stop都设置为不启用
  

• 如果时间没有到，就继续显示倒计时间和分数，这里在调用画字过程之前都用到了清除画布，原因是如果不清除画布，画布上会留下上一次的文字痕迹~~不懂？自己把清除画布功能去掉看看效果嘛？！

• 设置退出按钮事件
  

• 直接关闭屏幕，退出程序

---

        至此本次教程Over~~~~感兴趣的云朵们可以研究一下将分数存储在网络服务器上，实现排行榜功能~！啦啦啦！

        写到这里云朵们可能想说：发个源码啦！可是我打死也不相信林子和云朵们的小船会说翻就翻~~~为了防止小船说翻就翻，呃，默默贡献源码~~