主要内容
简单的场景变更
假设我们要把小文的故事做成一本图文并茂的故事书,读者可以点击鼠标来翻页阅读下一部分。我们先做一个只有标题的主场景:
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加入循环: