Промени по сцената, контролирани от бутон

Стигнахме доста далеч – потребителят може да кликне някъде и да смени сцената. Но разбираме, че в този подход има недостатък: не можем да използваме кликване в сцените за допълнително действие. Начинът, по който този проблем е решен в много игри и приложения, е добавяне на специфични UI елементи, като менюта и бутони, и навигиране през сцените само при действие с определен елемент. Нека да добавим бутон в горния десен ъгъл, за да контролираме сцените в нашата програма.

Какво е "бутон"? Той всъщност е две неща: 1) визуален индикатор, че върху това място може да се кликне и 2) логиката, която кара това място да отговаря на кликване. Да започнем с визуалния индикатор – rect() с някакъв text(), и да го поставим във функция, в случай, че искаме да го извикаме няколко пъти:

var drawButton = function() {
    fill(81, 166, 31);
    rect(15, 10, 50, 25);
    fill(255, 255, 255);
    textSize(16);
    text("НАТАТЪК", 19, 29);
};

Сега къде да го извикаме? Има много добри потенциални места – всеки път, когато искаме да сме сигурни, че бутонът ще се нарисува над всичко останало:

Когато програмата се зареди за пръв път, след като извикаме drawScene1()
Вътре в mouseClicked(), след като нарисуваме всяка сцена
Вътре в mouseDragged(), след като нарисуваме ново бебе
Вътре в draw(), след като пренарисуваме анимираната сцена

Като основно правило искаме да викаме функции само тогава, когато са ни нужни, и в никой друг момент. Иначе само хабим енергията на компютъра.

Знаем, че трябва да го извикаме в draw(), защото иначе ще изчезне, докато барабанистът бие на барабаните. Не забравяй, че методът draw() се вика през цялото време, което е по-често от всички останали методи. Това значи, че можем да го извикаме единствено от draw() и така ще се погрижим за всички останали случаи.

Опитай самостоятелно! Ако ти потрябва някъде другаде, можеш винаги да добавиш още едно повикване към него някъде в кода си.

draw = function() {
    if (currentScene === 4) {
        drawScene4();
    }
    drawButton();
};

Уау! Сега имаме бутон във всяка сцена през цялото време. Увери се:

Но, хаха, знаеш ли кое е най-смешно? Този бутон не прави нищо! Потребителят може и да си мисли, че прави нещо, ако реши да кликне върху него. Но всъщност може да кликне където и да е и пак ще се случи едно и също. Трябва да променим логиката в mouseClicked, за да проверяваме дали сме върху бутона преди да решим дали е време да сменим сцената.

Както в предизвикателствата с бутоните във Въведение в JS, трябва да напишем и if условие, за да проверяваме mouseX и mouseY. Всички тези трябва да са истина:

Дали mouseX е по-голямо от позицията x на лявата страна на rect?
Дали mouseX е по-малко от позицията x на дясната страна на rect?
Дали mouseY е по-голямо от позицията y на горната страна на rect?
Дали mouseY е по-малко от позицията y на долната страна на rect?

Използваме &&, за да проверим дали и четирите условия са истина и ако е така продължаваме към следващата сцена:

mouseClicked = function() {
    if (mouseX >= 15 && mouseX <= 65 &&
        mouseY >= 10 && mouseY <= 45) {
        ...
    }
};

Това е всичко! С тази проверка имаме програма, в която потребителят може да кликне върху конкретна част от екрана и да премине на следващата сцена. Опитай да кликнеш върху бутона и извън него:

След като вече имаме начин да разберем кога един клик означава смяна на сцената, можем да използваме кликовете и за други действия в нашите сцени, стига да не са върху бутона. Това означава, че можем да оставим потребителят да добавя бебета на Уинстън с кликване, вместо с влачене, както искахме в самото начало. Ще добавим само един else след нашия if и ще преместим кода от mouseDragged в този else:

mouseClicked = function() {
    if (mouseX >= 15 && mouseX <= 65 &&
        mouseY >= 10 && mouseY <= 45) {
        ...
    } else {
        if (currentScene === 5) {
            image(getImage("creatures/BabyWinston"),
                  mouseX-20, mouseY-20);
        }
    }
};

Забележи, че трябва да продължим да проверяваме текущата сцена, за да сме сигурни, че това се случва само в тази сцена. Но сега е лесно да добавим действие при клик на всяка друга сцена. Какво друго може да добави потребителят? Барабани? Брада? Поиграй си с програмата:

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

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

Сортирай по:

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

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