jak zmienić kolor przycisku "next" najeżdzając na niego myszką ?

Ponieważ funkcja draw co chwilę rysuje nowy przycisk wystarczy dodać odpowiedni warunek do drawButton. Jeśli by tak nie było (przycisk rysowałby się tylko raz lub kilka razy na scenę) trzeba by było skorzystać z funkcji mouseMoved, która się wywołuje przy każdym ruchu myszki. Zrobiłem u siebie spin-off z odpowiednim kodem, funkcja mouseMoved jest wykomentowana.

Główna zawartość

Programowanie

Kurs: Programowanie > Rozdział 4

Lekcja 2: Zarządzanie scenami

Zmiany scen kontrolowane przyciskiem

Google Classroom

Dotarliśmy tak daleko z użytkownikiem klikającym gdziekolwiek aby zmienić scenę. Ale to podejście ma pewną wadę: nie możemy użyć kliknięć w scenie do jakiejkolwiek dodatkowej interakcji. Sposób, w jaki wiele gier i aplikacji rozwiązało ten problem, to dodanie określonych elementów interfejsu użytkownika, takich jak menu i przyciski, i nawigacja scen, która ma miejsce podczas interakcji z określonym elementem interfejsu użytkownika. Dodajmy przycisk do kontroli scen w prawym górnym rogu naszego programu.

Co to jest "przycisk"? Sprowadza się to dwóch rzeczy: 1) wizualny wskaźnik, że obszar jest klikalny i 2) logika, która sprawia, że obszar odpowiada na kliknięcie. Zacznijmy od wskazania wizualnego, obszar rect() i tekst text() i opakujmy to w funkcje, w przypadku, kiedy chcielibyśmy wywołać to kilka razy:

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

Gdzie powinniśmy to wywołać? Jest wiele potencjalnych miejsc - wszędzie tam, gdzie przycisk ma zostać narysowany na górze:

Gdy program uruchamia się po raz pierwszy, po wywołaniu drawScene1()
Wewnątrz mouseClicked(), po narysowaniu każdej sceny
Wewnątrz mouseDragged(), po narysowaniu nowego dziecka
Wewnątrz draw(), po przerysowaniu animowanej sceny

Dobrą praktyką jest wywoływanie funkcji tylko wtedy, gdy jest to konieczne. W przeciwnym razie marnujemy tylko moc naszego komputera!

Wiemy, że musimy ją wywołać wewnątrz draw(), ponieważ w innym wypadku zniknie, gdy perkusista będzie grał. Pamiętaj, że metoda draw() jest wywoływana cały czas, dużo częściej niż inne metody. Oznacza to, że możemy ją wywołać wyłącznie w draw() i powinno to pokryć wszystkie inne przypadki.

Sprawdź sam! Jeśli wydaje ci się, że potrzebujesz ją w innym miejscu zawsze możesz dopisać kolejne wywołanie w kodzie.

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

Ooo! Teraz mamy przycisk w każdej scenie, cały czas. Sprawdź:

Ale, haha, wiesz co jest zabawne? Przycisk nic nie robi! To znaczy, użytkownik może myśleć, że coś robi, jeśli zdecyduje się kliknąć wyznaczony obszar. Ale w rzeczywistości, można kliknąć gdziekolwiek i będzie tak samo. Musimy zmienić logikę naszego mouseClicked tak, aby sprawdzało położenie przycisku zanim zdecydujemy się zmienić scenę.

Podobnie jak podczas projektowania przycisków we Wprowadzeniu do JS, musimy wymyślić takie warunki if, które będą sprawdzały pozycję mouseX i mouseY. Wszystkie te warunki muszą być spełnione:

Czy mouseX jest większe niż pozycja x po lewej stronie rect?
Czy mouseX jest mniejsze niż pozycja x po prawej stronie rect?
Czy mouseY jest większe niż pozycja y na górze rect?
Czy mouseY jest mniejsze niż pozycja y na dole rect?

Używamy &&, aby sprawdzić, czy wszystkie cztery warunki są prawdziwe, a jeśli tak, to przejdziemy dalej:

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

To jest to! Z tym sprawdzaniem mamy program, gdzie użytkownik klika w określoną część ekranu aby przejść do następnej sceny. Wypróbuj klikając przycisk i obszar poza przyciskiem:

Teraz, kiedy mamy sposób sprawdzania, kiedy kliknięty jest obszar przeznaczony do zmiany scen, możemy użyć kliknięć do innych interakcji w naszych scenach, tak długo, jak użytkownicy nie klikają na przycisk. Oznacza to, że możemy pozwolić użytkownikowi dodać "dzieci Winstona" podczas kliknięcia zamiast przeciągnięcia, jak początkowo chcieliśmy. Wystarczy że dodamy warunek else do naszego if i przeniesiemy kod z mouseDragged do wspomnianego else:

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

Teraz musimy dodać sprawdzenie obecnej sceny, aby wyświetlić obrazek tylko na jednej scenie. Ale teraz, jest to dla nas łatwe, aby dodać oddziaływanie na kliknięcia na innych scenach. Co jeszcze możesz umożliwić użytkownikowi dodać? Bębny? Zarost? Pobaw się z programem poniżej:

Chcesz dołączyć do dyskusji?

Zaloguj się

Sortuj według

Łukasz Tomczak
Opublikowane 7 lat temu. Odnosi się do postu Łukasz Tomczak's o treści “jak zmienić kolor przycis...”
jak zmienić kolor przycisku "next" najeżdzając na niego myszką ?
Kliknij, aby przejść do strony rejestracjiSkomentuj wpis użytkownika Łukasz Tomczak o treści „jak zmienić kolor przycis...”
(1 głos)
Odpowiedź
- Truposz
  Opublikowane 7 lat temu. Odnosi się do postu Truposz's o treści “Ponieważ funkcja draw co ...”
  Ponieważ funkcja draw co chwilę rysuje nowy przycisk wystarczy dodać odpowiedni warunek do drawButton. Jeśli by tak nie było (przycisk rysowałby się tylko raz lub kilka razy na scenę) trzeba by było skorzystać z funkcji mouseMoved, która się wywołuje przy każdym ruchu myszki.
  Zrobiłem u siebie spin-off z odpowiednim kodem, funkcja mouseMoved jest wykomentowana.
  Kliknij, aby przejść do strony rejestracji
  (11 głosów)

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