主要内容
按钮控制的场景变更
到现在为止，我们已经做到了让用户点击任何地方，就可以改变场景。但这有一个缺点：我们的场景中没有使用点击进行任何其他的互动。很多游戏和
应用会添加特定的UI元素（比如菜单或者按钮），并且只通过与UI元素互动来进行场景导航。我们来试试在右上角添加一个按钮来控制场景。
按钮是什么？只有两点：1）有一小块可视区域可以点击，2）点击之后有程序来回应。我们先从绘制一小块区域来入手，只需把矩阵函数
rect() 加上文字函数 text() 封装在一个函数里，以便重复调用：var drawButton = function() {
fill(81, 166, 31);
rect(15, 10, 50, 25);
fill(255, 255, 255);
textSize(16);
text("NEXT", 19, 29);
};我们在哪里调用这个函数呢？要把按钮画在顶部的话，有很多地方可以调用它：
- 在程序的一开始，紧接着函数
drawScene1()之后 2. 在mouseClicked()中，绘制完每个场景之后 3. 在mouseDragged()中，画出另一个婴儿之后 4. 在draw()中，在绘制每帧动画之后
一般原则是，调用函数的次数能满足需要就好，不能多于需要次数。否则，我们就是在浪费电脑的运算资源！
我们需要在
draw() 中调用绘制按钮的函数，否则鼓手一敲鼓按钮就消失了。注意 draw() 方法是在不停的被调用的，比其他任何方法都多。这意味着 只需要
在 draw() 中调用它，其他的情况也都能被满足了。自己试试吧！如果你想在其他地方也加入按钮，你可以在代码中另外调用。
draw = function() {
if (currentScene === 4) {
drawScene4();
}
drawButton();
};酷！现在我们在每个场景中都有一个按钮了，而且它一直存在。看：
但是，哈哈，你知道有趣在哪吗？按钮什么也没干！我是说，如果只点击按钮区域的话，用户也许会认为按钮有作用。但实际上，点击任何位置都会切换场景。我们来修改
mouseClicked，以便在决定要切换场景之前，能先判断是否点击在按钮区域。mouseX是否大于矩形rect左边线的 x 坐标？mouseX是否小于矩形rect的右边线的 x 坐标？mouseY是否大于矩形rect上边线的 y 坐标？mouseY是否小于矩形rect下边线的 y 坐标？
用
&& 来判断四个条件是否同时为真，若是，则进入下一场景：mouseClicked = function() {
if (mouseX >= 15 && mouseX <= 65 &&
mouseY >= 10 && mouseY <= 45) {
...
}
};搞定！通过这个判断，程序实现了用户点击特定的区域才能进入下一场景的功能。试试点击按钮区域内和区域外有什么不同：
现在我们已经可以判断用户的一次点击是否表明是想切换场景，那么只要用户不是点击在按钮上，我们可以通过点击来实现其他互动。这意味着用户可以通过点击，而不是拖动，来增加婴儿数，这正我们最初的需求。我们只需要在 if 语句中增加一个 else，然后把
mouseDragged 中的代码移动到 else 语句中：mouseClicked = function() {
if (mouseX >= 15 && mouseX <= 65 &&
mouseY >= 10 && mouseY <= 45) {
...
} else {
if (currentScene === 5) {
image(getImage("creatures/BabyWinston"),
mouseX-20, mouseY-20);
}
}
};注意我们需要持续判断当前场景，来确保增加孩子这件事只发生在场景5。但现在，我们可以很容易的在其他场景添加其他互动。你还想让用户增加什么呢？鼓？炫酷的发型？用下面的程序自己来试试吧：