Основно съдържание
Програмиране
Курс: Програмиране > Раздел 4
Урок 2: Управление на сцениПромени по сцената, контролирани от бутон
Стигнахме доста далеч – потребителят може да кликне някъде и да смени сцената. Но разбираме, че в този подход има недостатък: не можем да използваме кликване в сцените за допълнително действие. Начинът, по който този проблем е решен в много игри и приложения, е добавяне на специфични 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);
}
}
};
Забележи, че трябва да продължим да проверяваме текущата сцена, за да сме сигурни, че това се случва само в тази сцена. Но сега е лесно да добавим действие при клик на всяка друга сцена. Какво друго може да добави потребителят? Барабани? Брада? Поиграй си с програмата:
Искаш ли да се присъединиш към разговора?
Все още няма публикации.