主要内容
简单的场景变更
假设我们要把小文的故事做成一本图文并茂的故事书，读者可以点击鼠标来翻页阅读下一部分。我们先做一个只有标题的主场景：
background(235, 247, 255);
fill(0, 85, 255);
textSize(25);
text("The Story of Winston", 10, 200);现在我们想要读者点击鼠标就能查看故事的第一部分：小文史诗般的诞生。首先我们定义一个
mouseClicked 函数，只要读者单击鼠标，这个函数就会被调用，然后我们把绘制第二个场景的代码放入函数中。请注意，在绘制第二个场景之前，要先调用 background() 函数，否则两个场景会互相重叠：mouseClicked = function() {
// Scene 2
background(173, 239, 255);
fill(7, 14, 145);
textSize(25);
text("Lil Winston is born!", 10, 100);
image(getImage("creatures/BabyWinston"), 80, 150);
};试试下面的程序——点击查看场景的变化，小小文出生啦！
你现在可以尝试编辑第二个场景的代码，比如更改文本或图像位置。你是否注意到，每次编辑代码之后，都必须单击才能查看第二个场景？
我个人觉得这很烦人，因为这会花我 很长 时间才能调整到我满意为止。试想如果我们有10个场景，而现在要编辑第10个场景——我们每次编辑都要点击10次，很糟糕。
所以我们要解决这个问题。当然不解决这个问题也不会死，但我们都想成为更高效的程序员，如果能实时看到程序结果，我们当然会更高效。这样的话，一个简单的做法是把绘制场景2的代码包装到一个函数中，再在
mouseClicked 中调用该函数，当调试时我们直接调用该函数。我的意思是：var drawScene2 = function() {
background(173, 239, 255);
fill(7, 14, 145);
textSize(25);
text("Lil Winston is born!", 10, 100);
image(getImage("creatures/BabyWinston"), 80, 150);
};
mouseClicked = function() {
drawScene2();
};
// Scene 1
background(235, 247, 255);
fill(0, 85, 255);
textSize(25);
text("The Story of Winston", 10, 200);
drawScene2();我们能把绘制场景2做成一个函数，那我们也能把绘制场景1做成一个函数，只需把绘制场景1的所有代码放进函数里，再调用该函数。
var drawScene1 = function() {
background(235, 247, 255);
fill(0, 85, 255);
textSize(25);
text("The Story of Winston", 10, 200);
};试试下面的程序。这一次，如果你想对场景2进行编辑，只需删去
drawScene2() 前面的注释符号，即可实时查看所做的修改。很好，我们现在已经有两个场景。如何增加第三个场景呢？如何实现第三个场景点击一下又回到第一个场景的功能？我们需要修改
mouseClicked ，使它可以 有条件地选择 显示哪个场景，而不是总调用场景2。这意味着我们需要一个 if 语句，根据某种条件进行判断。先从伪代码的角度来考虑这个问题：// 当用户点击鼠标：
// 如果当前是场景1，转到场景2
// 如果当前是场景2，转到场景3
// 如果当前是场景3，转到场景1看起来我们需要跟踪”当前场景“，并将其存储为数字。我们声明一个全局变量
currentScene , 并在 mouseClicked 中判断它。var currentScene;
mouseClicked = function() {
if (currentScene === 1) {
drawScene2();
} else if (currentScene === 2) {
drawScene3();
} else if (currentScene === 3) {
drawScene1();
}
};上面的条件判断看起来很像我们的伪代码，但有一个问题：我们实际上从来没有给
currentScene 赋过值，所以这些判断永远不会为真。我们 可以 在 if 条件内给它赋值，但最好在场景绘制函数中赋值，这样的话，无论从何处调用场景绘制函数，它都可以被正确赋值。var drawScene1 = function() {
currentScene = 1;
...
};
var drawScene2 = function() {
currentScene = 2;
...
};
var drawScene3 = function() {
currentScene = 3;
...
};我们把代码都放入下面程序中。试着点击看看，是否从故事的开头开始循环播放场景。你可以试着增加场景4（比如小文遇见他的朋友等等），并把场景4加入循环：