If you're seeing this message, it means we're having trouble loading external resources on our website.

如果你被网页过滤器挡住,请确保域名*.kastatic.org*.kasandbox.org 没有被阻止.

主要内容

简单的场景变更

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

想加入讨论吗?

尚无帖子。
你会英语吗?单击此处查看更多可汗学院英文版的讨论.