Прости промени по сцената

Да кажем, че искаме да разкажем историята на Уинстън като илюстрирана книга и потребителят щраква с мишката, за да прочете следващата част от историята. Ще започнем с главната сцена, която има само заглавие:

background(235, 247, 255);
fill(0, 85, 255);
textSize(25);
text("Историята на Уинстън", 10, 200);

Сега искаме потребителят да може да кликне, за да види първата част от историята, епичното раждане на Уинстън. За да направим това, можем да дефинираме функция mouseClicked, която ще се извиква, когато потребителят кликне някъде с мишката, и можем да постави в нея код, който да нарисува втората сцена. Забележи, че трябва да извикаме background() преди да нарисуваме втората сцена, в противен случай ще виждаме двете сцени, нарисувани една върху друга:

mouseClicked = function() {
    // Scene 2
    background(173, 239, 255);
    fill(7, 14, 145);
    textSize(25);
    text("Малкият Уинстън се роди!", 10, 100);
    image(getImage("creatures/BabyWinston"), 80, 150);
};

Изпробвай в програмата по-долу – кликни, за да видиш смяната на сцената и как Уинстън се ражда!

Сега искам да се опиташ да промениш кода за втората сцена – например да смениш текста или позицията на изображението. Забелязваш ли, че всеки път, когато искаш да видиш резултата от променения код, трябва да кликнеш, за да видиш втората сцена?

Лично за мен е малко дразнещо, защото ми отнема толкова много време, за да редактирам сцена 2, за да се получи точно както ми се ще. Представи си какво трябваше да направим, ако имахме 10 сцени и искахме да променим всичките 10 – щеше да трябва да щракнем 10 пъти върху всяка, за да я редактираме. Пфу!

Нека първо да решим този проблем. Да, и ти, и аз ще оцелеем дори след това дразнещо редактиране, но искаме да бъдем по-продуктивни програмисти. Няма ли да сме по-продуктивни, ако можем да редактираме сцена 2 и да виждаме резултата в реално време? В този случай е лесно да включим целия код за сцена 2 във функция, която се нарича mouseClicked и след това да извикваме тази функция, когато дебъгваме. Ето какво имам предвид:

var drawScene2 = function() {
    background(173, 239, 255);
    fill(7, 14, 145);
    textSize(25);
    text("Роди се малкият Уинстън!", 10, 100);
    image(getImage("creatures/BabyWinston"), width/2, height/2);
};

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

// Сцена 1
background(235, 247, 255);
fill(0, 85, 255);
textSize(39);
text("Историята на Уинстън", 10, height/2);

drawScene2();

След като включихме сцена 2 във функция, можем да направим същото и със сцена 1, просто взимаме целия код и го извикваме.

var drawScene1 = function() {
    background(235, 247, 255);
    fill(0, 85, 255);
    textSize(25);
    text("Историята на Уинстън", 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 (Уинстън среща О не? Уинстън среща Уинстъния и се премества в Уинстънсин?) и я завърти:

Искаш ли да се присъединиш към разговора?

Вписване в профила

Сортирай по:

Все още няма публикации.

Разбираш ли английски? Натисни тук, за да видиш още дискусии в английския сайт на Кан Академия.