Fő tartalom
Gomb-vezérelt képernyőváltások
Eddig megúsztuk annyival, hogy képernyőt váltottunk, bárhová kattintott is a felhasználó. Azonban fel is fedeztük, hogy ennek a megközelítésnek van egy hátránya: nem használhatjuk a kattintást képernyőn belül bármilyen egyéb interakcióra. A legtöbb játék és applikáció ezt a problémát úgy oldja meg, hogy külön erre a célra szolgáló felhasználói felületi elemeket helyez el – például menüket vagy gombokat –, és a képernyők közti navigálást valamelyik ilyen specifikus elem segítségével végzi el. Adjunk hozzá egy gombot a jobb felső részhez, amivel a programunk képernyőit fogjuk váltogatni!
Mi az a „gomb”? Valójában két dolgot is jelent: 1) képi megjelenítése annak, hogy egy terület kattintható, és 2) az a logika, aminek hatására a terület reagál a kattintásra. Kezdjük a képi megjelenítéssel: egy
rect() (téglalap) és egy text() (szöveg), majd tegyük bele ezeket egy függvénybe, arra az esetre, ha többször is meg szeretnénk hívni:var drawButton = function() {
fill(81, 166, 31);
rect(15, 10, 50, 25);
fill(255, 255, 255);
textSize(16);
text("NEXT", 19, 29);
};Hol kellene vajon meghívnunk? Rengeteg lehetséges hely van – valahányszor azt szeretnénk, hogy a gomb rajzolódjon ki legfelül:
- Amikor a program először betöltődik, miután meghívtuk a
drawScene1()-et - A
mouseClicked()-en belül, minden képernyő kirajzolása után - A
mouseDragged()-en belül, miután kirajzoltuk az új kisgyermeket - A
draw()-n belül, miután újrarajzoltuk az animált képernyőt
Általános szabály, hogy a függvényeket csak olyan gyakran szeretnénk meghívni, amilyen gyakran valóban szükségesek, nem többször. Különben csak pazarolnánk a számítógépünk energiáját!
Tudjuk, hogy a
draw()-ban kell meghívnunk, mert különben el fog tűnni amikor a dobos dobol. Ne felejtsd el, hogy a draw() metódus folyton meghívódik, gyakrabban, mint bármelyik másik metódus. Ez pedig azt jelenti, hogy csak a draw()-ból hívhatjuk meg, és le kell kezelnünk minden esetet.Próbáld ki! Ha úgy érzed, hogy máshol is szükséged lenne rá, nincs más dolgod, mint hozzáadni egy újabb hívást a kódodhoz!
draw = function() {
if (currentScene === 4) {
drawScene4();
}
drawButton();
};Ejha! Van egy állandó gombunk minden képernyőn. Nézd csak:
De tudod mi az igazán vicces ebben az egészben? Hogy ez a gomb nem is csinál semmit! A felhasználó persze azt hiheti, hogy történik valami, ha arra a területre kattint, ám valójában bárhova kattintana, ugyanaz történne. Meg kell változtatnunk a
mouseClicked logikáját úgy, hogy még azelőtt vizsgáljuk meg a gomb helyzetét, mielőtt képernyőt váltanánk!Ahogy a Bevezetés a JS-be gombos feladataiban csináltuk, itt is szükségünk lesz egy
if utasításra, amivel megvizsgáljuk a mouseX és mouseY értékét. Az alábbiaknak mind teljesülnie kell:- Nagyobb a
mouseX, mint arectbal oldali x helyzete? - Kisebb a
mouseX, mint arectjobb oldali x helyzete? - Nagyobb a
mouseY, mint arectfelső oldalának y helyzete? - Kisebb a
mouseY, mint arectalsó oldalának oldali y helyzete?
Az
&& segítségével vizsgálhatjuk meg, hogy mind a négy feltétel igaz-e, és ha igen, akkor lépünk a következő képernyőre:mouseClicked = function() {
if (mouseX >= 15 && mouseX <= 65 &&
mouseY >= 10 && mouseY <= 45) {
...
}
};Ennyi! Ezzel a változtatással elkészültünk a programmal, amiben a felhasználó a képernyő egy adott területére kattintva tud a következő képernyőre lépni. Próbáld ki, mi történik, ha a gomb területére kattintasz és azt is, hogy mi akkor, ha azon kívülre:
Most, hogy már tudjuk, hogy a kattintás mikor fog képernyőváltást jelenteni, használhatjuk a kattintást a képernyő gombon kívüli területén más interakciókra. Megtehetjük például, hogy a felhasználó egérhúzás helyett kattintásra adhassa hozzá Winston gyermekeit, ahogy azt eredetileg is szerettük volna. Csak írunk egy else ágat az if-hez, és a
mouseDragged kódját az else ágba helyezzük:mouseClicked = function() {
if (mouseX >= 15 && mouseX <= 65 &&
mouseY >= 10 && mouseY <= 45) {
...
} else {
if (currentScene === 5) {
image(getImage("creatures/BabyWinston"),
mouseX-20, mouseY-20);
}
}
};Érdemes megjegyezni, hogy az aktuális képernyőt ellenőriznünk kell, hiszen csak egyik képernyőnél szeretnénk gyermekeket hozzáadni. De most már egyszerűen adhatunk hozzá kattintásos interakciót, bármely más képernyőn is! Hmmm... mit adhasson hozzá a felhasználó? Dobokat? Arcszőrzetet? Kísérletezz kicsit az alábbi programmal:
Szeretnél részt venni a beszélgetésben?
Még nincs hozzászólás.