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

Ha webszűrőt használsz, győződj meg róla, hogy a *.kastatic.org és a *.kasandbox.org nincsenek blokkolva.

Fő tartalom

Egyszerű képernyő-váltások

Tegyük fel, hogy szeretnénk Winston történetét egy illusztrált novelláskötetben bemutatni, ahol a felhasználók kattintással tudják a történet következő részét elolvasni. Kezdjük a fő képernyővel, aminek csak címe van:
background(235, 247, 255);
fill(0, 85, 255);
textSize(25);
text("The Story of Winston", 10, 200);
Ezután azt szeretnénk, hogy a felhasználó kattintást követően lássa a történetének első fejezetét: Winston varázslatos születését. Ehhez definiáljunk egy mouseClicked függvényt, ami mindig meghívódik, ha a felhasználó az egérrel kattint, és tegyük ezt a rajzoló kódot ide a második képernyőbe. Ne feledjük, hogy meg kell hívnunk a background() függvényt, mielőtt kirajzolnánk a második képernyőt, különben egymáson lennének a képernyők:
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);
};
Próbáld ki az alábbi programot – kattints, hogy lásd a képernyőváltást, és a kicsi Winston születését!
Most próbáld meg a második képernyő kódját módosítani, például azzal, hogy megváltoztatod a szöveget, vagy a kép helyét. Észrevetted, hogy minden alkalommal, amikor meg szeretnéd nézni a módosított kódod eredményét, kattintanod kell, hogy lásd a második képernyőt?
Engem ez nagyon idegesít, hiszen így nagyon sokáig tart, ha addig szeretném módosítgatni a második képernyőt, amíg teljesen elégedett nem vagyok vele. Mi lenne, ha 10 képernyőnk lenne, és a tizedik képernyőt szeretnénk módosítani? Minden szerkesztésnél 10-szer kellene kattintanunk! Nem hangzik túl jól.
Találjunk ki rá valami megoldást! Persze túlélhető egy ilyen bosszantó dolog, de mindannyian szeretnénk hatékony programozók lenni, viszont ha nem láthatjuk valós időben a kódunk eredményét, akkor nem leszünk azok. Most például egyszerűen becsomagolhatjuk a második képernyő kódját egy függvénybe, amit a mouseClicked-en belül meghívunk, mikor debuggolunk. Megmutatom, hogyan is gondolom:
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();
Nemcsak a második képernyőt helyezhetjük el egy függvényben, hanem akár az elsőt is! Csak helyezzük el a kódot egy függvény törzsében, majd hívjuk meg!
var drawScene1 = function() {
    background(235, 247, 255);
    fill(0, 85, 255);
    textSize(25);
    text("The Story of Winston", 10, 200);
};
Most próbáljuk ki az alábbi programot! Ez alkalommal ha módosítani szeretnéd a második képernyőt, csak kommenteld ki a drawScene2() hívást, hogy rögtön lásd, hogyan renderelődik ki.
Remek, most már van főképernyőnk és második képernyőnk is. Mit tegyünk, ha szeretnénk egy harmadikat is? Vagy ha visszatérnénk inkább az első képernyőhöz, amikor kattintunk a harmadikon? Meg kell változtatnunk a mouseClicked-en belüli logikát, hogy feltételtől függően válassza ki, melyik képernyőt mutassa ahelyett, hogy mindig a második képernyőt jelenítené meg. Ez tehát azt jelenti, hogy kelleni fog nekünk egy if utasítás, amivel megvizsgálhatunk bizonyos feltételeket. Elsőként gondoljuk át pszeudokód segítségével:
// Ha a felhasználó kattint az egerével:
    // ha az aktuális képernyő az első, ugorjon a 2.képernyőre
    // ha az aktuális képernyő a második, ugorjon a 3. képernyőre
    // ha az aktuális képernyő a harmadik, ugorjon vissza az 1-re
Úgy tűnik, számon kell tartanunk az „aktuális képernyőt”, és egészen logikus is lenne, hogy számként tároljuk. Készítsünk is ehhez egy currentScene globális változót, és vizsgáljuk meg az értékét a mouseClicked-en belül.
var currentScene;

mouseClicked = function() {
    if (currentScene === 1) {
        drawScene2();
    } else if (currentScene === 2) {
        drawScene3();
    } else if (currentScene === 3) {
        drawScene1();
    }
};
A feltételek olyanok, mint a pszeudokódunkban, de van egy kis gond: igazából sosem állítottuk be a currentScene értékét, így ezek a feltételek sosem lesznek igazak. Akár az if utasításon belül is beállíthatnánk, de szerencsésebb, ha a képernyőt kirajzoló függvényeken belül állítjuk be, így a változó értéke mindig a megfelelő értéket fogja kapni, attól függetlenül, hogy honnan hívjuk meg az adott képernyőt kirajzoló függvényeket.
var drawScene1 = function() {
    currentScene = 1;
    ...
};

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

var drawScene3 = function() {
    currentScene = 3;
    ...
};
Alább összeraktuk az egészet egy programba. Kattintgasd végig és figyeld meg, hogy visszaugrik az első képernyőre, hogyha a végére értél! Próbálj meg hozzáadni egy negyedik képernyőt (lehetne mondjuk Winston találkozása Jaj ne! figurával, vagy Winston találkozása Winstoniával, és Winstonsinba költözés), és készíts belőle saját változatot:

Szeretnél részt venni a beszélgetésben?

Még nincs hozzászólás.
Tudsz angolul? Kattints ide, ha meg szeretnéd nézni, milyen beszélgetések folynak a Khan Academy angol nyelvű oldalán.