Jednoduché změny scén

Řekněme, že chceme vyprávět příběh Winstona ve formě obrázkové knížky, přičemž každým kliknutím může uživatel přejít na další část příběhu. Začneme s hlavní scénou, která obsahuje pouze název:

background(235, 247, 255);
fill(0, 85, 255);
textSize(25);
text("Winstonův příběh", 10, 200);

Nyní chceme, aby mohl uživatel kliknout na první část příběhu, Winstonovo epické narození. Pro tento účel můžeme definovat funkci mouseClicked, která bude volána pokaždé, když uživatel klikne myší, a můžeme ji vložit do kódu pro nakreslení naší druhé scény. Všimni si, že před nakreslením druhé scény musíme zavolat background(); jinak se budou obě scény překrývat:

mouseClicked = function() {
    // Scene 2
    background(173, 239, 255);
    fill(7, 14, 145);
    textSize(25);
    text("Narození Winstona!", 10, 100);
    image(getImage("creatures/BabyWinston"), 80, 150);
};

Vyzkoušej si to v programu níže - stačí kliknou myší pro zobrazení další scény a narodí se malý Winston!

Nyní zkus upravit kód pro druhou scénu, například změň text nebo umístění obrázku. Všímáš si, že pokaždé, když chceš vidět výsledky tvého upraveného kódu, musíš kliknout na druhou scénu?

Osobně mi to přijde celkem otravné, protože to znamená, že to zabere hodně času upravit scénu 2, aby byla taková, jakou ji chci mít. Představ si, že bychom měli 10 scén a chtěli bychom upravit scénu 10 - pro každou úpravu bychom museli udělat 10 kliknutí!

Pojďme to vyřešit. Jistě by to šlo nechat takto, ale protože chceme být výkonnými programátory, bude lepší vidět výsledky našeho kódování v reálném čase. Jednoduchým řešením pak je vložit celý kód scény 2 do funkce, volat tuto funkci z mouseClicked, a pak tuto funkci zavolat, když budeme ladit kód. Zde je ukázka toho, co mám na mysli:

var drawScene2 = function() {
    background(173, 239, 255);
    fill(7, 14, 145);
    textSize(25);
    text("Winston se narodil!", 10, 100);
    image(getImage("creatures/BabyWinston"), 80, 150);
};

mouseClicked = function() {
    drawScene2();
};

// Scene 1
background(235, 247, 255);
fill(0, 85, 255);
textSize(25);
text("Winstonův přiběh", 10, 200);

drawScene2();

A protože jsme udělali z druhé scény funkci, můžeme udělat funkci i ze scény 1, stačí celý kód sloučit a zavolat jej.

var drawScene1 = function() {
    background(235, 247, 255);
    fill(0, 85, 255);
    textSize(25);
    text("Winstonův příběh", 10, 200);
};

Nyní vyzkoušej program níže. Tentokrát, když budeš chtít provést úpravy pro scénu 2, můžeš jednoduše zrušit komentář k volání drawScene2() a vidět tak své úpravy provedené okamžitě.

Skvělé, takže máme hlavní scénu a druhou scénu. Co když budeme chtít zobrazit třetí scénu? Nebo se vrátit k první scéně, jakmile klikneme na třetí? Musíme změnit logiku uvnitř mouseClicked, aby podmíněně zvolila, které ze scén se zobrazí, namísto nekonečného volání scény 2. To znamená, že potřebujeme příkaz if, který zkontroluje nějakou podmínku. Zkus o tom popřemýšlet pomocí pseudokódu:

// Když uživatel klikne myší:
    // pokud je aktuální scéna #1, jdi na #2
    // pokud je aktuální scéna #2, jdi na #3
    // pokud je aktuální scéna #3, vrať se na #1

Vypadá to, že potřebujeme udržovat přehled o "aktuální scéně", a největší smysl by proto dávalo uložit ji jako číslo. Pojďme vyhlásit globální proměnnou currentScene a kontrolujme ji uvnitř mouseClicked.

var currentScene;

mouseClicked = function() {
    if (currentScene === 1) {
        drawScene2();
    } else if (currentScene === 2) {
        drawScene3();
    } else if (currentScene === 3) {
        drawScene1();
    }
};

Podmínky vypadají jako náš pseudokód, ale je tu jeden problém: nikdy jsme nenastavili currentScene na nějakou hodnotu, takže tyto podmínky nikdy nebudou pravdivé. Mohli bychom ji nastavit uvnitř podmínek if, ale je pravděpodobně lepší ji nastavit přímo uvnitř funkcí pro kreslení scény, aby byla proměnná nastavena správně bez ohledu na to, odkud funkce pro kreslení scén voláme.

var drawScene1 = function() {
    currentScene = 1;
    ...
};

var drawScene2 = function() {
    currentScene = 2;
    ...
};

var drawScene3 = function() {
    currentScene = 3;
    ...
};

V programu níže je celý náš kód. Klikni na něj a podívej se, jak se vrací zpátky na začátek příběhu. Zkus přidat scénu čtyři (třeba: Winston potkává Ajaje, Winston potkává Winstonii a stěhuje se do Winstonsinu...) a proveď ji:

Chceš se zapojit do diskuze?

Přihlášení

Setřídit podle:

Zatím žádné příspěvky.

Umíš anglicky? Kliknutím zobrazíš diskuzi anglické verze Khan Academy.