Proste zmiany scen

Uznajmy, że chcemy przedstawić historię Winstona poprzez książkę z obrazkami, w której kliknięcie użytkownika spowoduje wyświetlenie kolejnej części historii. Zaczynamy od pierwszej sceny, która posiada tylko tytuł:

background(235, 247, 255);
fill(0, 85, 255);
textSize(25);
text("Historia Winstona", 10, 200);

Teraz chcemy, aby użytkownik po kliknięciu mógł zobaczyć pierwszą część historii - moment epickiego narodzenia Winstona. Aby to zrobić, możemy zdefiniować funkcję mouseClicked która będzie wywoływana za każdym razem, gdy użytkownik kliknie myszką. W metodzie tej umieścimy kod rysujący naszą kolejną scenę. Zauważcie, że musimy wywołać background() przed narysowaniem kolejnej sceny, w przeciwnym wypadku sceny będą się na siebie nakładać:

mouseClicked = function() {
    // Scene 2
    background(173, 239, 255);
    fill(7, 14, 145);
    textSize(25);
    text("Mały Winston się urodził!", 10, 100);
    image(getImage("creatures/BabyWinston"), 80, 150);
};

Spróbuj wykonać poniższy program - kliknij, aby zmienić scenę i zobaczyć narodziny małego Winstona!

Spróbuj teraz zmienić coś w drugiej scenie, na przykład zmień coś w tekście, albo zmień położenie obrazka. Zapewne zwróciło Twoją uwagę, że za każdym razem gdy chcesz sprawdzić rezultaty swojej pracy, musisz kliknąć aby przywołać drugą scenę?

Osobiście, nie podoba mi się to, ponieważ w rezultacie praca nad perfekcyjną wersją sceny drugiej trwa znacznie dłużej. A co będzie, jeśli mamy 10 scen i zmieniamy coś w scenie 10? Musimy kliknąć 9 razy, aby zobaczyć rezultaty każdej zmiany. No nieee!

Zabierzmy się za rozwiązanie tego problemu. Tak, możemy co prawda wytrzymać z tymi irytującymi okolicznościami, ale chcemy także być produktywnymi programistami, a przecież będziemy znacznie bardziej produktywni, jeśli będziemy mogli oglądać wyniki w czasie rzeczywistym, prawda? W tym celu najłatwiej będzie umieścić cały kod sceny drugiej w funkcji, a następnie wywoływać tą funkcję z mouseClicked, po czym wywołać tą funkcję podczas testowania aplikacji. To jest to, co mam na myśli:

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

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

// Scene 1
background(235, 247, 255);
fill(0, 85, 255);
textSize(25);
text("Historia Winstona", 10, 200);

drawScene2();

Skoro już uczyniliśmy rysowanie drugiej sceny funkcją, możemy równie dobrze umieścić kod rysujący pierwszą scenę w osobnej funkcji i ją wywoływać.

var drawScene1 = function() {
    background(235, 247, 255);
    fill(0, 85, 255);
    textSize(25);
    text("Historia Winstona", 10, 200);
};

A teraz, spróbuj co się stanie, jak wykonasz poniższy program. Tym razem, jeśli zmienisz coś w drugiej scenie, możesz po prostu odkomentować polecenie drawScene2() i natychmiast zobaczyć rezultaty tych zmian.

Świetnie, mamy więc naszą główną scenę oraz drugą scenę. Co możemy zrobić, jeśli chcemy wyświetlić trzecią scenę? Lub wrócić do pierwszej, gdy klikniemy myszką podczas trzeciej sceny? Musimy zmienić działanie mouseClicked, tak aby na podstawie warunku wybierał którą scenę powinien wyświetlać, zamiast zawsze wywoływać drugą scenę. Oznacza to, że potrzebujemy użyć konstrukcji if która będzie sprawdzać pewien warunek. Opiszmy to wpierw za pomocą pseudo-kodu:

// When the user clicks the mouse:
    // if the current scene is #1, go to #2
    // if the current scene is #2, go to #3
    // if the current scene is #3, go back to #1

Wygląda na to, że musimy monitorować "aktualną scenę", a największy sens ma przechowywanie tej informacji w postaci liczby. Zadeklarujmy więc globalną zmienną currentScene, która będzie sprawdzana wewnątrz mouseClicked.

var currentScene;

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

Warunki wyglądają jak nasz pseudo-kod, ale jest jeden problem: nigdy nie ustawiamy wartości currentScene, więc te warunki nigdy nie będą spełnione. Mamy zestaw może go wewnątrz jeżeli warunki, ale to ' s prawdopodobnie lepiej ustawić wewnątrz sceny rysunek funkcji, sami, tak, że zmienna jest zestaw poprawnie bez względu na to, gdzie nazywamy rysunek scena działa od.

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

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

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

Połączyliśmy to wszystko w poniższym programie. Zapoznajcie się z nim, obserwując jak przewija w kółko całą historię. Spróbuj dodać kolejną scenę (Winston spotykający Oh Noes? Winston poznający panią Winstonową, po czym przeprowadzający się wraz z nią do Winstonsin?) i uruchomić ją:

Chcesz dołączyć do dyskusji?

Zaloguj się

Sortuj według

Ania .....
Opublikowane 4 lata temu. Odnosi się do postu Ania .....'s o treści “Czy ktoś wie jak zrobić W...”
Czy ktoś wie jak zrobić Wyzwanie: Narrator opowieści (stronę dalej) ?
Kliknij, aby przejść do strony rejestracjiSkomentuj wpis użytkownika Ania ..... o treści „Czy ktoś wie jak zrobić W...”
(1 głos)
Odpowiedź
BartekM
Opublikowane 5 lat temu. Odnosi się do postu BartekM's o treści “jak to rozwinąć?”
jak to rozwinąć?
Kliknij, aby przejść do strony rejestracjiKomentarz do wpisu użytkownika BartekM o treści „jak to rozwinąć?”
(0 głosów)
Odpowiedź

Rozumiesz angielski? Kliknij tutaj, aby zobaczyć więcej dyskusji na angielskiej wersji strony Khan Academy.